Skip to main content

you-might-not-need-a-memo

Analyze and fix useMemo/React.memo anti-patterns in your code

소스 정보

저장소
simstudioai/sim
최근 소스 활동
2026년 10월 10일 06:17
감지된 SKILL.md 언어
영어
스타
29,916
포크
3,868

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

SKILL.md 표시 중

SKILL.md
소스 지침 · 읽기 전용 미리보기
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 staging", "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://overreacted.io/before-you-memo/ — two techniques to avoid memo entirely ## Anti-patterns to detect 1. **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. 2. **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. 3. **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. 4. **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. 5. **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. 6. **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. 7. **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 + ' ' + last` doesn't need useMemo. ## Patterns that ARE correct — do not flag - A `useMemo` that builds a lookup `Map`/`Set` or a single-pass partition for list rendering (`.claude/rules/sim-components.md` "List-render performance"). ## Steps 1. Read the reference above to understand the two core techniques (move state down, lift content up) 2. Analyze the specified scope for the anti-patterns listed above 3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
GitHub에서 보기