useState lazy initialization

useStateは初期レンダリングでのみ実行される。 
以下の例題は、初期にcount状態変数が0になり、ボタンイベントが発生するたびに、関数本文が実行され、その中のすべてのコードも実行される。 useStateもレンダリング度に実行されるが、結局は無視される。

 

function Counter() {
  const initialState = 0
  const [count, setCount] = React.useState(initialState)
  return <button onClick={increment}>{count}</button>
}

 

しかし、二番目のように初期の計算にかなり多くの費用が発生する場合なら?! I/O出力に時間がかかる場合は？？
この時に導入できるのがuseState(関数)、つまり関数を入れて初期化価を定めることがuseState lazy initializationだ。初期レンダリング以後には無視される！！

 

const initialState = calculateSomethingExpensive(props)
const [count, setCount] = React.useState(initialState)

const getInitialState = () => calculateSomethingExpensive(prop)
const [count, setCount] = React.useState(getInitialState)

 

https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates