React hook missing dep

Skill viditkbhatnagar/immunize/src/immunize/patterns/react-hook-missing-dep

A curated pattern library that stops AI coding assistants from repeating common runtime errors. No API key. No LLM calls at runtime.

Install

npx -y skills add viditkbhatnagar/immunize --skill react-hook-missing-dep

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when writing React components with useEffect or useCallback to ensure every reactive value referenced in the hook body appears in the dependency array.

SKILL.md

2.0 KB, as published. Nobody here has run it

react-hook-missing-dep

When you write useEffect or useCallback, list every reactive value the body reads in the dependency array. A "reactive value" is anything whose reference can change between renders: props, state from useState/useReducer, context values, and other hook results.

Declare the dep even if it feels obvious that the value is stable. React's exhaustive-deps lint catches this, and relying on it slows you down; write the array correctly the first time.

Example

Wrong — count changes but is missing from the deps array, so the effect uses the stale value from the first render:

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, []);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Right — count is declared, so the effect re-runs when it changes:

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

When an empty deps array is correct

Only when the effect genuinely runs once and the body references NO reactive values. If you write [] to "silence the warning," either move the stable reference outside the component or wrap the function in useCallback with its own correct deps. Do not paper over missing deps with eslint-disable comments.

Immunity note

This pattern is a source-level check, not a runtime behavioral test. The verification asserts the deps array lists every useState identifier the hook body references. It cannot catch every stale-closure bug (some are semantic), but it prevents the most common shape the AI produces.