Lazy initial state - What it is and how to use it?

Question

I am new to react Hooks. Am trying to make use of useState in my code. While I was using it I found a term "Lazy initial state"

https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

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

But I am not able to think of any use case where this lazy initialising of state will be useful.

Like say my DOM is rendering and it needs the state value, but my useState has not initialised it yet! And say if you have rendered the DOM and the someExpensiveComputation has finished, the DOM will re-render!

Answer 1

The value passed to the useState hook in the initial render is the initial state value, and gets disregarded in subsequent renders. This initial value can be the result of calling a function as in the following situation:

const Component = () => {
  const [state, setState] = useState(getInitialHundredItems())
}

But note that getInitialHundredItems is unconditionally and needlessly called on each render cycle.

For use cases like this instead of just calling a function that returns a value you can pass a function which returns the initial state. This function will only be executed once (initial render) and not on each render like the above code will. See Lazy Initial State for details.

const Component = () =>{
  const [state, setState] = useState(getInitialHundredItems)
}