You Might Not Need A Callback

You Might Not Need a Callback

Arguments:

• scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
• fix: whether to apply fixes (default: true). Set to false to only propose changes.

User arguments: $ARGUMENTS

References

Read before analyzing:

1. https://react.dev/reference/react/useCallback — official docs on when useCallback is actually needed

The one rule that matters

useCallback is only useful when something observes the reference. Ask: does anything care if this function gets a new identity on re-render?

Observers that care about reference stability:

• A useEffect that lists the function in its deps array
• A useMemo that lists the function in its deps array
• Another useCallback that lists the function in its deps array
• A child component wrapped in React.memo that receives the function as a prop
• A custom hook that documents a referential-stability requirement for the callback

If none of those apply — if the function is only called inline, or passed to a non-memoized child, or assigned to a native element event — the reference is unobserved and useCallback adds overhead with zero benefit.

Anti-patterns to detect

1. No observer tracks the reference: The function is only called inline in the same component, or passed to a non-memoized child, or used as a native element handler (<button>). Nothing re-runs or bails out based on reference identity. Remove useCallback.
2. useCallback with deps that change every render: If a dep is a plain object/array created inline, or state that changes on every interaction, memoization buys nothing — the function gets a new identity anyway.
3. useCallback on handlers passed only to native elements: <button> — React never does reference equality on native element props. No benefit.
4. useCallback wrapping functions that return new objects/arrays: Stable function identity, unstable return value — memoization is at the wrong level. Use useMemo on the return value instead, or restructure.
5. useCallback with empty deps when deps are needed: Stale closure — reads initial values forever. This is a correctness bug, not just a performance issue.
6. Pairing useCallback + React.memo on trivially cheap renders: If the child renders in < 1ms and re-renders rarely, the memo infrastructure costs more than it saves.
7. Internal helpers inside custom hooks wrapped for no observer: functions a hook only calls internally need no useCallback. Functions a hook returns are wrapped by convention (.claude/rules/sim-hooks.md Rule 4, matching react.dev) — do not flag those for lacking an observer, but still check their dependency arrays (patterns 2-5 apply to them as much as to any other useCallback).

const idRef = useRef(id)
useEffect(() => { idRef.current = id }, [id])
const fetchData = useCallback(async () => {
  // use idRef.current instead of id
}, []) // empty deps because refs are used