Extract to Memoized Components

Extract expensive work into memoized components to enable early returns before computation.

Incorrect (computes avatar even when loading):

tsx
1function Profile({ user, loading }: Props) {
2  const avatar = useMemo(() => {
3    const id = computeAvatarId(user)
4    return <Avatar id={id} />
5  }, [user])
6
7  if (loading) return <Skeleton />
8  return <div>{avatar}</div>
9}

Correct (skips computation when loading):

tsx
1const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
2  const id = useMemo(() => computeAvatarId(user), [user])
3  return <Avatar id={id} />
4})
5
6function Profile({ user, loading }: Props) {
7  if (loading) return <Skeleton />
8  return (
9    <div>
10      <UserAvatar user={user} />
11    </div>
12  )
13}

Note: If your project has React Compiler enabled, manual memoization with memo() and useMemo() is not necessary. The compiler automatically optimizes re-renders.