017 - React useState(func())

To initialize state with a computation that should only run once, pass a function to useState.

const [state, setState] = useState(compute())

This ensures the function is called only during the component’s initial render.

Docs

The initialState parameter is used only for the first render. For subsequent renders, React ignores it. If calculating the initial state is resource-intensive, consider providing a function.

This function will be executed solely during the initial render, optimizing performance:

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props)
  return initialState
})

Thanks

• Hooks API Reference
• When to use useState initial value as function?