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

[innerstella]

📝 vercel note

연산 비용이 큰 작업을 메모이제이션된 컴포넌트로 추출
-> 실제 연산이 수행되기 전에 early return 가능하도록 처리

잘못된 예

function Profile({ user, loading }: Props) {
  const avatar = useMemo(() => {
    const id = computeAvatarId(user);
    return <Avatar id={id} />;
  }, [user]);

  if (loading) return <Skeleton />; // ❌ 로딩 중에도 avatar 연산이 수행됨
  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 />;

  // ⭕️ 로딩이 완료된 이후에 UserAvatar 가져옴
  return (
    <div>
      <UserAvatar user={user} />
    </div>
  );
}