🎯

rerender-memo

🎯Skill

from theorcdev/8bitcn-ui

What it does

rerender-memo skill from theorcdev/8bitcn-ui

📦

Part of

theorcdev/8bitcn-ui(23 items)

rerender-memo

Installation

📋 No install commands found in docs. Showing default command. Check GitHub for actual instructions.

Quick InstallInstall with npx

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

Need more details? View full documentation on GitHub →

12Installs

1,576

Last UpdatedJan 22, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

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

```tsx

function Profile({ user, loading }: Props) {

const avatar = useMemo(() => {

const id = computeAvatarId(user)

return

}, [user])

if (loading) return

return

{avatar}

}

```

Correct (skips computation when loading):

```tsx

const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {

const id = useMemo(() => computeAvatarId(user), [user])

return

})

function Profile({ user, loading }: Props) {

if (loading) return

return (

)

}

```

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