Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

eslint-plugin-react-hooks v7 warning for useVirtualizer: Compilation Skipped: Use of incompatible library

Ouverte
  • Quelque chose ne va pas ?
#1,119 11 commentaires 29 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@kklem0 y travaille déjà.

Depuis le 25/7/2026.

  • #1241 par @kklem0 — ouverte
  • #1259 par @kklem0 — ouverte

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
45/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Calme
Stack technique
react, typescript
Domaine
frontend, tooling

Piste de recherche

Commencez par la reproduction fournie dans StackBlitz, en particulier src/main.tsx, eslint.config.ts et package.json, et exécutez eslint avec les versions indiquées des plugins React et hooks. Comparez l’exemple useVirtualizer avec useWindowVirtualizer et examinez les points d’entrée de l’intégration React ; le travail est terminé lorsque le cas useVirtualizer reproductible n’émet plus l’avertissement de bibliothèque incompatible sans le supprimer.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.
Langage dominant
TypeScript
Étoiles
7.1k
Forks
472
Merge moyen
1 j 2 h
PR mergées (30 j)
12

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/virtual

Toutes les issues de TanStack/virtual

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.