add MUI X#1171
Conversation
📝 WalkthroughWalkthroughThis PR adds ChangesMUI X Virtualizer Benchmark Integration
🎯 3 (Moderate) | ⏱️ ~20 minutes
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@benchmarks/README.md`:
- Line 3: The README's intro claims five libraries but the "Latest results" and
"Bottom line" sections still present four-library output; update the "Latest
results" and "Bottom line" sections to either regenerate and include the new
fifth-library benchmark data (ensuring tables/plots and summary include
`@tanstack/react-virtual`, virtua, react-virtuoso, react-window v2, and
`@mui/x-virtualizer`) or explicitly label those sections as "four-library results
(pre-update)" if you cannot regenerate; ensure headings "Latest results" and
"Bottom line" and any result tables/legends reflect the chosen option so the
document is not misleading.
In `@benchmarks/src/pages/MuiPage.tsx`:
- Around line 3-15: Split value and type imports and reorder groups to satisfy
ESLint: import runtime symbols (LayoutList, useVirtualizer) together from
'`@mui/x-virtualizer`' and import values from local modules (markFirstPaint,
markMountEnd, markMountStart, registerHarness, makeDataset) in their own group,
then use "import type" for purely type imports (Virtualizer, Item,
ScenarioInput) as separate statements; ensure external package imports come
before local imports and that each "import type" only contains type names (e.g.,
import type { Virtualizer } from '`@mui/x-virtualizer`'; import type { Item } from
'../lib/dataset'; import type { ScenarioInput } from '../scenarios/types').
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 989dba5d-4c97-4e6c-b854-3f90d7e26ce0
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
benchmarks/README.mdbenchmarks/package.jsonbenchmarks/runner/run.mjsbenchmarks/src/main.tsxbenchmarks/src/pages/MuiPage.tsxbenchmarks/src/scenarios/types.ts
| # Virtualization benchmarks | ||
|
|
||
| Reproducible browser benchmarks comparing **@tanstack/react-virtual**, **virtua**, **react-virtuoso**, and **react-window** v2. | ||
| Reproducible browser benchmarks comparing **@tanstack/react-virtual**, **virtua**, **react-virtuoso**, **react-window** v2, and **@mui/x-virtualizer**. |
There was a problem hiding this comment.
Keep result sections consistent with the new five-library claim.
The intro says five libraries, but the “Latest results”/“Bottom line” content still reads as four-library output. Please regenerate or clearly label those sections to avoid misleading comparisons.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@benchmarks/README.md` at line 3, The README's intro claims five libraries but
the "Latest results" and "Bottom line" sections still present four-library
output; update the "Latest results" and "Bottom line" sections to either
regenerate and include the new fifth-library benchmark data (ensuring
tables/plots and summary include `@tanstack/react-virtual`, virtua,
react-virtuoso, react-window v2, and `@mui/x-virtualizer`) or explicitly label
those sections as "four-library results (pre-update)" if you cannot regenerate;
ensure headings "Latest results" and "Bottom line" and any result tables/legends
reflect the chosen option so the document is not misleading.
| import { | ||
| LayoutList, | ||
| useVirtualizer, | ||
| type Virtualizer, | ||
| } from '@mui/x-virtualizer' | ||
| import { | ||
| markFirstPaint, | ||
| markMountEnd, | ||
| markMountStart, | ||
| registerHarness, | ||
| } from '../lib/harness' | ||
| import { makeDataset, type Item } from '../lib/dataset' | ||
| import type { ScenarioInput } from '../scenarios/types' |
There was a problem hiding this comment.
Fix import declarations to pass current ESLint checks.
This import block violates sort-imports and import/consistent-type-specifier-style; keep value imports and type imports separate to unblock lint.
Proposed fix
import * as React from 'react'
import { useEffect, useMemo, useRef } from 'react'
import {
LayoutList,
useVirtualizer,
- type Virtualizer,
} from '`@mui/x-virtualizer`'
+import type { Virtualizer } from '`@mui/x-virtualizer`'
import {
markFirstPaint,
markMountEnd,
markMountStart,
registerHarness,
} from '../lib/harness'
-import { makeDataset, type Item } from '../lib/dataset'
+import { makeDataset } from '../lib/dataset'
+import type { Item } from '../lib/dataset'
import type { ScenarioInput } from '../scenarios/types'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { | |
| LayoutList, | |
| useVirtualizer, | |
| type Virtualizer, | |
| } from '@mui/x-virtualizer' | |
| import { | |
| markFirstPaint, | |
| markMountEnd, | |
| markMountStart, | |
| registerHarness, | |
| } from '../lib/harness' | |
| import { makeDataset, type Item } from '../lib/dataset' | |
| import type { ScenarioInput } from '../scenarios/types' | |
| import { | |
| LayoutList, | |
| useVirtualizer, | |
| } from '`@mui/x-virtualizer`' | |
| import type { Virtualizer } from '`@mui/x-virtualizer`' | |
| import { | |
| markFirstPaint, | |
| markMountEnd, | |
| markMountStart, | |
| registerHarness, | |
| } from '../lib/harness' | |
| import { makeDataset } from '../lib/dataset' | |
| import type { Item } from '../lib/dataset' | |
| import type { ScenarioInput } from '../scenarios/types' |
🧰 Tools
🪛 ESLint
[error] 6-6: Member 'Virtualizer' of the import declaration should be sorted alphabetically.
(sort-imports)
[error] 6-6: Prefer using a top-level type-only import instead of inline type specifiers.
(import/consistent-type-specifier-style)
[error] 14-14: Member 'Item' of the import declaration should be sorted alphabetically.
(sort-imports)
[error] 14-14: Prefer using a top-level type-only import instead of inline type specifiers.
(import/consistent-type-specifier-style)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@benchmarks/src/pages/MuiPage.tsx` around lines 3 - 15, Split value and type
imports and reorder groups to satisfy ESLint: import runtime symbols
(LayoutList, useVirtualizer) together from '`@mui/x-virtualizer`' and import
values from local modules (markFirstPaint, markMountEnd, markMountStart,
registerHarness, makeDataset) in their own group, then use "import type" for
purely type imports (Virtualizer, Item, ScenarioInput) as separate statements;
ensure external package imports come before local imports and that each "import
type" only contains type names (e.g., import type { Virtualizer } from
'`@mui/x-virtualizer`'; import type { Item } from '../lib/dataset'; import type {
ScenarioInput } from '../scenarios/types').
1 participant
Result:
Mount time — React.render → commit (lower is better, ms)
mount-fixed-1kmount-fixed-10kmount-fixed-100kmount-dynamic-1kmount-dynamic-10kDynamic measurement — commit → stable total size (lower is better, ms)
mount-dynamic-1kmount-dynamic-10kFirst paint (lower is better, ms)
mount-fixed-1kmount-fixed-10kmount-fixed-100kScroll perf — fps (higher is better)
scroll-to-bottom-10kfast-scroll-dynamic-10kScroll jank — long frames count (lower is better)
scroll-to-bottom-10kfast-scroll-dynamic-10kJump-to-end settle time (lower is better, ms)
jump-to-end-dynamic-10kscrollToIndex landing accuracy — px offset from target (lower is better)
jump-to-middle-accuracy-dynamic-10kjump-to-last-accuracy-dynamic-10kjump-while-measuring-accuracy-dynamic-10kjump-wide-variance-accuracy-10kMemory after mount (lower is better, MB)
mount-fixed-10kmount-fixed-100kmount-dynamic-10kSummary by CodeRabbit
New Features
Documentation