HouYunFei
fb79a15508
- 添加 sections 定义文件，包含性能优化各领域分类 - 添加规则模板文件，规范文档结构和标签定义 - 添加异步操作优化规则，包括防止瀑布流、并行化、延迟等待等 - 添加包大小优化规则，包括避免桶式导入、动态导入、预加载等 - 添加服务端性能优化规则，包括 API 路
1.1 KiB
1.1 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Extract Default Non-primitive Parameter Value from Memoized Component to Constant | MEDIUM | restores memoization by using a constant for default value | rerender, memo, optimization |
Extract Default Non-primitive Parameter Value from Memoized Component to Constant
When memoized component has a default value for some non-primitive optional parameter, such as an array, function, or object, calling the component without that parameter results in broken memoization. This is because new value instances are created on every rerender, and they do not pass strict equality comparison in memo().
To address this issue, extract the default value into a constant.
Incorrect (onClick has different values on every rerender):
const UserAvatar = memo(function UserAvatar({ onClick = () => {} }: { onClick?: () => void }) {
// ...
})
// Used without optional onClick
<UserAvatar />
Correct (stable default value):
const NOOP = () => {};
const UserAvatar = memo(function UserAvatar({ onClick = NOOP }: { onClick?: () => void }) {
// ...
})
// Used without optional onClick
<UserAvatar />