Analyze and fix useCallback anti-patterns in your code
Arguments:
User arguments: $ARGUMENTS
Read before analyzing:
React.memo (to preserve referential equality)useEffect, useMemo)<button onClick={handleClick}> — native elements don't benefit from stable references. Only child components wrapped in React.memo do.{ ...newObj } or [...newArr], memoizing the callback doesn't prevent the child from re-rendering due to new return values. The memoization is at the wrong level.This codebase uses a ref pattern for stable callbacks in hooks:
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
This pattern is correct — don't flag it as an anti-pattern.