Try to upgrade to React 18

FreeFeed · Apr 22, 2022 · a040c45 · a040c45
1 parent 6f1689b
commit a040c45
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 23 deletions.
diff --git a/index.jade b/index.jade
@@ -92,9 +92,6 @@ html(lang='en')
                     strong Javascript is disabled!
                     |  Looks like you have JavaScript disabled in your browser. Please enable it to enjoy our service.
 
-    if opts.livereload
-      script( src="/webpack-dev-server.js" )
-
     script.
       if (window.CONFIG.analytics.google) {
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

diff --git a/package.json b/package.json
@@ -25,8 +25,8 @@
     "mousetrap": "~1.6.5",
     "porter-stemmer": "~0.9.1",
     "prop-types": "~15.8.1",
-    "react": "~17.0.2",
-    "react-dom": "~17.0.2",
+    "react": "~18.0.0",
+    "react-dom": "~18.0.0",
     "react-dropzone-component": "~3.2.0",
     "react-final-form-hooks": "~2.0.2",
     "react-google-recaptcha": "~2.1.0",

diff --git a/src/components/color-theme-setter.jsx b/src/components/color-theme-setter.jsx
@@ -7,7 +7,10 @@ import { darkTheme as selectDarkTheme } from './select-utils';
 export function ColorSchemeSetter() {
   const darkTheme = useSelector(selectDarkTheme);
 
-  useEffect(() => document.documentElement.classList.toggle('dark-theme', darkTheme), [darkTheme]);
+  useEffect(
+    () => void document.documentElement.classList.toggle('dark-theme', darkTheme),
+    [darkTheme],
+  );
 
   return (
     <Helmet defer={false}>

diff --git a/src/index.jsx b/src/index.jsx
@@ -1,5 +1,5 @@
 /* global CONFIG */
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Router, Route, IndexRoute, browserHistory, Redirect } from 'react-router';
 import { Provider, useSelector } from 'react-redux';
 import { syncHistoryWithStore } from 'react-router-redux';
@@ -362,11 +362,10 @@ function App() {
   );
 }
 
-ReactDOM.render(
+createRoot(document.querySelector('#app')).render(
   <Provider store={store}>
     <App />
   </Provider>,
-  document.querySelector('#app'),
 );
 
 function checkPath(Component, checker) {

diff --git a/yarn.lock b/yarn.lock
@@ -11163,16 +11163,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:~17.0.2":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:~18.0.0":
+  version: 18.0.0
+  resolution: "react-dom@npm:18.0.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
+    scheduler: ^0.21.0
   peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
+    react: ^18.0.0
+  checksum: dd0ba9f2f31dd728076c892a95b2f5a8dfe79136431b0289afb46eec39d0ca6b6f0f40a60fd8aa6ef702c98ce7c26100d3d4dbc35c7c9e87429cd04f84cb58bd
   languageName: node
   linkType: hard
 
@@ -11520,13 +11519,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:~17.0.2":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:~18.0.0":
+  version: 18.0.0
+  resolution: "react@npm:18.0.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
+  checksum: 293020b96536b3c7113ee57ca5c990a3f25649d1751b1c7a3aabd16dff0691fe9f1eed1206616d0906d05933536052037340a0c8d0941ff870b0eb469a2f975b
   languageName: node
   linkType: hard
 
@@ -11614,8 +11612,8 @@ __metadata:
     pug: ~3.0.2
     pug-loader: ~2.4.0
     querystring: ~0.2.1
-    react: ~17.0.2
-    react-dom: ~17.0.2
+    react: ~18.0.0
+    react-dom: ~18.0.0
     react-dropzone-component: ~3.2.0
     react-final-form-hooks: ~2.0.2
     react-google-recaptcha: ~2.1.0
@@ -12317,6 +12315,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.21.0":
+  version: 0.21.0
+  resolution: "scheduler@npm:0.21.0"
+  dependencies:
+    loose-envify: ^1.1.0
+  checksum: 4f8285076041ed2c81acdd1faa987f1655fdbd30554bc667c1ea64743fc74fb3a04ca7d27454b3d678735df5a230137a3b84756061b43dc5796e80701b66d124
+  languageName: node
+  linkType: hard
+
 "schema-utils@npm:^2.6.5":
   version: 2.7.1
   resolution: "schema-utils@npm:2.7.1"