ReddRadar
Agent skill
rerender-lazy-state
Use lazy state initialization with useState function form. Apply when computing expensive initial values like building search indexes, parsing JSON, or complex calculations.
Install this agent skill to your Project
npx add-skill https://github.com/TheOrcDev/8bitcn-ui/tree/main/.claude/skills/rerender-lazy-state
SKILL.md
Use Lazy State Initialization
Pass a function to useState for expensive initial values. Without the function form, the initializer runs on every render even though the value is only used once.
Incorrect (runs on every render):
function FilteredList({ items }: { items: Item[] }) {
// buildSearchIndex() runs on EVERY render, even after initialization
const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
const [query, setQuery] = useState('')
// When query changes, buildSearchIndex runs again unnecessarily
return <SearchResults index={searchIndex} query={query} />
}
function UserProfile() {
// JSON.parse runs on every render
const [settings, setSettings] = useState(
JSON.parse(localStorage.getItem('settings') || '{}')
)
return <SettingsForm settings={settings} onChange={setSettings} />
}
Correct (runs only once):
function FilteredList({ items }: { items: Item[] }) {
// buildSearchIndex() runs ONLY on initial render
const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
const [query, setQuery] = useState('')
return <SearchResults index={searchIndex} query={query} />
}
function UserProfile() {
// JSON.parse runs only on initial render
const [settings, setSettings] = useState(() => {
const stored = localStorage.getItem('settings')
return stored ? JSON.parse(stored) : {}
})
return <SettingsForm settings={settings} onChange={setSettings} />
}
Use lazy initialization when computing initial values from localStorage/sessionStorage, building data structures (indexes, maps), reading from the DOM, or performing heavy transformations.
For simple primitives (useState(0)), direct references (useState(props.value)), or cheap literals (useState({})), the function form is unnecessary.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
TheOrcDev/8bitcn-ui
component-wrapper-architecture
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
TheOrcDev/8bitcn-ui
registry-component-patterns
Register components in registry.json for shadcn/ui add command. Apply when adding new 8-bit components to the component library.
TheOrcDev/8bitcn-ui
retro-css-architecture
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.
TheOrcDev/8bitcn-ui
gaming-ui-state-management
Patterns for game-like interfaces - health bars, XP bars, mana bars. Apply when building RPG/retro gaming UI components with state-driven visuals.
TheOrcDev/8bitcn-ui
bundle-barrel-imports
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.
TheOrcDev/8bitcn-ui
rendering-hoist-jsx
Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.
Didn't find tool you were looking for?