you-might-not-need-a-callback
GitHub分析 React 代码中 useCallback 的误用,识别无观察者的冗余包装、依赖项错误等反模式,并自动修复或建议移除,以提升性能和代码质量。
Trigger Scenarios
Install
npx skills add simstudioai/sim --skill you-might-not-need-a-callback -g -y
SKILL.md
Frontmatter
{
"name": "you-might-not-need-a-callback",
"description": "Analyze and fix useCallback anti-patterns in your code",
"argument-hint": "[scope] [fix=true|false]"
}
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:
- 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
useEffectthat lists the function in its deps array - A
useMemothat lists the function in its deps array - Another
useCallbackthat lists the function in its deps array - A child component wrapped in
React.memothat 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
- 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 onClick={fn}>). Nothing re-runs or bails out based on reference identity. RemoveuseCallback. - 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.
- useCallback on handlers passed only to native elements:
<button onClick={fn}>— React never does reference equality on native element props. No benefit. - useCallback wrapping functions that return new objects/arrays: Stable function identity, unstable return value — memoization is at the wrong level. Use
useMemoon the return value instead, or restructure. - useCallback with empty deps when deps are needed: Stale closure — reads initial values forever. This is a correctness bug, not just a performance issue.
- 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.
- 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.mdRule 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 otheruseCallback).
Patterns that ARE correct — do not flag
- Any
useCallbackwith an observer from the list above - This codebase's ref pattern:
useRef+ callback with empty deps that reads the ref inside — correct, do not flag:
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
Steps
- Read the reference above
- Analyze the specified scope for the anti-patterns listed above
- If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
Version History
-
6dfb467
Current 2026-09-23 06:37
移除过时模式和冗余内容,修正提供者矩阵及仓库特定声明。
- ceda457 2026-08-20 15:29


