rerender-lazy-state

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

}

function UserProfile() {

// JSON.parse runs on every render

const [settings, setSettings] = useState(

JSON.parse(localStorage.getItem('settings') || '{}')

)

return

}

```

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

}

function UserProfile() {

// JSON.parse runs only on initial render

const [settings, setSettings] = useState(() => {

const stored = localStorage.getItem('settings')

return stored ? JSON.parse(stored) : {}

})

return

}

```

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.