{"id":3780,"date":"2022-01-06T10:06:46","date_gmt":"2022-01-06T18:06:46","guid":{"rendered":"https:\/\/coderpad.io\/?p=3780"},"modified":"2023-06-05T14:37:32","modified_gmt":"2023-06-05T21:37:32","slug":"how-to-upgrade-to-react-18","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/how-to-upgrade-to-react-18\/","title":{"rendered":"How to Upgrade to React 18"},"content":{"rendered":"\n<p>React 18 is the latest in a long line of major releases of React. With it you gain access to: <a href=\"https:\/\/reactjs.org\/docs\/concurrent-mode-suspense.html\" target=\"_blank\" rel=\"noopener\">new features for Suspense<\/a>, new <a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/111\" target=\"_blank\" rel=\"noopener\">useId<\/a>, <a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/86\" target=\"_blank\" rel=\"noopener\">useSyncExternalStore<\/a>, and <a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/100\" target=\"_blank\" rel=\"noopener\">useDeferredValue<\/a> hooks, as well as the new <a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/100\" target=\"_blank\" rel=\"noopener\">startTransition<\/a> API.<\/p>\n\n\n\n<p>While React 18 is not yet a stable release, testing out your application can be useful.&nbsp;<\/p>\n\n\n\n<p>Like with previous major releases of React, React 18 is a fairly easy migration for most apps.<\/p>\n\n\n\n<p>While <a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/19\" target=\"_blank\" rel=\"noopener\">Strict Mode has received some changes<\/a> that may impact your app, and <a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/21\" target=\"_blank\" rel=\"noopener\">automatic batching<\/a> may introduce some new edge cases, they only impact apps that don\u2019t <a href=\"https:\/\/reactjs.org\/docs\/hooks-rules.html\" target=\"_blank\" rel=\"noopener\">follow the Rules of React properly<\/a>.<\/p>\n\n\n\n<p>Outside of those considerations, let\u2019s upgrade!<\/p>\n\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-blue      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Learn how to run front-end developer interviews that don&#8217;t suck<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\" class=\"button  js-cta--read-our-guide\" data-ga-category=\"CTA\" data-ga-label=\"Learn how to run front-end developer interviews that don&#039;t suck|Read our guide\">Read our guide<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"342\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png 432w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat-300x238.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">Installation<\/h2>\n\n\n\n<p>First, start by installing React 18:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">i<\/span> <span class=\"hljs-selector-tag\">react<\/span><span class=\"hljs-keyword\">@18<\/span>.0.0-rc.0 react-dom@<span class=\"hljs-number\">18.0<\/span>.<span class=\"hljs-number\">0<\/span>-rc.<span class=\"hljs-number\">0<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Or, if you use <code>yarn<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">yarn<\/span> <span class=\"hljs-selector-tag\">add<\/span> <span class=\"hljs-selector-tag\">react<\/span><span class=\"hljs-keyword\">@18<\/span>.0.0-rc.0 react-dom@<span class=\"hljs-number\">18.0<\/span>.<span class=\"hljs-number\">0<\/span>-rc.<span class=\"hljs-number\">0<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If you\u2019re using Create React App, you may also want to <a href=\"https:\/\/github.com\/facebook\/create-react-app\/releases\/tag\/v5.0.0\" target=\"_blank\" rel=\"noopener\">upgrade to the newest v5<\/a> as well using:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">i<\/span> <span class=\"hljs-selector-tag\">react-scripts<\/span><span class=\"hljs-keyword\">@5<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Or<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">yarn<\/span> <span class=\"hljs-selector-tag\">add<\/span> <span class=\"hljs-selector-tag\">react-scripts<\/span><span class=\"hljs-keyword\">@5<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then, make sure to upgrade any dependencies that might rely on React.<\/p>\n\n\n\n<p>For example, upgrade <a href=\"https:\/\/github.com\/reduxjs\/react-redux\/releases\/tag\/v8.0.0-beta.2\" target=\"_blank\" rel=\"noopener\">React Redux to v8<\/a> or <a href=\"https:\/\/github.com\/vercel\/swr\/releases\/tag\/1.1.0\" target=\"_blank\" rel=\"noopener\">SWR to 1.1.0<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Update <code>render<\/code> method<\/h2>\n\n\n\n<p>After you install React 18, you may receive an error when your app is running:<br><\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Warning: 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&#8217;s running React 17. Learn more:<a href=\"https:\/\/reactjs.org\/link\/switch-to-createroot\" target=\"_blank\" rel=\"noopener\"><a href=\"https:\/\/reactjs.org\/link\/switch-to-createroot\" target=\"_blank\" rel=\"noopener\">https:\/\/reactjs.org\/link\/switch-to-createroot<\/a><\/a><\/p><\/blockquote>\n\n\n\n<p>This is because previously, in React 17 and before, you\u2019d have a file &#8211; usually called <code>index.js<\/code> or <code>index.ts<\/code> &#8211; that included the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> rootElement = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"root\"<\/span>);\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">App<\/span> \/&gt;<\/span><\/span>, rootElement);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>While this code will continue to function for this release, it will not allow you to leverage most of the new features of React 18. Further, it\u2019ll be removed in a future release of React.<br><br>To fix this issue, replace this code with the following:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> rootElement = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"root\"<\/span>);\nReactDOM.createRoot(rootElement).render(\n\u00a0 <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">App<\/span> \/&gt;<\/span><\/span>\n);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>When finished, you should be able to verify the version of React you\u2019re using with <code>{React.version}<\/code><\/p>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed \"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=231350&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>As promised, the update to React 18 is fairly straightforward! Most applications should be able to upgrade without too many problems.&nbsp;<\/p>\n\n\n\n<p>If you run into issues during your migration and you\u2019re using <code>StrictMode<\/code>, try temporarily removing it to see if you run into any issues.<a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/19\" target=\"_blank\" rel=\"noopener\">React 18 introduced some changes that may impact some apps.<\/a><\/p>\n\n\n\n<p>We hope you enjoy the new <a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/4\" target=\"_blank\" rel=\"noopener\">React concurrent features<\/a> and happy hacking!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While React 18 is not yet a stable release, testing out your application can be useful. <\/p>\n","protected":false},"author":1,"featured_media":3783,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[29],"blog-programming-language":[61],"keyword-cluster":[],"class_list":["post-3780","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/3780","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=3780"}],"version-history":[{"count":17,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/3780\/revisions"}],"predecessor-version":[{"id":32704,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/3780\/revisions\/32704"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/3783"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=3780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=3780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=3780"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=3780"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=3780"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=3780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}