{"id":75556,"date":"2023-01-17T09:15:00","date_gmt":"2023-01-17T08:15:00","guid":{"rendered":"https:\/\/eiposgrados.com\/?p=75556"},"modified":"2023-01-13T12:25:56","modified_gmt":"2023-01-13T11:25:56","slug":"features-and-updates","status":"publish","type":"post","link":"https:\/\/eiposgrados.com\/eng\/blog-desarrollo-web-fullstack\/caracteristicas-y-actualizaciones\/","title":{"rendered":"React 18: Features and Updates"},"content":{"rendered":"<h2 class=\"wp-block-heading\">React 18<\/h2>\n\n\n\n<p><strong>react <\/strong>is a very popular JavaScript library. Its latest update has brought some significant new features that are worth knowing. This way, you can get the most out of it when building better applications.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-2450b6ea gb-headline-text\">React Features<\/h2>\n\n\n\n<p>Given its wide use for <strong>build web applications<\/strong>, mobile and desktop, it is essential to understand their characteristics. After all, without them it would not be such a relevant bookstore. Take these qualities into account:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Component based<\/strong>: Allows you to build applications as a collection of reusable materials. This makes it easy to take full advantage of the code and create great developments with a modular design.<\/li>\n\n\n\n<li><strong>virtual DOM<\/strong>: Uses a virtual DOM (Document Object Model) to optimize user interface modifications. When the state of a component changes, the library updates the DOM and then reconciles the differences between it and the real one. In this way, the performance of the entire code is improved.<\/li>\n\n\n\n<li><strong>JSX (JavaScript XML)<\/strong>: It is a syntax extension of <a href=\"https:\/\/eiposgrados.com\/eng\/blog-web-development\/create-your-first-hello-world-with-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript <\/a>which allows you to write HTML-like code in files. Thanks to this feature, the construction of the application is simpler and has a homogeneous style.<\/li>\n\n\n\n<li><strong>React Hooks<\/strong>: Version 16.8 introduced using state and other features without writing a class component. Such an improvement speeds up the inclusion of functional components and increases the readability of the code.<\/li>\n\n\n\n<li><strong>Server-side rendering<\/strong>: It can also be used to build this type of applications. Thanks to this, an improvement in both the performance and SEO of a web application is obtained.<\/li>\n\n\n\n<li><strong>Native<\/strong>: It has a framework called Native with which to develop native mobile applications, which allows code to be reused.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"gb-headline gb-headline-72f40dba gb-headline-text\">What changes have been introduced in version 18?<\/h2>\n\n\n\n<p>Version 18 introduces a large number of new features, as well as bug fixes. It represents some improvements to the library&#039;s capabilities, among which these stand out:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Improved JSX transformation<\/strong>: This syntax can now be used in more contexts, such as in the return value of a function.<\/li>\n\n\n\n<li><strong>New JSX Transformation API<\/strong>: Makes it easier to customize the behavior of this process.<\/li>\n\n\n\n<li><strong>Performance improvement<\/strong>: Updates to the virtual DOM are faster and memory management has been optimized.<\/li>\n\n\n\n<li><strong>New <\/strong><em><strong>runtime<\/strong><\/em><strong> JSX<\/strong>: Supports <strong>API <\/strong>JSX transformation and improves overall performance.<\/li>\n\n\n\n<li><strong>Depreciation of <\/strong><em><strong>runtime <\/strong><\/em><strong>old JSX<\/strong>: This is a step prior to the elimination of this component, something that will be carried out in future versions. Thus, only the new version will exist.<\/li>\n\n\n\n<li><strong>New <\/strong><em><strong>hooks<\/strong><\/em>: Includes <em>useId <\/em>and <em>useDeferredValue<\/em>. The first allows you to create a unique identifier on both the server and the client. For its part, the second causes the values to be updated later so that the UI does it instantly.<\/li>\n\n\n\n<li><strong>Batch update<\/strong>: Its objective is to avoid unnecessary rendering when more than one state update occurs. To prevent this from happening, they are stacked automatically.<\/li>\n\n\n\n<li><strong>Concurrency mode<\/strong>: The possibility of interrupting a rendering is introduced to prevent those that do not seem relevant to you from being activated. This ensures that the UI is always available for interactions with the user.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/eiposgrados.com\/wp-content\/uploads\/2023\/01\/hands-of-hr-specialist-browsing-social-networks-in-the-internet-in-smart-phone-to-find-the-best-candidates-to-hire-international-team-concept-of-success-media-hologram-icons-formal-wear-1024x683.jpg\" alt=\"\" class=\"wp-image-75763\" title=\"\" srcset=\"https:\/\/eiposgrados.com\/wp-content\/uploads\/2023\/01\/hands-of-hr-specialist-browsing-social-networks-in-the-internet-in-smart-phone-to-find-the-best-candidates-to-hire-international-team-concept-of-success-media-hologram-icons-formal-wear-1024x683.jpg 1024w, https:\/\/eiposgrados.com\/wp-content\/uploads\/2023\/01\/hands-of-hr-specialist-browsing-social-networks-in-the-internet-in-smart-phone-to-find-the-best-candidates-to-hire-international-team-concept-of-success-media-hologram-icons-formal-wear-300x200.jpg 300w, https:\/\/eiposgrados.com\/wp-content\/uploads\/2023\/01\/hands-of-hr-specialist-browsing-social-networks-in-the-internet-in-smart-phone-to-find-the-best-candidates-to-hire-international-team-concept-of-success-media-hologram-icons-formal-wear-768x512.jpg 768w, https:\/\/eiposgrados.com\/wp-content\/uploads\/2023\/01\/hands-of-hr-specialist-browsing-social-networks-in-the-internet-in-smart-phone-to-find-the-best-candidates-to-hire-international-team-concept-of-success-media-hologram-icons-formal-wear-248x165.jpg 248w, https:\/\/eiposgrados.com\/wp-content\/uploads\/2023\/01\/hands-of-hr-specialist-browsing-social-networks-in-the-internet-in-smart-phone-to-find-the-best-candidates-to-hire-international-team-concept-of-success-media-hologram-icons-formal-wear-123x82.jpg 123w, https:\/\/eiposgrados.com\/wp-content\/uploads\/2023\/01\/hands-of-hr-specialist-browsing-social-networks-in-the-internet-in-smart-phone-to-find-the-best-candidates-to-hire-international-team-concept-of-success-media-hologram-icons-formal-wear-1536x1024.jpg 1536w, https:\/\/eiposgrados.com\/wp-content\/uploads\/2023\/01\/hands-of-hr-specialist-browsing-social-networks-in-the-internet-in-smart-phone-to-find-the-best-candidates-to-hire-international-team-concept-of-success-media-hologram-icons-formal-wear-500x333.jpg 500w, https:\/\/eiposgrados.com\/wp-content\/uploads\/2023\/01\/hands-of-hr-specialist-browsing-social-networks-in-the-internet-in-smart-phone-to-find-the-best-candidates-to-hire-international-team-concept-of-success-media-hologram-icons-formal-wear-800x533.jpg 800w, https:\/\/eiposgrados.com\/wp-content\/uploads\/2023\/01\/hands-of-hr-specialist-browsing-social-networks-in-the-internet-in-smart-phone-to-find-the-best-candidates-to-hire-international-team-concept-of-success-media-hologram-icons-formal-wear-1280x853.jpg 1280w, https:\/\/eiposgrados.com\/wp-content\/uploads\/2023\/01\/hands-of-hr-specialist-browsing-social-networks-in-the-internet-in-smart-phone-to-find-the-best-candidates-to-hire-international-team-concept-of-success-media-hologram-icons-formal-wear-200x133.jpg 200w, https:\/\/eiposgrados.com\/wp-content\/uploads\/2023\/01\/hands-of-hr-specialist-browsing-social-networks-in-the-internet-in-smart-phone-to-find-the-best-candidates-to-hire-international-team-concept-of-success-media-hologram-icons-formal-wear.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p><strong><a href=\"https:\/\/es.reactjs.org\/\" data-type=\"URL\" data-id=\"https:\/\/es.reactjs.org\/\" target=\"_blank\" rel=\"noopener\">react<\/a> <\/strong>It has received a series of changes to optimize its operation and make it more agile. Thanks to these updates, the library will continue to be one of the most used in JavaScript. In addition, they help keep it in top shape and make its usability even greater. If you want to master it in all its aspects, discover this <strong><a href=\"https:\/\/eiposgrados.com\/eng\/programs\/master-in-fullstack-web-development\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/eiposgrados.com\/programas\/master-en-desarrollo-web-fullstack\/\" rel=\"noreferrer noopener\">Professional Master in Full Stack Web Development.<\/a><\/strong> It will surprise you.<\/p>","protected":false},"excerpt":{"rendered":"<p>React is a very popular JavaScript library. Its latest update has brought some significant new features that are worth knowing. This way, you can get the most out of it when building better applications.<\/p>","protected":false},"author":1,"featured_media":75557,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1149],"tags":[],"class_list":["post-75556","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-desarrollo-web-fullstack"],"acf":[],"_links":{"self":[{"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/posts\/75556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/comments?post=75556"}],"version-history":[{"count":0,"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/posts\/75556\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/media\/75557"}],"wp:attachment":[{"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/media?parent=75556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/categories?post=75556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/tags?post=75556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}