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]>
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.
|