eslint-plugin-react-hooks v7 warning for useVirtualizer: Compilation Skipped: Use of incompatible library
Maintainer antworten meist innerhalb von 1 Tag
Bewertung
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Anfängerfreundlichkeit
- 45/100
- Issue-Typ
- Bug
- Klarheit
- Größtenteils klar
- Aktivitätsstatus
- Ruhig
- Tech-Stack
- react, typescript
Rechercherichtung
Beginne mit der bereitgestellten StackBlitz-Reproduktion, insbesondere mit src/main.tsx, eslint.config.ts und package.json, und führe eslint mit den aufgeführten Versionen der React- und hooks-Plugins aus. Vergleiche das useVirtualizer-Beispiel mit useWindowVirtualizer und untersuche die Einstiegspunkte der React-Integration; abgeschlossen ist die Aufgabe, wenn der reproduzierbare useVirtualizer-Fall die Warnung zur inkompatiblen Bibliothek nicht mehr ausgibt, ohne sie zu unterdrücken.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
Describe the bug
I see warning
~/projects/kkvivbzvmm.github 1s
❯ eslint
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .
/home/projects/kkvivbzvmm.github/src/main.tsx
14:23 warning Compilation Skipped: Use of incompatible library
This API returns functions which cannot be memoized without leading to stale UI. To prevent this, by default React Compiler will skip memoizing this component/hook. However, you may see issues if values from this API are passed to other components/hooks that are memoized.
/home/projects/kkvivbzvmm.github/src/main.tsx:14:23
12 | const listRef = React.useRef<HTMLDivElement | null>(null);
13 |
> 14 | const virtualizer = useVirtualizer({
| ^^^^^^^^^^^^^^ TanStack Virtual's `useVirtualizer()` API returns functions that cannot be memoized safely
15 | getScrollElement: () => window as any as Element,
16 | // const virtualizer = useWindowVirtualizer({
17 | count: 10000, react-hooks/incompatible-library
Your minimal, reproducible example
https://stackblitz.com/edit/tanstack-virtual-dvrcspge?file=eslint.config.ts
Steps to reproduce
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import './index.css';
import {
useVirtualizer,
// useWindowVirtualizer
} from '@tanstack/react-virtual';
function Example() {
const listRef = React.useRef<HTMLDivElement | null>(null);
const virtualizer = useVirtualizer({
getScrollElement: () => window as any as Element,
// const virtualizer = useWindowVirtualizer({
count: 10000,
estimateSize: () => 35,
overscan: 5,
scrollMargin: listRef.current?.offsetTop ?? 0,
});
return (
<>
<div ref={listRef} className="List">
<div
style={{
height: `${virtualizer.getTotalSize()}px`,
width: '100%',
position: 'relative',
}}
>
{virtualizer.getVirtualItems().map((item) => (
<div
key={item.key}
className={item.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: `${item.size}px`,
transform: `translateY(${
item.start - virtualizer.options.scrollMargin
}px)`,
}}
>
Row {item.index}
</div>
))}
</div>
</div>
</>
);
}
function App() {
return (
<div>
<p>
In many cases, when implementing a virtualizer with a window as the
scrolling element, developers often find the need to specify a
"scrollMargin." The scroll margin is a crucial setting that defines the
space or gap between the start of the page and the edges of the list.
</p>
<br />
<br />
<h3>Window scroller</h3>
<Example />
<br />
<br />
{process.env.NODE_ENV === 'development' ? (
<p>
<strong>Notice:</strong> You are currently running React in
development mode. Rendering performance will be slightly degraded
until this application is built for production.
</p>
) : null}
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
eslint.config.ts
import js from '@eslint/js';
import globals from 'globals';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import { defineConfig } from 'eslint/config';
import reactHooks from 'eslint-plugin-react-hooks';
export default defineConfig([
{
files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
plugins: { js },
extends: ['js/recommended'],
languageOptions: { globals: globals.browser },
},
tseslint.configs.recommended,
pluginReact.configs.flat.recommended,
reactHooks.configs.flat.recommended,
]);
package.json
"eslint": "^9.39.2",
"eslint-plugin-react": "7.37.5",
"eslint-plugin-react-hooks": "7.0.1",
Expected behavior
no warning
tried "use no memo" - didnt work
How often does this bug happen?
None
Screenshots or Videos
No response
Platform
chrome
tanstack-virtual version
^3.13.18
TypeScript version
No response
Additional context
No response
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 7.2k
- Forks
- 479
- Ø Merge
- 1 T. 5 Std.
- Gemergte PRs (30 T.)
- 38
Entwicklungsumgebung
- Kein Dockerfile und keine Docker-Compose-Datei
- Hat eine Pull-Request-Vorlage
- Beitragsleitfaden lesen
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus TanStack/virtual
-
anchorTo: 'end' loses the end when the scroll element shrinksEvtl. vergeben @langleyd hat das vor 20 Tagen übernommen. Offen
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 68/100
Maintainer antworten meist innerhalb von 1 Tag
-
marko-virtual: scrollToEnd during an in-flight prepend strands the view one prepend above the bottom (chat-pretext e2e fails on CI)Evtl. vergeben @prayaggaikwad96 hat das vor 14 Tagen übernommen. Offen
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 55/100
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 42/100
TanStack/virtual#1252 · 2 Kommentare ·
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100
TanStack/virtual#1099 · 1 Reaktion ·
Maintainer antworten meist innerhalb von 1 Tag
-
Angular Runtime NG0600: Writing to signals is not allowed introduced by (1085)Evtl. vergeben @okxint hat das vor 26 Tagen übernommen. Offen
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100
TanStack/virtual#1096 · 1 Kommentar · 3 Reaktionen ·
Maintainer antworten meist innerhalb von 1 Tag
Alle Issues in TanStack/virtual
Ähnliche Issues
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 1/5 1-3 Stunden Anfängerfreundlichkeit 84/100
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 83/100
keptinventory/kept#336 ·
Maintainer antworten meist innerhalb von 1 Tag
-
good first issue
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
-
hemi-earn
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
vetro-protocol/vetro-monorepo#1013 ·
Maintainer antworten meist innerhalb von 1 Tag