AngeloooooandDraculabo
8ed4593f73
* Refactor Gemini model display: filter old versions, group low/high pro, and improve naming * Fix potential negative minutes and refine Gemini 3 Pro grouping logic based on PR feedback * The account change process has been sped up * Address PR review: enhance error message and parameterize polling interval in process handler * Address PR review: fix potential race condition in database backup logic * fix: prevent renderer white screen and harden sentry gating * feat: localize model labels * chore: enable hoisted node-linker * chore: ignore .agent/.claude/.codex in prettier --------- Co-authored-by: Draculabo <[email protected]>
37 lines
1.1 KiB
Markdown
37 lines
1.1 KiB
Markdown
---
|
|
title: Extract Default Non-primitive Parameter Value from Memoized Component to Constant
|
|
impact: MEDIUM
|
|
impactDescription: restores memoization by using a constant for default value
|
|
tags: 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):**
|
|
|
|
```tsx
|
|
const UserAvatar = memo(function UserAvatar({ onClick = () => {} }: { onClick?: () => void }) {
|
|
// ...
|
|
})
|
|
|
|
// Used without optional onClick
|
|
<UserAvatar />
|
|
```
|
|
|
|
**Correct (stable default value):**
|
|
|
|
```tsx
|
|
const NOOP = () => {};
|
|
|
|
const UserAvatar = memo(function UserAvatar({ onClick = NOOP }: { onClick?: () => void }) {
|
|
// ...
|
|
})
|
|
|
|
// Used without optional onClick
|
|
<UserAvatar />
|
|
```
|