bbb2f41591
- Created `openspec-ff-change` skill for fast-forward artifact creation. - Introduced `openspec-new-change` skill for structured change creation. - Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow. - Added `openspec-sync-specs` skill for syncing delta specs to main specs. - Implemented `openspec-verify-change` skill for verifying implementation against change artifacts. - Updated `.gitignore` to exclude OpenSpec generated files. - Added `skills-lock.json` to manage skill dependencies.
45 lines
1.1 KiB
Markdown
45 lines
1.1 KiB
Markdown
---
|
|
title: Extract to Memoized Components
|
|
impact: MEDIUM
|
|
impactDescription: enables early returns
|
|
tags: rerender, memo, useMemo, optimization
|
|
---
|
|
|
|
## 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.
|