Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Bug: [eslint-plugin-react-hooks] No `react-hooks/exhaustive-deps` warning when an unstable reference is passed to hook's callback parameter | GoodFirstPicks

Bug: [eslint-plugin-react-hooks] No `react-hooks/exhaustive-deps` warning when an unstable reference is passed to hook's callback parameter

facebook/react 8 comments 27d ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeTest focusedReactJavaScriptTypeScript

Why this is a good first issue

The issue involves detecting unstable references in hooks, which requires understanding both React hooks and eslint-plugin-react-hooks.

AI Summary

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.

Issue Description

React version: 19.1.0 eslint-plugin-react-hooks version: 5.2.0

Steps To Reproduce

  1. git clone https://github.com/aweebit/eslint-plugin-react-hooks-unstable-reference-issue.git`
    cd eslint-plugin-react-hooks-unstable-reference-issue
    npm install
    
  2. Run npm run lint and observe how there are no warnings.
  3. Run 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

GitHub Labels

Status: Unconfirmed

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!

Risk Flags

  • requires understanding of eslint-plugin-react-hooks internals
Loading labels...

Details

Points20 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedyes