Add support for React 18 (#2459)

* Add support for React 18

* Usse the new createRoot api to render storybook

* Fix variable

* Use flushSync to prevent showing partially loaded grid

* Only flushSync on the initial render

* Don't need flushSync

* @testing-library/react@alpha

* Update react

* graduation from rc

* temporarily disable some website pages to fix the build, react-dnd has some incorret react imports

* update react-refresh

* @testing-library/react@13

* Update react-refresh-webpack-plugin

* react-dnd@16

* use `react-dom/client`

* fix type issue

* fix a couple test warnings

* name it ref

* fix last test warning

* update linaria

* mention React 18 in the README

Co-authored-by: Aman Mahajan <[email protected]>
Co-authored-by: Aman Mahajan <[email protected]>

Author: 3 people

README.md

@@ -18,7 +18,7 @@
 
 ## Features
 
-- [React 16.14+ & 17.0+](package.json) support
+- [React 16.14+, 17.0+, and 18.0+](package.json) support
 - [Evergreen browsers and server-side rendering](browserslist) support
 - Tree-shaking support and only [one npm dependency](package.json) to keep your bundles slim
 - Great performance thanks to virtualization: columns and rows outside the viewport are not rendered

package.json

@@ -51,17 +51,17 @@
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.16.7",
     "@faker-js/faker": "^6.1.1",
-    "@linaria/babel-preset": "^3.0.0-beta.17",
-    "@linaria/core": "^3.0.0-beta.15",
-    "@linaria/rollup": "^3.0.0-beta.17",
-    "@linaria/shaker": "^3.0.0-beta.17",
-    "@linaria/webpack5-loader": "^3.0.0-beta.17",
+    "@linaria/babel-preset": "^3.0.0-beta.18",
+    "@linaria/core": "^3.0.0-beta.18",
+    "@linaria/rollup": "^3.0.0-beta.18",
+    "@linaria/shaker": "^3.0.0-beta.18",
+    "@linaria/webpack5-loader": "^3.0.0-beta.18",
     "@microsoft/api-extractor": "^7.19.4",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.0",
     "@types/lodash": "^4.14.178",
@@ -91,12 +91,12 @@
     "postcss-loader": "^6.2.1",
     "postcss-nested": "^5.0.6",
     "prettier": "2.6.2",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
     "react-contextmenu": "^2.14.0",
-    "react-dnd": "^15.1.0",
-    "react-dnd-html5-backend": "^15.1.1",
-    "react-dom": "^17.0.2",
-    "react-refresh": "^0.11.0",
+    "react-dnd": "^16.0.0",
+    "react-dnd-html5-backend": "^16.0.0",
+    "react-dom": "^18.0.0",
+    "react-refresh": "^0.12.0",
     "react-router-dom": "^6.2.1",
     "rollup": "^2.63.0",
     "rollup-plugin-postcss": "^4.0.2",
@@ -108,7 +108,7 @@
     "xlsx": "^0.18.0"
   },
   "peerDependencies": {
-    "react": "^16.14 || ^17.0",
-    "react-dom": "^16.14 || ^17.0"
+    "react": "^16.14 || ^17.0 || ^18.0",
+    "react-dom": "^16.14 || ^17.0 || ^18.0"
   }
 }

website/root.tsx

@@ -1,5 +1,5 @@
 import { StrictMode, useState } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { css } from '@linaria/core';
 import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 
@@ -118,9 +118,8 @@ function Root() {
   );
 }
 
-render(
+createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <Root />
-  </StrictMode>,
-  document.getElementById('root')
+  </StrictMode>
 );