mcpField
R
rerender-memo

rerender-memo

github.com/theorcdevDevelopment2.1k37 installsUpdated 2d ago
Repository

About rerender-memo

A React rendering skill for extracting expensive work into memoized components, helping developers skip computation during early returns. It notes that React Compiler can make manual memoization unnecessary.

Key features

  1. 01Extract expensive work into memoized components
  2. 02Allow early returns before computation
  3. 03Account for React Compiler optimization

Use cases

  1. 01Avoid avatar work while a profile is loading
  2. 02Structure components with deferred computation

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill rerender-memo

After installing, type/rerender-memoin Claude Code to confirm it loaded.

Details

From the project README

Extract to Memoized Components

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

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

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

Comments

Markdown supported