fix: react 18 rendering lag (#608)

TanStack · Oct 19, 2023 · c921b37 · c921b37
1 parent acaff41
commit c921b37
Show file tree

Hide file tree

Showing 12 changed files with 1,431 additions and 1,211 deletions.
diff --git a/examples/react/dynamic/index.html b/examples/react/dynamic/index.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/examples/react/dynamic/package.json b/examples/react/dynamic/package.json
@@ -1,12 +1,10 @@
 {
-  "name": "tanstack-react-virtual-example-dynamic",
-  "version": "0.0.0",
+  "name": "dynamic",
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "serve": "vite preview --port 3001",
-    "start": "vite"
+    "build": "tsc && vite build",
+    "serve": "vite preview"
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
@@ -15,9 +13,12 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
-    "@vitejs/plugin-react": "^2.2.0",
-    "vite": "^3.2.3"
+    "@rollup/plugin-replace": "^5.0.2",
+    "@types/node": "18.x",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.0.1",
+    "typescript": "^4.9.5",
+    "vite": "^4.0.4"
   }
 }
diff --git a/examples/react/fixed/index.html b/examples/react/fixed/index.html
@@ -3,8 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/examples/react/fixed/package.json b/examples/react/fixed/package.json
@@ -1,21 +1,23 @@
 {
-  "name": "tanstack-react-virtual-example-fixed",
-  "version": "0.0.0",
+  "name": "fixed",
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "serve": "vite preview --port 3001",
-    "start": "vite"
+    "build": "tsc && vite build",
+    "serve": "vite preview"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "@tanstack/react-virtual": "3.0.0-beta.65"
+    "@tanstack/react-virtual": "3.0.0-beta.65",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "^4.0.0",
-    "@vitejs/plugin-react": "^1.2.0",
-    "vite": "^2.8.6"
+    "@rollup/plugin-replace": "^5.0.2",
+    "@types/node": "18.x",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.0.1",
+    "typescript": "^4.9.5",
+    "vite": "^4.0.4"
   }
 }
diff --git a/examples/react/fixed/src/main.tsx b/examples/react/fixed/src/main.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
 
 import './index.css'
 
@@ -179,10 +179,10 @@ function GridVirtualizerFixed() {
           }}
         >
           {rowVirtualizer.getVirtualItems().map((virtualRow) => (
-            <React.Fragment key={virtualRow.index}>
+            <React.Fragment key={virtualRow.key}>
               {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
                 <div
-                  key={virtualColumn.index}
+                  key={virtualColumn.key}
                   className={
                     virtualColumn.index % 2
                       ? virtualRow.index % 2 === 0
@@ -212,9 +212,8 @@ function GridVirtualizerFixed() {
   )
 }
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )
diff --git a/examples/react/fixed/vite.config.js b/examples/react/fixed/vite.config.js
@@ -1,7 +1,5 @@
-import * as path from 'path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import rollupReplace from '@rollup/plugin-replace'
 
 // https://vitejs.dev/config/
 export default defineConfig({