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

[srghma]

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.