메모이제이션된 컴포넌트로 추출

Overview

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

Impact

• Priority: MEDIUM
• Performance: enables early returns

Problem

Expensive computations inside useMemo execute before conditionals.

Incorrect (computes avatar even when loading)

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)

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>
  )
}

How It Works

1. If loading is true, return <Skeleton />
2. UserAvatar component doesn't render
3. Expensive computation completely skipped

Key Points

• Early return: Return before unnecessary computation
• Component separation: Extract expensive logic to separate component
• Use memo(): Skip re-render if props are same
• useMemo inside: Only for detailed computations within component

React Compiler Note

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

Use Cases

• Components with expensive computations
• Conditional rendering scenarios
• Complex data transformations
• Heavy SVG or Canvas rendering

---

Tags: rerender, memo, useMemo, optimization