{"id":3381,"date":"2023-02-01T08:29:04","date_gmt":"2023-02-01T08:29:04","guid":{"rendered":"https:\/\/www.chilliapple.co.uk\/blog\/?p=3381"},"modified":"2023-03-09T06:57:02","modified_gmt":"2023-03-09T06:57:02","slug":"upgrading-to-react-18","status":"publish","type":"post","link":"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18","title":{"rendered":"ReactJS V18 Upgrade: What&#8217;s New?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">There have been a ton of changes in ReactJS since its 16th version. Finally, React 18 is available. Many of its upgrades were in response to user feedback, so if you\u2019ve been held back by some of React\u2019s current quirks, it\u2019s time to celebrate as v18 has got you covered.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Because updates typically include improvements that radically alter features or even eliminate certain aspects while adding others, eCommerce store owners need help transitioning between different versions of libraries. And this can be done with the help of <a href=\"https:\/\/www.chilliapple.co.uk\/reactjs-developer\">ReactJS developers<\/a>. It is preferable to utilize the most recent versions of libraries to achieve the best possible performance.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This article will look through some of the noteworthy new features of the latest version of React. Should you update to react 18 right away?<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18\/#Whats_New_in_React_v18\" >What\u2019s New in React v18?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18\/#How_to_Upgrade_to_React\" >How to Upgrade to React<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18\/#Final_Words\" >Final Words<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Whats_New_in_React_v18\"><\/span><b>What\u2019s New in React v18?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html\" target=\"_blank\" rel=\"noopener\">React 18<\/a> places a greater emphasis on application concurrency. This concept comprises APIs such as createRoot, hydrateRoot, renderToPipeableStream, and renderToReadableStream, as well as functions such as Automatic Batching, Transition, and Suspense. It also adds hooks like useId, useTransition, useDeferredValue, useSyncExternalStore, useInsertionEffect, and Strict Mode updates and moves firmly away from <\/span><i><span style=\"font-weight: 400;\">ReactDOM.render<\/span><\/i><span style=\"font-weight: 400;\"> and<\/span><i><span style=\"font-weight: 400;\"> renderToString<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s closely examine these changes:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Automatic render batching<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Prior to version 17, state updates were only batch processed in React event handlers. Assume we are in charge of two states. For instance, one displays a score, while the other represents available actions. The user\u2019s activity raises the score and reduces the number of possible actions. So we\u2019d suggest writing something like this in your code:<\/span><\/p>\n<p><code>setScore(score +1);<br>\nsetActions(actions -1);<br>\n<\/code><\/p>\n<p><span style=\"font-weight: 400;\">In other words, the state is being updated twice. Previously, React would identify two different state modifications and initiate two renderings. However, React 18 introduces the concept of automatic \u201cbatching,\u201d or the grouping of render tasks. Even though there are two different state updates, the app will only re-render once.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It is worthwhile making the most of it. <\/span><a href=\"https:\/\/refine.dev\/blog\/react-18-upgrade-guide\/#dropped-support-for-internet-explorer\"><span style=\"font-weight: 400;\">\u200b<\/span><\/a><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Concurrent React<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Concurrency is a significant innovation to React 18. According to the React team, Concurrency is not a feature; it\u2019s a new behind-the-scenes technology that allows React to simultaneously prepare many versions of your UI. As a result, React will delegate the duty of determining which modifications are required before re-rendering the React component to the ReactJS developer.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Before React 18, rendering was a single, continuous, synchronous task that could not be interrupted once it began. Concurrency is a significant improvement to React\u2019s rendering technique. React, in conjunction with Concurrency, enables you to interrupt rendering.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Concurrent rendering is a powerful tool in React 18, and it underpins most of the new features such as Suspense, transition, and streaming server. The new root API enables the new concurrent renderer that allows you to opt into concurrent features.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>New Client and Server Rendering APIs<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">In this latest release, the React team redesigned the API exposure for client and server side rendering. With these modifications, you can continue to use the old React 17 API while upgrading to the new React 18 API.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These new APIs are exposed from <\/span><i><span style=\"font-weight: 400;\">react-dom\/client<\/span><\/i><span style=\"font-weight: 400;\">. In the following part on upgrading to React 18, we\u2019ll look at how to integrate them. It is required for the new features in React 18 to function.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To hydrate a server-rendered application, use hydrateRoot. Instead, it should be used of <\/span><i><span style=\"font-weight: 400;\">ReactDOM.hydrate<\/span><\/i><span style=\"font-weight: 400;\"> alongside the new React DOM Server APIs.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To render or unmount a root, use createRoot. Instead of <\/span><i><span style=\"font-weight: 400;\">ReactDOM.render<\/span><\/i><span style=\"font-weight: 400;\">, this should be used.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The following new APIs are exported from react-dom\/server and enable full server-side support for streaming Suspense.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Strict Mode<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The strict mode in React 18 replicates mounting, unmounting, and remounting the components in development mode. For example, when a user taps away from and back to a screen, React should be able to display the initial screen immediately. To accomplish this, React would unmount and remount trees while maintaining the initial component state. This feature enhances the efficiency of React apps, but it requires components to be resistant to the effect of being mounted and unmounted several times.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Transitions<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Transitions is a new feature introduced in React 18 that allows you to differentiate between critical and transition updates. Urgent updates, as the name implies, reflect direct user engagement, such as clicking, pressing, typing, and so on, whereas transition updates transform the UI from one view to another.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">ReactJS Developers can now categorise updates as urgent or low-priority using this new feature.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Transitions are updates that are not urgent. When non-urgent UI updates are marked as \u201ctransition,\u201d React decides which updates to prioritise. Rendering can be optimised, and stale rendering can be eradicated. You can mark updates as non-urgent with <\/span><i><span style=\"font-weight: 400;\">startTransition<\/span><\/i><span style=\"font-weight: 400;\">, which will be interrupted if a more urgent update occurs.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Suspense<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Suspense may now be used on the server with React 18. It allows you to specify the loading status for a section of the component tree that still needs to be ready for display. According to the React team, Suspense makes the \u201cUI loading state\u201d a first-class declarative concept in React, allowing you to create higher-level features. When a server response is delayed, React can stream HTML for the fallback, allowing the user to view the rest of the page. The user can read the HTML content once the data has been completed. As a result, a slow data source on the server will no longer slow down the entire page.<\/span><br>\n    \t\t<div class=\"new_cta_banner  type1 within_content\">\n    \t\t\t<ul>\n        \t\t\t\t\t\t<li><div class=\"cta-h2\"><span class=\"leaf\">Need support with your next ReactJS upgrade? \r\n<\/span><\/div>\n\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t<li><a class=\"btn btn-green small-btn kk_cta_btn\" href=\"https:\/\/www.chilliapple.co.uk\/contact-us\"><span>Let's Connect<\/span><\/a><\/li>\n\t\t\t\n\t\t\t\t\t\t<li><img decoding=\"async\" src=\"https:\/\/www.chilliapple.co.uk\/blog\/app\/uploads\/2022\/09\/CTA2.png\" alt=\"Need support with your next ReactJS upgrade? \r\n\" loading=\"lazy\" width=\"300\" height=\"300\" ><\/li>\n\t\t\t\n\t\t<\/ul>\n\t\t\t\t\t \t\t<\/div> \n    \t <\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_Upgrade_to_React\"><\/span><b>How to Upgrade to React<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You must always install the most recent versions. You can install the latest version of React 18 and React DOM using either npm\/yarn, as seen below:<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">npm install react react-dom\u00a0<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">or, if you\u2019re using yarn, yarn:<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">yarn add react react-dom<\/span><\/i><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Final_Words\"><\/span><b>Final Words<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Upgrading to React 18 is the obvious choice, not because it will revolutionise the code for both web and mobile apps but rather due to its simple implementation process. It\u2019s a great reason for React 18 to be considered.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">React V18 is an easy way to leverage the new features it has on offer. The significant performance enhancements, along with libraries and frameworks, make the upgrade a worthwhile investment for React applications, whether it is computationally intensive or relatively simple. Its advantages will undoubtedly result in improved user experience and enhanced developer productivity.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you are struggling with the upgrade process or want to discuss the latest React upgrade in-depth, get in touch with our experts at a ReactJS development agency. At chilliapple, our talented professionals will ensure that you upgrade seamlessly with minimal hassle. <a href=\"https:\/\/www.chilliapple.co.uk\/\">Contact us today<\/a>.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There have been a ton of changes in ReactJS since its 16th version. Finally, React 18 is available. Many of its upgrades were in response to user feedback, so if you\u2019ve been held back by some of React\u2019s current quirks,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":3435,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[244],"tags":[],"class_list":["post-3381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology-upgrades","technology-reactjs"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>ReactJS V18 Upgrade: What&#039;s New?<\/title>\n<meta name=\"description\" content=\"This article will look through some of the noteworthy new features of the latest version of React. Should you update to react 18 right away?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ReactJS V18 Upgrade: What&#039;s New?\" \/>\n<meta property=\"og:description\" content=\"This article will look through some of the noteworthy new features of the latest version of React. Should you update to react 18 right away?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18\" \/>\n<meta property=\"og:site_name\" content=\"Blog &amp; Updates - Chilliapple Limited\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ChilliAppleuk\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-01T08:29:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-09T06:57:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.chilliapple.co.uk\/blog\/app\/uploads\/2023\/02\/Chilliapple-Blog-Image-ReactJS-V18-Upgrade.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1092\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@chilliapple\" \/>\n<meta name=\"twitter:site\" content=\"@chilliapple\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18\",\"url\":\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18\",\"name\":\"ReactJS V18 Upgrade: What's New?\",\"isPartOf\":{\"@id\":\"https:\/\/www.chilliapple.co.uk\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.chilliapple.co.uk\/blog\/app\/uploads\/2023\/02\/Chilliapple-Blog-Image-ReactJS-V18-Upgrade.jpg\",\"datePublished\":\"2023-02-01T08:29:04+00:00\",\"dateModified\":\"2023-03-09T06:57:02+00:00\",\"author\":{\"@id\":\"https:\/\/www.chilliapple.co.uk\/blog\/#\/schema\/person\/23eabaea981c355b3b2a0aeeccbc0101\"},\"description\":\"This article will look through some of the noteworthy new features of the latest version of React. Should you update to react 18 right away?\",\"breadcrumb\":{\"@id\":\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18#primaryimage\",\"url\":\"https:\/\/www.chilliapple.co.uk\/blog\/app\/uploads\/2023\/02\/Chilliapple-Blog-Image-ReactJS-V18-Upgrade.jpg\",\"contentUrl\":\"https:\/\/www.chilliapple.co.uk\/blog\/app\/uploads\/2023\/02\/Chilliapple-Blog-Image-ReactJS-V18-Upgrade.jpg\",\"width\":1092,\"height\":675,\"caption\":\"react upgrade\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.chilliapple.co.uk\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Technology Upgrades\",\"item\":\"https:\/\/www.chilliapple.co.uk\/blog\/category\/technology-upgrades\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"ReactJS V18 Upgrade: What&#8217;s New?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.chilliapple.co.uk\/blog\/#website\",\"url\":\"https:\/\/www.chilliapple.co.uk\/blog\/\",\"name\":\"Blog &amp; Updates - Chilliapple Limited\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.chilliapple.co.uk\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.chilliapple.co.uk\/blog\/#\/schema\/person\/23eabaea981c355b3b2a0aeeccbc0101\",\"name\":\"Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.chilliapple.co.uk\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8eebe9888911dce602203e8b2ae71d840bed54ddd061c84dc666085cf56de672?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8eebe9888911dce602203e8b2ae71d840bed54ddd061c84dc666085cf56de672?s=96&r=g\",\"caption\":\"Admin\"},\"sameAs\":[\"https:\/\/www.chilliapple.co.uk\/\"],\"url\":\"https:\/\/www.chilliapple.co.uk\/blog\/author\/chilliapple\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ReactJS V18 Upgrade: What's New?","description":"This article will look through some of the noteworthy new features of the latest version of React. Should you update to react 18 right away?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18","og_locale":"en_GB","og_type":"article","og_title":"ReactJS V18 Upgrade: What's New?","og_description":"This article will look through some of the noteworthy new features of the latest version of React. Should you update to react 18 right away?","og_url":"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18","og_site_name":"Blog &amp; Updates - Chilliapple Limited","article_publisher":"https:\/\/www.facebook.com\/ChilliAppleuk","article_published_time":"2023-02-01T08:29:04+00:00","article_modified_time":"2023-03-09T06:57:02+00:00","og_image":[{"width":1092,"height":675,"url":"https:\/\/www.chilliapple.co.uk\/blog\/app\/uploads\/2023\/02\/Chilliapple-Blog-Image-ReactJS-V18-Upgrade.jpg","type":"image\/jpeg"}],"author":"Admin","twitter_card":"summary_large_image","twitter_creator":"@chilliapple","twitter_site":"@chilliapple","twitter_misc":{"Written by":"Admin","Estimated reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18","url":"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18","name":"ReactJS V18 Upgrade: What's New?","isPartOf":{"@id":"https:\/\/www.chilliapple.co.uk\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18#primaryimage"},"image":{"@id":"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18#primaryimage"},"thumbnailUrl":"https:\/\/www.chilliapple.co.uk\/blog\/app\/uploads\/2023\/02\/Chilliapple-Blog-Image-ReactJS-V18-Upgrade.jpg","datePublished":"2023-02-01T08:29:04+00:00","dateModified":"2023-03-09T06:57:02+00:00","author":{"@id":"https:\/\/www.chilliapple.co.uk\/blog\/#\/schema\/person\/23eabaea981c355b3b2a0aeeccbc0101"},"description":"This article will look through some of the noteworthy new features of the latest version of React. Should you update to react 18 right away?","breadcrumb":{"@id":"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18#primaryimage","url":"https:\/\/www.chilliapple.co.uk\/blog\/app\/uploads\/2023\/02\/Chilliapple-Blog-Image-ReactJS-V18-Upgrade.jpg","contentUrl":"https:\/\/www.chilliapple.co.uk\/blog\/app\/uploads\/2023\/02\/Chilliapple-Blog-Image-ReactJS-V18-Upgrade.jpg","width":1092,"height":675,"caption":"react upgrade"},{"@type":"BreadcrumbList","@id":"https:\/\/www.chilliapple.co.uk\/blog\/upgrading-to-react-18#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.chilliapple.co.uk\/blog"},{"@type":"ListItem","position":2,"name":"Technology Upgrades","item":"https:\/\/www.chilliapple.co.uk\/blog\/category\/technology-upgrades"},{"@type":"ListItem","position":3,"name":"ReactJS V18 Upgrade: What&#8217;s New?"}]},{"@type":"WebSite","@id":"https:\/\/www.chilliapple.co.uk\/blog\/#website","url":"https:\/\/www.chilliapple.co.uk\/blog\/","name":"Blog &amp; Updates - Chilliapple Limited","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.chilliapple.co.uk\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.chilliapple.co.uk\/blog\/#\/schema\/person\/23eabaea981c355b3b2a0aeeccbc0101","name":"Admin","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.chilliapple.co.uk\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8eebe9888911dce602203e8b2ae71d840bed54ddd061c84dc666085cf56de672?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8eebe9888911dce602203e8b2ae71d840bed54ddd061c84dc666085cf56de672?s=96&r=g","caption":"Admin"},"sameAs":["https:\/\/www.chilliapple.co.uk\/"],"url":"https:\/\/www.chilliapple.co.uk\/blog\/author\/chilliapple"}]}},"_links":{"self":[{"href":"https:\/\/www.chilliapple.co.uk\/blog\/wp-json\/wp\/v2\/posts\/3381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chilliapple.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chilliapple.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chilliapple.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chilliapple.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=3381"}],"version-history":[{"count":13,"href":"https:\/\/www.chilliapple.co.uk\/blog\/wp-json\/wp\/v2\/posts\/3381\/revisions"}],"predecessor-version":[{"id":3434,"href":"https:\/\/www.chilliapple.co.uk\/blog\/wp-json\/wp\/v2\/posts\/3381\/revisions\/3434"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.chilliapple.co.uk\/blog\/wp-json\/wp\/v2\/media\/3435"}],"wp:attachment":[{"href":"https:\/\/www.chilliapple.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=3381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chilliapple.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=3381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chilliapple.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=3381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}