rerender-memo

メモ化コンポーネントへの切り出し

重い処理をメモ化コンポーネントに切り出すと、計算を行う前に早期リターンできるようになります。

誤り（読み込み中でもアバターを計算します）：

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

正しい例（読み込み中は計算をスキップします）：

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

注： プロジェクトで React Compiler が有効になっている場合、memo() と useMemo() による手動のメモ化は不要です。コンパイラーが再レンダリングを自動的に最適化します。