Agent-Skills.md

Agent Skills: rerender-memo

Extract expensive work into memoized components with React.memo. Apply when components perform expensive computations that can be skipped when props haven't changed.

ID: theorcdev/8bitcn-ui/rerender-memo

Repository

theorcdev/8bitcn-ui
TheOrcDevLicense: MIT
2,036117

Install this agent skill to your local

npx skills add theorcdev/8bitcn-ui --skill rerender-memo

Skill Files

The files that make up rerender-memo.

Download Skill

Loading file tree…

.claude/skills/rerender-memo/SKILL.md

Skill Metadata

Name
rerender-memo
Description
Extract expensive work into memoized components with React.memo. Apply when components perform expensive computations that can be skipped when props haven't changed.

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.

More agent skills