mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
Tommaso CasaburiandGitHub
a92b185a66
* chore(ai-workflow): track repo-managed review tooling * fix(ai-workflow): remove repo-specific path assumptions Make shared workflow hooks and APK testing guidance resolve paths from the repo and contributor environment so the tooling works for all contributors, not just one machine.
59 lines
2.0 KiB
Markdown
59 lines
2.0 KiB
Markdown
---
|
|
title: Use Lazy State Initialization
|
|
impact: MEDIUM
|
|
impactDescription: wasted computation on every render
|
|
tags: react, hooks, useState, performance, initialization
|
|
---
|
|
|
|
## 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):**
|
|
|
|
```tsx
|
|
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):**
|
|
|
|
```tsx
|
|
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.
|