skillhub-088-vercel-react-best-practices/rules/rerender-memo-with-default-value.md

---

将记忆化组件中非原始类型的默认参数值提取为常量

当记忆化组件为某些非原始类型的可选参数（如数组、函数或对象）设置了默认值时，若不传该参数调用组件，会导致记忆化失效。这是因为每次重渲染时都会创建新的值实例，这些实例无法通过 memo() 中的严格相等比较。

要解决此问题，需将默认值提取为常量。

错误示例（每次重渲染时 onClick 的值都不同）：

const UserAvatar = memo(function UserAvatar({ onClick = () => {} }: { onClick?: () => void }) {
  // ...
})

// 未传入可选参数 onClick 时使用
<UserAvatar />

正确示例（稳定的默认值）：

const NOOP = () => {};

const UserAvatar = memo(function UserAvatar({ onClick = NOOP }: { onClick?: () => void }) {
  // ...
})

// 未传入可选参数 onClick 时使用
<UserAvatar />