{"id":374635,"date":"2023-03-30T04:10:22","date_gmt":"2023-03-30T04:10:22","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=374635"},"modified":"2025-02-20T11:28:03","modified_gmt":"2025-02-20T11:28:03","slug":"whats-new-in-react-18","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/","title":{"rendered":"What\u2019s new in React 18?"},"content":{"rendered":"\n<p>Today we will learn about React 18, finally, we have the stable version of React 18. Now we will cover what changed in the new version.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1052\" height=\"615\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_.png\" alt=\"reactjs_18_\" class=\"wp-image-374636\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_.png 1052w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_-300x175.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_-250x146.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_-768x449.png 768w\" sizes=\"(max-width: 1052px) 100vw, 1052px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">React 18<\/figcaption><\/figure>\n\n\n\n<p>React 18 is more focused on making the UI more performant by introducing out-of-the-box features and improvements powered by \u201cconcurrent rendering\u201d. React18 introduces minimal breaking changes.<\/p>\n\n\n\n<p>With\u00a0<a href=\"https:\/\/webkul.com\/react-native-app-development-services\/\">react native app development<\/a>, we can also create cross-platform mobile applications that deliver a native-like experience, all while sharing a single codebase for both iOS and Android platforms.<\/p>\n\n\n\n<p>Let\u2019s take a look at the major updates of React18:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Root API<\/h2>\n\n\n\n<p>React18 introduces Root API ReactDOM.createRoot. Before React18, we used ReactDOM.render to render a component to the page. <\/p>\n\n\n\n<p>Going forward with React18, we will use ReactDOM.createRoot to create a root, and then pass the root to the render function. <\/p>\n\n\n\n<p>The good news is that your current code with ReactDOM.render will still work, however, it is strongly recommended to start transitioning to createRoot as render will be marked deprecated starting React18. <\/p>\n\n\n\n<p>The current ReactDOM.render is only provided to ease the transition to React18.<\/p>\n\n\n\n<p><strong>React 17:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">import ReactDOM from &#039;react-dom&#039;;\nimport App from &#039;App&#039;;\nconst container = document.getElementById(&#039;app&#039;);\nReactDOM.render(&lt;App \/&gt;, container);<\/pre>\n\n\n\n<p><strong>React 18:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">import ReactDOM from &#039;react-dom&#039;;\nimport App from &#039;App&#039;;\nconst container = document.getElementById(&#039;app&#039;);\n\/\/ create a root\nconst root = ReactDOM.createRoot(container);\n\/\/render app to root\nroot.render(&lt;App \/&gt;);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Automatic batching<\/h2>\n\n\n\n<p>React 18 introduces a new feature that will automatically batch multiple state updates, reducing the number of times a component has to re-render.<\/p>\n\n\n\n<p>Batching is when React groups multiple state updates into a single re-render for better performance. This is great for performance because it avoids unnecessary re-renders.<br>Without automatic batching, we only batched updates inside React event handlers. <\/p>\n\n\n\n<p>Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default. With automatic batching, these updates will be batched automatically:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/ Before: only React events were batched.\nsetTimeout(() =&gt; {\n  setCount(c =&gt; c + 1);\n  setFlag(f =&gt; !f);\n  \/\/ React will render twice, once for each state update (no batching)\n}, 1000);<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/ After: updates inside of timeouts, promises,\n\/\/ native event handlers or any other event are batched.\nsetTimeout(() =&gt; {\n  setCount(c =&gt; c + 1);\n  setFlag(f =&gt; !f);\n  \/\/ React will only re-render once at the end (that&#039;s batching!)\n}, 1000);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Concurrent rendering<\/h2>\n\n\n\n<p>If the entire React 18 update has to be summed up in one word, it would be Concurrency.<\/p>\n\n\n\n<p>Concurrent rendering will allow React to break up large updates into smaller chunks, making it possible for the browser to process updates more efficiently.<\/p>\n\n\n\n<p>At a high level, concurrency basically means that tasks can overlap. Rather than one state update having to be fully complete before the system can move on to the next one, concurrency allows us to bounce back and forth between multiples.<\/p>\n\n\n\n<p><strong>Note:<\/strong> This doesn\u2019t mean those things are all happening at the same time \u2014 rather, it\u2019s that one task can now be paused while other, more urgent tasks are completed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Suspense Features<\/h2>\n\n\n\n<p>Like its name, Suspense suspends something until it\u2019s ready to be rendered.<\/p>\n\n\n\n<p>Suspense lets you declaratively specify the loading state for a part of the component tree if it\u2019s not yet ready to be displayed:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;Suspense fallback={&lt;Loading \/&gt;}&gt;\n    &lt;ComponentWaitingForData \/&gt;\n    &lt;ReadyComponent \/&gt;\n&lt;\/Suspense&gt;<\/pre>\n\n\n\n<p>Referring to the above code, Now it won\u2019t mount the ReadyComponent, instead will wait for ComponentWaitingForData to resolve first.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">New Hooks<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>useId<\/strong><\/h3>\n\n\n\n<p>useId is a new hook for generating unique IDs on both the client and server while avoiding hydration mismatches. <\/p>\n\n\n\n<p>It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. <\/p>\n\n\n\n<p>This solves an issue that already exists in React 17 and below, but it\u2019s even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order.<\/p>\n\n\n\n<p><strong>Note<\/strong>: useId is not for generating keys in a list. Keys should be generated from your data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>useTransition<\/strong><\/h2>\n\n\n\n<p>useTransition and startTransition let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>useDeferredValue<\/strong><\/h3>\n\n\n\n<p>useDeferredValue lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing but has a few advantages compared to it. <\/p>\n\n\n\n<p>There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn\u2019t block user input.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>useSyncExternalStore<\/strong><\/h3>\n\n\n\n<p>useSyncExternalStore is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. <\/p>\n\n\n\n<p>It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React.<\/p>\n\n\n\n<p><strong>Note:<\/strong> useSyncExternalStore is intended to be used by libraries, not application code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>useInsertionEffect<\/strong><\/h3>\n\n\n\n<p>useInsertionEffect is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in the render. Unless you\u2019ve already built a CSS-in-JS library we don\u2019t expect you to ever use this. <\/p>\n\n\n\n<p>This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below but is even more important in React18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate the layout.<\/p>\n\n\n\n<p><strong>Note:<\/strong> useInsertionEffect is intended to be used by libraries, not application code.<br>For detailed information, check <a href=\"https:\/\/react.dev\/blog\/2022\/03\/29\/react-v18\">React Documentation<\/a><\/p>\n\n\n\n<p>To know more about React, check our <a href=\"https:\/\/webkul.com\/blog\/tag\/react-js\/\">React Articles<\/a><\/p>\n\n\n\n<p>Now you are\u00a0<strong>React18<\/strong>\u00a0ready too! Also, you can contact us for <a href=\"https:\/\/webkul.com\/hire-react-native-app-developers\/\">Hire React Native App Developers<\/a> to build fast, reliable cross-platform apps. <\/p>\n\n\n\n<p>Happy Coding \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today we will learn about React 18, finally, we have the stable version of React 18. Now we will cover what changed in the new version. React 18 is more focused on making the UI more performant by introducing out-of-the-box features and improvements powered by \u201cconcurrent rendering\u201d. React18 introduces minimal breaking changes. With\u00a0react native app <a href=\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":377,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6357],"tags":[2064,7895,6359,13887],"class_list":["post-374635","post","type-post","status-publish","format-standard","hentry","category-react-js","tag-javascript","tag-react","tag-react-js","tag-react18"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What\u2019s new in React 18?<\/title>\n<meta name=\"description\" content=\"Today we will learn about React 18, finally, we have the stable version of React 18. Now we will cover what changed in the new version.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What\u2019s new in React 18?\" \/>\n<meta property=\"og:description\" content=\"Today we will learn about React 18, finally, we have the stable version of React 18. Now we will cover what changed in the new version.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-30T04:10:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-20T11:28:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_.png\" \/>\n<meta name=\"author\" content=\"Rahul Chaudhary\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rahul Chaudhary\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/\"},\"author\":{\"name\":\"Rahul Chaudhary\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75\"},\"headline\":\"What\u2019s new in React 18?\",\"datePublished\":\"2023-03-30T04:10:22+00:00\",\"dateModified\":\"2025-02-20T11:28:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/\"},\"wordCount\":838,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_.png\",\"keywords\":[\"JavaScript\",\"react\",\"react js\",\"react18\"],\"articleSection\":[\"react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/\",\"url\":\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/\",\"name\":\"What\u2019s new in React 18?\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_.png\",\"datePublished\":\"2023-03-30T04:10:22+00:00\",\"dateModified\":\"2025-02-20T11:28:03+00:00\",\"description\":\"Today we will learn about React 18, finally, we have the stable version of React 18. Now we will cover what changed in the new version.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_.png\",\"width\":1052,\"height\":615,\"caption\":\"reactjs_18_\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What\u2019s new in React 18?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75\",\"name\":\"Rahul Chaudhary\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Rahul Chaudhary\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/rahulchaudhary766\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What\u2019s new in React 18?","description":"Today we will learn about React 18, finally, we have the stable version of React 18. Now we will cover what changed in the new version.","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:\/\/webkul.com\/blog\/whats-new-in-react-18\/","og_locale":"en_US","og_type":"article","og_title":"What\u2019s new in React 18?","og_description":"Today we will learn about React 18, finally, we have the stable version of React 18. Now we will cover what changed in the new version.","og_url":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-03-30T04:10:22+00:00","article_modified_time":"2025-02-20T11:28:03+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_.png","type":"","width":"","height":""}],"author":"Rahul Chaudhary","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Rahul Chaudhary","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/"},"author":{"name":"Rahul Chaudhary","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75"},"headline":"What\u2019s new in React 18?","datePublished":"2023-03-30T04:10:22+00:00","dateModified":"2025-02-20T11:28:03+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/"},"wordCount":838,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_.png","keywords":["JavaScript","react","react js","react18"],"articleSection":["react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/","url":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/","name":"What\u2019s new in React 18?","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_.png","datePublished":"2023-03-30T04:10:22+00:00","dateModified":"2025-02-20T11:28:03+00:00","description":"Today we will learn about React 18, finally, we have the stable version of React 18. Now we will cover what changed in the new version.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/whats-new-in-react-18\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/reactjs_18_.png","width":1052,"height":615,"caption":"reactjs_18_"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/whats-new-in-react-18\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What\u2019s new in React 18?"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75","name":"Rahul Chaudhary","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Rahul Chaudhary"},"url":"https:\/\/webkul.com\/blog\/author\/rahulchaudhary766\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/374635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/377"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=374635"}],"version-history":[{"count":5,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/374635\/revisions"}],"predecessor-version":[{"id":483686,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/374635\/revisions\/483686"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=374635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=374635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=374635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}