How to use the RC linter with experimental_useEffectEvent?

[stipsan]

The announcement for the React Compiler RC directs folks to replace eslint-plugin-react-compiler with [email protected].
While the docs for experimental_useEffectEvent points to eslint-plugin-react-hooks@experimental.

Is there a way to use the compiler and have linting pass here, without adding onVisit to the deps?

function Page({ url }) {
  const { items } = useContext(ShoppingCartContext);
  const numberOfItems = items.length;

  const onVisit = useEffectEvent(visitedUrl => {
    logVisit(visitedUrl, numberOfItems);
  });

  useEffect(() => {
    onVisit(url);
  }, [url]); 
}

[stipsan]

Turns out eslint-plugin-react-hooks@experimental works fine with the react-hooks/react-compiler rule, turns out my pnpm lint command used eslint --cache and it caused false negatives 🤦

How risky is it to use babel-plugin-react-compiler@rc and eslint-plugin-react-hooks@experimental? Can it cause a mismatch between the compiler used by the linter, and the one babel is using? 🤔

[poteto]

The linter is independent of the compiler actually so it should be fine. But in theory you could get a mismatch in expectations: if for example we added a new validation, you would see it immediately in experimental telling you that some pattern might cause a bail out. But in reality the compiler@rc would not have bailed out because it's still on an old version.

To be safe you could pin the eslint plugin@experimental to a hash that the RC is on. Roughly speaking I think [email protected] should match 19.1.0-rc.1

[stipsan]

Gotcha, is there a way for us to automatically determine that, seeing as we're now on 19.1.0-rc.2?