The issue involves detecting unstable references in hooks, which requires understanding both React hooks and eslint-plugin-react-hooks.
The issue reports that eslint-plugin-react-hooks does not warn when an unstable reference is passed to a hook's callback parameter. The problem is reproducible with a provided example repository. The fix likely involves modifying the eslint-plugin-react-hooks to detect such cases, but requires deep understanding of both React hooks and the plugin's internals.
React version: 19.1.0 eslint-plugin-react-hooks version: 5.2.0
git clone https://github.com/aweebit/eslint-plugin-react-hooks-unstable-reference-issue.git`
cd eslint-plugin-react-hooks-unstable-reference-issue
npm install
npm run lint and observe how there are no warnings.npm start, open the served page in your browser and look at the console output.Link to example repository: https://github.com/aweebit/eslint-plugin-react-hooks-unstable-reference-issue
Here is the full example code:
import { createElement, useEffect, useReducer } from "react";
import { createRoot } from "react-dom/client";
let bar = () => console.log("good");
function Example() {
console.log("rendering");
const [updateTrigger, triggerUpdate] = useReducer(() => ({}), {});
useEffect(() => {
const timeout = setTimeout(triggerUpdate);
return () => clearTimeout(timeout);
}, []);
useEffect(bar, [updateTrigger]);
return null;
}
createRoot(
/** @type {HTMLDivElement} */ (document.getElementById("root"))
).render(createElement(Example));
setTimeout(() =>
setTimeout(() => {
console.l
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!