Agent Skills
› simstudioai/sim
› you-might-not-need-a-memo
you-might-not-need-a-memo
GitHub分析并修复代码中 useMemo 和 React.memo 的反模式，如滥用记忆化、依赖错误等。通过下移状态或提升组件优化性能，避免不必要的记忆化开销。
Trigger Scenarios
需要审查或修复 React 组件性能问题
检查代码是否存在无效的 useMemo 或 React.memo 使用
Install
npx skills add simstudioai/sim --skill you-might-not-need-a-memo -g -y
SKILL.md
Frontmatter
{
"name": "you-might-not-need-a-memo",
"description": "Analyze and fix useMemo\/React.memo anti-patterns in your code",
"argument-hint": "[scope] [fix=true|false]"
}
You Might Not Need a Memo
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://overreacted.io/before-you-memo/ — two techniques to avoid memo entirely
Anti-patterns to detect
- Wrapping a slow component in React.memo when state can be moved down: If a component re-renders because of state it doesn't use, move that state into a smaller child component instead of memoizing. The slow component stops re-rendering without memo.
- Wrapping in React.memo when children can be lifted up: If a parent owns state that changes frequently, extract the stateful part and pass the expensive subtree as
children. Children passed as props don't re-render when the parent's state changes. - useMemo on cheap computations: Filtering or mapping a small array, string concatenation, simple arithmetic — these don't need memoization. Only memoize when you've measured a performance problem.
- useMemo with constantly-changing deps: If the dependency array changes on every render, useMemo does nothing — it recalculates every time. Fix the deps or remove the memo.
- useMemo to create objects/arrays passed as props: Instead of memoizing to prevent child re-renders, consider whether the child even needs referential stability. If the child doesn't use React.memo or pass it to a dep array, the memo is wasted.
- React.memo on components that always receive new props: If the parent always passes new objects, arrays, or callbacks, React.memo's shallow comparison always fails. Fix the parent instead of memoizing the child.
- useMemo for derived state: If you're computing a value from props or state, just compute it inline during render. React renders are fast.
const fullName = first + ' ' + lastdoesn't need useMemo.
Steps
- Read the reference above to understand the two core techniques (move state down, lift content up)
- 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
- ceda457 Current 2026-08-20 15:29
