rerender-memo — how to use rerender-memo how to use rerender-memo, rerender-memo alternative, rerender-memo install, what is rerender-memo, rerender-memo vs react-memo, rerender-memo setup guide, rerender-memo optimization, react rendering optimization, memoized components, useMemo hook

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.