Skip to content

Commit 29c97c4

Browse files
renovate[bot]BenoitZugmeyer
renovate[bot]
and
BenoitZugmeyer
authored
👷 Update dependency react-window to v2 (#4052)
* 👷 Update dependency react-window to v2 * migrate to react-window 2 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Benoit Zugmeyer <benoit.zugmeyer@datadoghq.com>
1 parent 083b600 commit 29c97c4

File tree

6 files changed

+86
-170
lines changed

6 files changed

+86
-170
lines changed

‎LICENSE-3rdparty.csv‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ dev,@types/pako,MIT,Copyright Microsoft Corporation
2525
dev,@types/react,MIT,Copyright Microsoft Corporation
2626
dev,@types/react-dom,MIT,Copyright Microsoft Corporation
2727
dev,@wxt-dev/module-react,MIT,Copyright (c) 2023 Aaron
28-
dev,@types/react-window,MIT,Copyright Microsoft Corporation
2928
dev,@vitejs/plugin-react,MIT,Copyright (c) 2019-present Evan You & Vite Contributors
3029
dev,ajv,MIT,Copyright 2015-2017 Evgeny Poberezkin
3130
dev,browserstack-local,MIT,Copyright 2016 BrowserStack

‎test/apps/react-heavy-spa/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,13 @@
1111
"react": "18.3.1",
1212
"react-dom": "18.3.1",
1313
"react-router-dom": "6.30.2",
14-
"react-window": "1.8.11",
14+
"react-window": "2.2.3",
1515
"recharts": "2.15.4"
1616
},
1717
"devDependencies": {
1818
"@types/node": "24.10.4",
1919
"@types/react": "18.3.27",
2020
"@types/react-dom": "18.3.7",
21-
"@types/react-window": "1.8.8",
2221
"@vitejs/plugin-react": "5.1.2",
2322
"globals": "16.5.0",
2423
"typescript": "5.9.3",

‎test/apps/react-heavy-spa/src/components/Infrastructure/HostList.tsx‎

Lines changed: 65 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useMemo, useCallback, memo, Dispatch, SetStateAction } from 'react'
2-
import { FixedSizeList as List } from 'react-window'
2+
import { List, RowComponentProps } from 'react-window'
33
import { Host, HostStatus } from '../../types/data'
44
import './HostList.css'
55

@@ -55,43 +55,62 @@ const SortIcon = memo(
5555
}
5656
)
5757

58-
// Memoized row component for better performance
59-
const HostRow = memo(
60-
({ host, isSelected, onSelect }: { host: Host; isSelected: boolean; onSelect: (host: Host) => void }) => (
61-
<tr className={`host-row ${isSelected ? 'selected' : ''}`} onClick={() => onSelect(host)}>
62-
<td className="host-name">{host.name}</td>
63-
<td>
64-
<span className={`status-badge ${host.status}`}>{host.status}</span>
65-
</td>
66-
<td>
67-
<div className="metric-cell">
68-
<div className="metric-bar">
69-
<div className="metric-fill cpu" style={{ width: `${host.cpu}%` }} />
70-
</div>
71-
<span className="metric-value">{host.cpu}%</span>
72-
</div>
73-
</td>
74-
<td>
75-
<div className="metric-cell">
76-
<div className="metric-bar">
77-
<div className="metric-fill memory" style={{ width: `${host.memory}%` }} />
78-
</div>
79-
<span className="metric-value">{host.memory}%</span>
80-
</div>
81-
</td>
82-
<td>
83-
<div className="metric-cell">
84-
<div className="metric-bar">
85-
<div className="metric-fill disk" style={{ width: `${host.disk}%` }} />
86-
</div>
87-
<span className="metric-value">{host.disk}%</span>
88-
</div>
89-
</td>
90-
<td className="network-cell">{host.network} Mbps</td>
91-
<td className="uptime-cell">{formatUptime(host.uptime)}</td>
92-
</tr>
58+
type HostRowExtraProps = {
59+
filteredAndSortedHosts: Host[]
60+
selectedHost: Host | null
61+
onHostSelect: (host: Host) => void
62+
}
63+
64+
function HostRow({
65+
filteredAndSortedHosts,
66+
index,
67+
style,
68+
selectedHost,
69+
onHostSelect,
70+
}: RowComponentProps<HostRowExtraProps>) {
71+
const host = filteredAndSortedHosts[index]
72+
const isSelected = selectedHost?.id === host.id
73+
return (
74+
<div style={style}>
75+
<table className="host-table" style={{ tableLayout: 'fixed', width: '100%' }}>
76+
<tbody>
77+
<tr className={`host-row ${isSelected ? 'selected' : ''}`} onClick={() => onHostSelect(host)}>
78+
<td className="host-name">{host.name}</td>
79+
<td>
80+
<span className={`status-badge ${host.status}`}>{host.status}</span>
81+
</td>
82+
<td>
83+
<div className="metric-cell">
84+
<div className="metric-bar">
85+
<div className="metric-fill cpu" style={{ width: `${host.cpu}%` }} />
86+
</div>
87+
<span className="metric-value">{host.cpu}%</span>
88+
</div>
89+
</td>
90+
<td>
91+
<div className="metric-cell">
92+
<div className="metric-bar">
93+
<div className="metric-fill memory" style={{ width: `${host.memory}%` }} />
94+
</div>
95+
<span className="metric-value">{host.memory}%</span>
96+
</div>
97+
</td>
98+
<td>
99+
<div className="metric-cell">
100+
<div className="metric-bar">
101+
<div className="metric-fill disk" style={{ width: `${host.disk}%` }} />
102+
</div>
103+
<span className="metric-value">{host.disk}%</span>
104+
</div>
105+
</td>
106+
<td className="network-cell">{host.network} Mbps</td>
107+
<td className="uptime-cell">{formatUptime(host.uptime)}</td>
108+
</tr>
109+
</tbody>
110+
</table>
111+
</div>
93112
)
94-
)
113+
}
95114

96115
const HostList = memo(function HostList({
97116
hosts,
@@ -248,26 +267,17 @@ const HostList = memo(function HostList({
248267
</thead>
249268
</table>
250269
<div style={{ height: 'calc(100vh - 350px)', overflow: 'auto' }}>
251-
<List
252-
height={Math.min(filteredAndSortedHosts.length * 45 + 10, window.innerHeight - 350)}
253-
itemCount={filteredAndSortedHosts.length}
254-
itemSize={45}
255-
width="100%"
270+
<List<HostRowExtraProps>
271+
rowCount={filteredAndSortedHosts.length}
272+
rowComponent={HostRow}
273+
rowHeight={45}
256274
overscanCount={5}
257-
>
258-
{({ index, style }) => {
259-
const host = filteredAndSortedHosts[index]
260-
return (
261-
<div style={style}>
262-
<table className="host-table" style={{ tableLayout: 'fixed', width: '100%' }}>
263-
<tbody>
264-
<HostRow host={host} isSelected={selectedHost?.id === host.id} onSelect={onHostSelect} />
265-
</tbody>
266-
</table>
267-
</div>
268-
)
275+
rowProps={{
276+
filteredAndSortedHosts,
277+
selectedHost,
278+
onHostSelect,
269279
}}
270-
</List>
280+
/>
271281
</div>
272282
</div>
273283

‎test/apps/react-heavy-spa/src/components/Logs/LogTable.tsx‎

Lines changed: 12 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useMemo, useCallback } from 'react'
2-
import { FixedSizeList as List } from 'react-window'
2+
import { List, RowComponentProps } from 'react-window'
33
import { LogEntry, LogLevel } from '../../types/data'
44
import './LogTable.css'
55

@@ -9,14 +9,10 @@ interface LogTableProps {
99
onLogSelect: (log: LogEntry) => void
1010
}
1111

12-
interface LogRowProps {
13-
index: number
14-
style: React.CSSProperties
15-
data?: {
16-
logs: LogEntry[]
17-
selectedLog: LogEntry | null
18-
onLogSelect: (log: LogEntry) => void
19-
}
12+
interface LogRowExtraProps {
13+
logs: LogEntry[]
14+
selectedLog: LogEntry | null
15+
onLogSelect: (log: LogEntry) => void
2016
}
2117

2218
const LOG_LEVEL_COLORS: Record<LogLevel, string> = {
@@ -64,13 +60,9 @@ function truncateMessage(message: string, maxLength: number = 120): string {
6460
return message.substring(0, maxLength) + '...'
6561
}
6662

67-
function LogRow({ index, style, data }: LogRowProps) {
68-
if (!data) return null
69-
70-
const { logs, selectedLog, onLogSelect } = data
63+
function LogRow({ index, style, logs, selectedLog, onLogSelect }: RowComponentProps<LogRowExtraProps>) {
7164
const log = logs[index]
7265

73-
if (!log) return null
7466
const isSelected = selectedLog?.id === log.id
7567

7668
const handleClick = useCallback(() => {
@@ -182,20 +174,13 @@ export default function LogTable({ logs, selectedLog, onLogSelect }: LogTablePro
182174
</div>
183175

184176
<div className="log-table-body">
185-
<List<{
186-
logs: LogEntry[]
187-
selectedLog: LogEntry | null
188-
onLogSelect: (log: LogEntry) => void
189-
}>
190-
height={600}
191-
width="100%"
192-
itemCount={logs.length}
193-
itemSize={80}
194-
itemData={itemData}
177+
<List<LogRowExtraProps>
178+
rowCount={logs.length}
179+
rowHeight={80}
180+
rowProps={itemData}
181+
rowComponent={LogRow}
195182
overscanCount={5}
196-
>
197-
{LogRow}
198-
</List>
183+
/>
199184
</div>
200185

201186
<div className="log-table-footer">

‎test/apps/react-heavy-spa/src/react-window.d.ts‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎test/apps/react-heavy-spa/yarn.lock‎

Lines changed: 8 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ __metadata:
173173
languageName: node
174174
linkType: hard
175175

176-
"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
176+
"@babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
177177
version: 7.28.4
178178
resolution: "@babel/runtime@npm:7.28.4"
179179
checksum: 10c0/792ce7af9750fb9b93879cc9d1db175701c4689da890e6ced242ea0207c9da411ccf16dc04e689cc01158b28d7898c40d75598f4559109f761c12ce01e959bf7
@@ -778,24 +778,6 @@ __metadata:
778778
languageName: node
779779
linkType: hard
780780

781-
"@types/react-window@npm:1.8.8":
782-
version: 1.8.8
783-
resolution: "@types/react-window@npm:1.8.8"
784-
dependencies:
785-
"@types/react": "npm:*"
786-
checksum: 10c0/2170a3957752603e8b994840c5d31b72ddf94c427c0f42b0175b343cc54f50fe66161d8871e11786ec7a59906bd33861945579a3a8f745455a3744268ec1069f
787-
languageName: node
788-
linkType: hard
789-
790-
"@types/react@npm:*":
791-
version: 19.2.7
792-
resolution: "@types/react@npm:19.2.7"
793-
dependencies:
794-
csstype: "npm:^3.2.2"
795-
checksum: 10c0/a7b75f1f9fcb34badd6f84098be5e35a0aeca614bc91f93d2698664c0b2ba5ad128422bd470ada598238cebe4f9e604a752aead7dc6f5a92261d0c7f9b27cfd1
796-
languageName: node
797-
linkType: hard
798-
799781
"@types/react@npm:18.3.27":
800782
version: 18.3.27
801783
resolution: "@types/react@npm:18.3.27"
@@ -1253,13 +1235,12 @@ __metadata:
12531235
"@types/node": "npm:24.10.4"
12541236
"@types/react": "npm:18.3.27"
12551237
"@types/react-dom": "npm:18.3.7"
1256-
"@types/react-window": "npm:1.8.8"
12571238
"@vitejs/plugin-react": "npm:5.1.2"
12581239
globals: "npm:16.5.0"
12591240
react: "npm:18.3.1"
12601241
react-dom: "npm:18.3.1"
12611242
react-router-dom: "npm:6.30.2"
1262-
react-window: "npm:1.8.11"
1243+
react-window: "npm:2.2.3"
12631244
recharts: "npm:2.15.4"
12641245
typescript: "npm:5.9.3"
12651246
vite: "npm:5.4.21"
@@ -1408,13 +1389,6 @@ __metadata:
14081389
languageName: node
14091390
linkType: hard
14101391

1411-
"memoize-one@npm:>=3.1.1 <6":
1412-
version: 5.2.1
1413-
resolution: "memoize-one@npm:5.2.1"
1414-
checksum: 10c0/fd22dbe9a978a2b4f30d6a491fc02fb90792432ad0dab840dc96c1734d2bd7c9cdeb6a26130ec60507eb43230559523615873168bcbe8fafab221c30b11d54c1
1415-
languageName: node
1416-
linkType: hard
1417-
14181392
"minimatch@npm:^10.1.1":
14191393
version: 10.1.1
14201394
resolution: "minimatch@npm:10.1.1"
@@ -1724,16 +1698,13 @@ __metadata:
17241698
languageName: node
17251699
linkType: hard
17261700

1727-
"react-window@npm:1.8.11":
1728-
version: 1.8.11
1729-
resolution: "react-window@npm:1.8.11"
1730-
dependencies:
1731-
"@babel/runtime": "npm:^7.0.0"
1732-
memoize-one: "npm:>=3.1.1 <6"
1701+
"react-window@npm:2.2.3":
1702+
version: 2.2.3
1703+
resolution: "react-window@npm:2.2.3"
17331704
peerDependencies:
1734-
react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
1735-
react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
1736-
checksum: 10c0/5ae8da1bc5c47d8f0a428b28a600256e2db511975573e52cb65a9b27ed1a0e5b9f7b3bee5a54fb0da93956d782c24010be434be451072f46ba5a89159d2b3944
1705+
react: ^18.0.0 || ^19.0.0
1706+
react-dom: ^18.0.0 || ^19.0.0
1707+
checksum: 10c0/7e97381b269560038c4c76c4ae17121d87efb628fce840fe382e73ae0e9816d4b68384a402340b0a08f9e4a47d8bd7328ae8502fd26b0d9399339a20e1c550be
17371708
languageName: node
17381709
linkType: hard
17391710

0 commit comments

Comments
 (0)