mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-02-13 19:15:44 +01:00
Kaj Kowalski
cd05fc8648
- Fix syntax errors in skills markdown files (.github/skills, .opencode/skills) - Change typescript to tsx for code blocks with JSX - Replace ellipsis (...) in array examples with valid syntax - Separate CSS from TypeScript into distinct code blocks - Convert JavaScript object examples to valid JSON in docs - Fix enum definitions with proper comma separation
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.
|