{"id":477594,"date":"2022-07-25T09:02:44","date_gmt":"2022-07-25T06:02:44","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-upgrade-to-react-18\/"},"modified":"2022-07-25T09:02:44","modified_gmt":"2022-07-25T06:02:44","slug":"how-to-upgrade-to-react-18","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-upgrade-to-react-18\/","title":{"rendered":"#How to Upgrade to React 18"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2e441fa0797\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" 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: #dd3333;color:#dd3333\" 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><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2e441fa0797\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-upgrade-to-react-18\/#%E2%80%9CHow_to_Upgrade_to_React_18%E2%80%9D\" >&#8220;How to Upgrade to React 18&#8221;<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-upgrade-to-react-18\/#Installing_React_18\" >Installing React 18<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-upgrade-to-react-18\/#Enabling_React_18_Features_The_New_Root_API\" >Enabling React 18 Features: The New Root API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-upgrade-to-react-18\/#Replacing_Render_Callbacks\" >Replacing Render Callbacks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-upgrade-to-react-18\/#Debugging_Upgrade_Problems\" >Debugging Upgrade Problems<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-upgrade-to-react-18\/#Check_for\" >Check for &lt;StrictMode&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-upgrade-to-react-18\/#Support_State_Update_Batching\" >Support State Update Batching<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-upgrade-to-react-18\/#Stop_Using_Removed_and_Unsupported_Features\" >Stop Using Removed and Unsupported Features<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-upgrade-to-react-18\/#Server_Side_Rendering\" >Server Side Rendering<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-upgrade-to-react-18\/#Start_Using_React_18_Features\" >Start Using React 18 Features<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-upgrade-to-react-18\/#Summary\" >Summary<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"%E2%80%9CHow_to_Upgrade_to_React_18%E2%80%9D\"><\/span>&#8220;How to Upgrade to React 18&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<div>\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage aligncenter size-full wp-image-8770\" data-pagespeed-no-defer=\"\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2021\/01\/24b43beb.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"React logo on a dark background\" width=\"1602\" height=\"902\"\/><\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html\">React 18<\/a>\u00a0evolves the popular Java<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a> component framework with new features built around concurrent rendering and suspense. It promises better performance, more capabilities, and an improved developer experience for apps that make the switch.<\/p>\n<p>In this article, we\u2019ll show you how to upgrade your existing codebases to React 18. Bear in mind that this guide is only an overview of the most broadly applicable changes. Migration should be fairly painless for small projects already following React best practices; large sets of complex components may throw up some issues, which we\u2019ll detail below.<\/p>\n<h2 id=\"installing-react-18\"><span class=\"ez-toc-section\" id=\"Installing_React_18\"><\/span>Installing React 18<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before doing anything else, use npm to upgrade your project\u2019s React dependency to v18:<\/p>\n<pre>$ npm install react@latest react-dom@latest<\/pre>\n<p>The new release doesn\u2019t technically have any backwards incompatibilities. The new features are activated on an opt-in basis. As you\u2019ve not changed any code yet, you should be able to start your app and observe it rendering correctly. Your project will run with its existing React 17 behavior.<\/p>\n<pre>$ npm start<\/pre>\n<h2 id=\"enabling-react-18-features-the-new-root-api\"><span class=\"ez-toc-section\" id=\"Enabling_React_18_Features_The_New_Root_API\"><\/span>Enabling React 18 Features: The New Root API<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Using React 18 without any codebase changes will cause one side effect: you\u2019ll see a browser console warning each time your app mounts in development mode.<\/p>\n<pre>ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.<\/pre>\n<p>This deprecation message can be safely ignored if you\u2019re not ready to upgrade your project. When you want to adopt React 18 capabilities, you need to make the change it describes. The old <code>ReactDOM.render()<\/code> function has been replaced with a new root API that\u2019s more object-oriented. Besides improved ease-of-use, it also activates the concurrent rendering system that powers all the new headline features.<\/p>\n<p>Within your <code>index.js<\/code> or <code>app.js<\/code> file, look for the lines that are similar to these:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> App from <span class=\"st0\">\".\/App.js\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> ReactDOM from <span class=\"st0\">\"react-dom\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> container <span class=\"sy0\">=<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"react\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nReactDOM.<span class=\"me1\">render<\/span><span class=\"br0\">(<\/span><span class=\"sy0\">&lt;<\/span>App <span class=\"sy0\">\/&gt;,<\/span> container<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This is a typical entrypoint for a React application. It renders an instance of the imported <code>App<\/code> component as your app\u2019s root element. The rendered content is deposited as the <code>innerHTML<\/code> of the HTML element with <code>id=\"react\"<\/code>.<\/p>\n<p>To switch to the React 18 root API, replace the code above with the following:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> App from <span class=\"st0\">\".\/App.js\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>createRoot<span class=\"br0\">}<\/span> from <span class=\"st0\">\"react-dom\/client\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> container <span class=\"sy0\">=<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"react\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">const<\/span> root <span class=\"sy0\">=<\/span> createRoot<span class=\"br0\">(<\/span>container<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nroot.<span class=\"me1\">render<\/span><span class=\"br0\">(<\/span><span class=\"sy0\">&lt;<\/span>App <span class=\"sy0\">\/&gt;<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This has an equivalent effect to the old <code>ReactDOM.render()<\/code> API. Instead of initializing a root element and rendering your app as a single imperative operation, React 18 makes you create a root object first and then explicitly render your content.<\/p>\n<p>Next look for any places in your code where you unmount your root node. Change <code>ReactDOM.unmountComponentAtNode()<\/code> to the new <code>unmount()<\/code> method on your root object:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"co1\">\/\/ Before<\/span>\n<span class=\"kw5\">import<\/span> App from <span class=\"st0\">\".\/App.js\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> ReactDOM from <span class=\"st0\">\"react-dom\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> container <span class=\"sy0\">=<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"react\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nReactDOM.<span class=\"me1\">render<\/span><span class=\"br0\">(<\/span><span class=\"sy0\">&lt;<\/span>App <span class=\"sy0\">\/&gt;,<\/span> container<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nReactDOM.<span class=\"me1\">unmountComponentAtNode<\/span><span class=\"br0\">(<\/span>container<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ After<\/span>\n<span class=\"kw5\">import<\/span> App from <span class=\"st0\">\".\/App.js\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>createRoot<span class=\"br0\">}<\/span> from <span class=\"st0\">\"react-dom\/client\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> container <span class=\"sy0\">=<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"react\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">const<\/span> root <span class=\"sy0\">=<\/span> createRoot<span class=\"br0\">(<\/span>container<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nroot.<span class=\"me1\">render<\/span><span class=\"br0\">(<\/span><span class=\"sy0\">&lt;<\/span>App <span class=\"sy0\">\/&gt;<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nroot.<span class=\"me1\">unmount<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"replacing-render-callbacks\"><span class=\"ez-toc-section\" id=\"Replacing_Render_Callbacks\"><\/span>Replacing Render Callbacks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <code>ReactDOM.render()<\/code> method\u2019s optional callback argument has no direct counterpart in the React 18 root API. You could previously use this code to log <code>Rendered!<\/code> to the console after React has finished rendering the root node:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> App from <span class=\"st0\">\".\/App.js\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> ReactDOM from <span class=\"st0\">\"react-dom\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> container <span class=\"sy0\">=<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"react\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nReactDOM.<span class=\"me1\">render<\/span><span class=\"br0\">(<\/span><span class=\"sy0\">&lt;<\/span>App <span class=\"sy0\">\/&gt;,<\/span> container<span class=\"sy0\">,<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"Rendered!\"<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This functionality <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/5\">was removed because<\/a> the timing of the callback invocation is unpredictable when using React 18\u2019s new partial hydration and streaming server rendering features. If you\u2019re already using render callbacks and need to maintain compatibility, you can achieve similar behavior using the refs mechanism:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>createRoot<span class=\"br0\">}<\/span> from <span class=\"st0\">\"react-dom\/client\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> App <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>callback<span class=\"br0\">}<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span>\n    <span class=\"sy0\">&lt;<\/span>div ref<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>callback<span class=\"br0\">}<\/span><span class=\"sy0\">&gt;<\/span>\n        <span class=\"sy0\">&lt;<\/span>h1<span class=\"sy0\">&gt;<\/span>Demo App<span class=\"sy0\">&lt;\/<\/span>h1<span class=\"sy0\">&gt;<\/span>\n    <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> container <span class=\"sy0\">=<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"react\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">const<\/span> root <span class=\"sy0\">=<\/span> createRoot<span class=\"br0\">(<\/span>container<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nroot.<span class=\"me1\">render<\/span><span class=\"br0\">(<\/span><span class=\"sy0\">&lt;<\/span>App callback<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"Rendered!\"<\/span><span class=\"br0\">)<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>React calls function refs when components mount. Setting a ref on the component that\u2019s your root node lets you detect when rendering occurs, providing a similar effect to the old render callback system.<\/p>\n<h2 id=\"debugging-upgrade-problems\"><span class=\"ez-toc-section\" id=\"Debugging_Upgrade_Problems\"><\/span>Debugging Upgrade Problems<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Your app should now be rendering using React 18 features and without any console warnings. Test your app thoroughly to make sure everything still works as you expect. If you find problems, you might be able to resolve them with these common resolutions.<\/p>\n<h3 id=\"check-for\"><span class=\"ez-toc-section\" id=\"Check_for\"><\/span>Check for &lt;StrictMode&gt;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Apps wrapped in the <code>&lt;StrictMode&gt;<\/code> component may behave differently when rendering in React 18\u2019s development mode. This is because Strict Mode now tests whether your codebase supports <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/19\">reusable state<\/a>, a concept that will be <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/blog\/2022\/03\/08\/react-18-upgrade-guide.html#updates-to-strict-mode\">fully introduced<\/a> to React in a future release.<\/p>\n<p>Reusable state allows React to remount a previously removed component with its last state automatically restored. This requires your components be resilient to double invocation of effects. Strict Mode now helps you prepare for reusable state by simulating mounting, unmounting, and remounting your components each time they\u2019re used, surfacing any problems where the previous state can\u2019t be restored. You can disable Strict Mode if it finds issues in your app or its dependencies that you\u2019re not ready to address.<\/p>\n<h3 id=\"support-state-update-batching\"><span class=\"ez-toc-section\" id=\"Support_State_Update_Batching\"><\/span>Support State Update Batching<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>React 18 changes how state updates are \u201cbatched\u201d to improve performance. When you change state values multiple times in a function, React tries to combine them into a single re-render:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> Component <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>query<span class=\"sy0\">,<\/span> setQuery<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>queryCount<span class=\"sy0\">,<\/span> setQueryCount<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"nu0\">0<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"coMULTI\">\/**\n     * Two state updates, only one re-render\n     *\/<\/span>\n    setQuery<span class=\"br0\">(<\/span><span class=\"st0\">\"demo\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    setQueryCount<span class=\"br0\">(<\/span>queryCount <span class=\"sy0\">+<\/span> <span class=\"nu0\">1<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This mechanism increases efficiency but previously only worked inside React event handlers. With React 18, it works with all state updates, even if they originate from native event handlers, timeouts, or Promises. Some code might behave differently to before if you make consecutive state updates in any of these places.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> Component <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>query<span class=\"sy0\">,<\/span> setQuery<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>queryId<span class=\"sy0\">,<\/span> setQueryId<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>queryCount<span class=\"sy0\">,<\/span> setQueryCount<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"nu0\">0<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"kw1\">const<\/span> handleSearch <span class=\"sy0\">=<\/span> query <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n       fetch<span class=\"br0\">(<\/span>query<span class=\"br0\">)<\/span>.<span class=\"me1\">then<\/span><span class=\"br0\">(<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n            setQuery<span class=\"br0\">(<\/span><span class=\"st0\">\"demo\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n            setQueryCount<span class=\"br0\">(<\/span><span class=\"nu0\">1<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n            <span class=\"co1\">\/\/ In React 17, sets to \"query-1\"<\/span>\n            <span class=\"co1\">\/\/ In React 18, sets to \"query-0\" - previous state update is batched with this one<\/span>\n            setQueryId<span class=\"br0\">(<\/span>`query<span class=\"sy0\">-<\/span>$<span class=\"br0\">{<\/span>queryCount<span class=\"br0\">}<\/span>`<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n        <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>You can disable this behavior in situations where you\u2019re not ready to refactor your code. Wrap state updates in <code>flushSync()<\/code> to force them to commit im<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a>tely:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> Component <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>query<span class=\"sy0\">,<\/span> setQuery<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>queryId<span class=\"sy0\">,<\/span> setQueryId<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>queryCount<span class=\"sy0\">,<\/span> setQueryCount<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"nu0\">0<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"kw1\">const<\/span> handleSearch <span class=\"sy0\">=<\/span> query <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n       fetch<span class=\"br0\">(<\/span>query<span class=\"br0\">)<\/span>.<span class=\"me1\">then<\/span><span class=\"br0\">(<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n            flushSync<span class=\"br0\">(<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n                setQuery<span class=\"br0\">(<\/span><span class=\"st0\">\"demo\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n                setQueryCount<span class=\"br0\">(<\/span><span class=\"nu0\">1<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n            <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n            <span class=\"co1\">\/\/ Sets to \"query-1\"<\/span>\n            setQueryId<span class=\"br0\">(<\/span>`query<span class=\"sy0\">-<\/span>$<span class=\"br0\">{<\/span>queryCount<span class=\"br0\">}<\/span>`<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n        <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 id=\"stop-using-removed-and-unsupported-features\"><span class=\"ez-toc-section\" id=\"Stop_Using_Removed_and_Unsupported_Features\"><\/span>Stop Using Removed and Unsupported Features<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once all the above aspects have been addressed, your app should be fully compatible with React 18. Although there are a few more <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html#changelog\">API surface changes<\/a>, these shouldn\u2019t impact the majority of apps. Here are some to be aware of:<\/p>\n<ul>\n<li><strong><code>unstable_changedBits<\/code> has been removed<\/strong> \u2013 This unsupported API allowed opting out of context updates. It is no longer available.<\/li>\n<li><strong>The <code>Object.assign()<\/code> polyfill has been removed<\/strong> \u2013 You should manually add the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/object-assign\"><code>object-assign<\/code> polyfill package<\/a> if you need to support very old browsers without a built-in <code>Object.assign()<\/code>.<\/li>\n<li><strong>Internet Explorer is no longer supported<\/strong> \u2013 React has officially dropped compatibility with Internet Explorer ahead of the browser\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/blogs.windows.com\/windowsexperience\/2021\/05\/19\/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge\">end of support<\/a> in June. You should not upgrade to React 18 if you still require your app to run in IE.<\/li>\n<li><strong>Using Suspense with an <code>undefined<\/code> fallback is now equivalent to <code>null<\/code><\/strong> \u2013 Suspense boundaries with <code>fallback={undefined}<\/code> were previously skipped, allowing code to cascade to the next parent boundary in the tree. React 18 now respects Suspense components without a fallback.<\/li>\n<\/ul>\n<h2 id=\"server-side-rendering\"><span class=\"ez-toc-section\" id=\"Server_Side_Rendering\"><\/span>Server Side Rendering<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Apps that use server side rendering will require a few more changes to work with React 18.<\/p>\n<p>Inline with the new root API, you must replace the old <code>hydrate()<\/code> function in your client-side code with the new <code>hydrateRoot()<\/code> provided by the <code>react-dom\/client<\/code> package:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"co1\">\/\/ Before<\/span>\n<span class=\"kw5\">import<\/span> App from <span class=\"st0\">\".\/App.js\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> ReactDOM from <span class=\"st0\">\"react-dom\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> container <span class=\"sy0\">=<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"react\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nReactDOM.<span class=\"me1\">hydrate<\/span><span class=\"br0\">(<\/span><span class=\"sy0\">&lt;<\/span>App <span class=\"sy0\">\/&gt;,<\/span> container<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ After<\/span>\n<span class=\"kw5\">import<\/span> App from <span class=\"st0\">\".\/App.js\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>createRoot<span class=\"br0\">}<\/span> from <span class=\"st0\">\"react-dom\/client\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> container <span class=\"sy0\">=<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"react\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">const<\/span> root <span class=\"sy0\">=<\/span> hydrateRoot<span class=\"br0\">(<\/span>container<span class=\"sy0\">,<\/span> <span class=\"sy0\">&lt;<\/span>App <span class=\"sy0\">\/&gt;<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>In your server side code, replace deprecated <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/blog\/2022\/03\/08\/react-18-upgrade-guide.html#updates-to-server-rendering-apis\">rendering API<\/a> calls with their new counterparts. In most cases, you should change <code>renderToNodeStream()<\/code> to the new <code>renderToReadableStream()<\/code>. The new stream APIs unlock access to React 18\u2019s streaming server rendering capabilities, where the server can keep delivering new HTML to the browser after your app\u2019s initial render.<\/p>\n<h2 id=\"start-using-react-18-features\"><span class=\"ez-toc-section\" id=\"Start_Using_React_18_Features\"><\/span>Start Using React 18 Features<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now that you\u2019ve upgraded you can start making your app more powerful by incorporating React 18 features. React\u2019s use of concurrency means component renders can be interrupted, unlocking new capabilities and more responsive UIs.<\/p>\n<p>Some of the added features include major updates to Suspense, a way to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html#new-feature-transitions\">designate the priority of state updates with Transitions<\/a>, and a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html#usedeferredvalue\">built-in mechanism<\/a> for throttling re-renders caused by non-urgent but high-frequency updates. There are several miscellaneous changes and improvements too: you can return <code>undefined<\/code> from a component\u2019s <code>render()<\/code> method, the warning about calling <code>setState()<\/code> on unmounted components <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/facebook\/react\/pull\/22114\">has been removed<\/a>, and several new HTML attributes such as <code>imageSizes<\/code>, <code>imageSrcSet<\/code>, and <code>aria-description<\/code> are recognized by React DOM\u2019s renderer.<\/p>\n<h2 id=\"summary\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React 18 is stable and ready to use. In most cases the upgrade process should be quick and easy, requiring only an npm update and a switch to the new root API. You should still test all your components though: they may behave differently in some situations, such as in Strict Mode or when automatic batching applies.<\/p>\n<p>This new release points to the future direction of React as a high-performance framework for all kinds of web applications. It also extends React\u2019s server-side rendering capabilities, adding Suspense on the server and the ability to keep <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/37\">streaming content<\/a> to your users after the initial render. This gives developers more flexibility to distribute rendering across both the client and server.<\/p>\n<\/div>\n<p><script>\n setTimeout(function(){\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s) } (window, document,'script',\n  'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\n   fbq('init', '335401813750447');\n   fbq('track', 'PageView');\n  },3000);\n<\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.howtogeek.com\/devops\/how-to-upgrade-to-react-18\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;How to Upgrade to React 18&#8221; React 18\u00a0evolves the popular JavaScript component framework with new features built around concurrent rendering and suspense. It promises better performance, more capabilities, and an improved developer experience for apps that make the switch. In this article, we\u2019ll show you how to upgrade your existing codebases to React 18. Bear&#8230;<\/p>\n","protected":false},"author":1,"featured_media":477595,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2021\/01\/24b43beb.jpg?height=200p&trim=2,2,2,2","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-477594","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/477594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=477594"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/477594\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/477595"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=477594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=477594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=477594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}