Skip to content

Commit

Permalink
fix: react 18 rendering lag
Browse files Browse the repository at this point in the history
  • Loading branch information
piecyk committed Oct 19, 2023
1 parent acaff41 commit 75deac8
Show file tree
Hide file tree
Showing 12 changed files with 1,432 additions and 1,212 deletions.
1 change: 0 additions & 1 deletion examples/react/dynamic/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
19 changes: 10 additions & 9 deletions examples/react/dynamic/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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"
}
}
2 changes: 0 additions & 2 deletions examples/react/fixed/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
24 changes: 13 additions & 11 deletions examples/react/fixed/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
11 changes: 5 additions & 6 deletions examples/react/fixed/src/main.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -212,9 +212,8 @@ function GridVirtualizerFixed() {
)
}

ReactDOM.render(
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
)
2 changes: 0 additions & 2 deletions examples/react/fixed/vite.config.js
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
Loading

0 comments on commit 75deac8

Please sign in to comment.