mirror of
https://github.com/NicholaiVogel/dashore-incubator.git
synced 2026-03-30 22:38:56 +00:00
Nicholai
827f13a2db
add web-perf and vercel-react-best-practices skills from skills.sh to improve ai assistance for this next.js + cloudflare workers project. - web-perf: core web vitals analysis and performance auditing - vercel-react-best-practices: react/next.js optimization patterns - wrangler: cloudflare workers cli guidance (already existed)
1.1 KiB
1.1 KiB
| 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 />