fix: react 18 rendering lag

TanStack · Oct 17, 2023 · cdeda48 · cdeda48
1 parent acaff41
commit cdeda48
Show file tree

Hide file tree

Showing 10 changed files with 1,580 additions and 1,312 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,23 +1,24 @@
 {
-  "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",
     "@tanstack/react-virtual": "3.0.0-beta.65",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.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,24 @@
 {
-  "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",
+    "react-router-dom": "^6.15.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'
 
@@ -149,15 +149,15 @@ function GridVirtualizerFixed() {
     count: 10000,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 35,
-    overscan: 5,
+    overscan: 15,
   })
 
   const columnVirtualizer = useVirtualizer({
     horizontal: true,
     count: 10000,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 100,
-    overscan: 5,
+    overscan: 15,
   })
 
   return (
@@ -182,7 +182,7 @@ function GridVirtualizerFixed() {
             <React.Fragment key={virtualRow.index}>
               {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
                 <div
-                  key={virtualColumn.index}
+                  key={virtualRow.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({