TheOrcDev / rerender-memo
Install for your project team
Run this command in your project directory to install the skill for your entire team:
mkdir -p .claude/skills/rerender-memo && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/2361" && unzip -o skill.zip -d .claude/skills/rerender-memo && rm skill.zipProject Skills
This skill will be saved in .claude/skills/rerender-memo/ and checked into git. All team members will have access to it automatically.
Important: Please verify the skill by reviewing its instructions before using it.
Extract expensive work into memoized components with React.memo. Apply when components perform expensive computations that can be skipped when props haven't changed.
0 views
0 installs
Skill Content
---
name: rerender-memo
description: Extract expensive work into memoized components with React.memo. Apply when components perform expensive computations that can be skipped when props haven't changed.
---
## Extract to Memoized Components
Extract expensive work into memoized components to enable early returns before computation.
**Incorrect (computes avatar even when loading):**
```tsx
function Profile({ user, loading }: Props) {
const avatar = useMemo(() => {
const id = computeAvatarId(user)
return <Avatar id={id} />
}, [user])
if (loading) return <Skeleton />
return <div>{avatar}</div>
}
```
**Correct (skips computation when loading):**
```tsx
const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
const id = useMemo(() => computeAvatarId(user), [user])
return <Avatar id={id} />
})
function Profile({ user, loading }: Props) {
if (loading) return <Skeleton />
return (
<div>
<UserAvatar user={user} />
</div>
)
}
```
**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, manual memoization with `memo()` and `useMemo()` is not necessary. The compiler automatically optimizes re-renders.