HouYunFei
fb79a15508
- 添加 sections 定义文件，包含性能优化各领域分类 - 添加规则模板文件，规范文档结构和标签定义 - 添加异步操作优化规则，包括防止瀑布流、并行化、延迟等待等 - 添加包大小优化规则，包括避免桶式导入、动态导入、预加载等 - 添加服务端性能优化规则，包括 API 路
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.
|