userState遅延初期状態(lazy state initialization);

Lazy initialization 🥱

＜遅延初期状態＞

応答では、特定の関数または実行時間の長い高価な演算が必要な場合、useCallbackまたはuseMemoを使用して最適化されます.
このブログでは,usStateを用いて初期状態値を割り当てる際に,高価な演算を行う必要がある関数useState(expensiveFunction())をまとめ,このようにパラメータに直接伝達する際に遭遇する問題と解決策をまとめた.

// Greeting 컴포넌트
const GreetingComponent = (props) => {
  
 const getLocalStorageValue = () => {
    return window.localStorage.getItem('name') || initialName
  }
  
 const [name, setName] = useState(getLocalStorageValue())

 React.useEffect(() => {
  window.localStorage.setItem('name', name)
  }, [name])

 return (
    <div>
      <form>
        <label htmlFor="name">Name: </label>
        <input value={name} onChange={handleChange} id="name" />
      </form>
      {name ? <strong>Hello {name}</strong> : 'Please type your name'}
    </div>
  )
}

例🕵️‍♀️

ユーザーがInputウィンドウに名前を入力すると、入力値をname値に更新し、Hello{name}を使用してユーザーが入力した名前の単純なコンポーネントを画面に描画します.

ユーザーが最後に入力した値をリフレッシュ後も画面に描画できるように、userEffectの依存値nameを設定し、name値の変化が検出された場合はlocalStorageに保存します.

構成部品が再ロードされると、userStateはgetLocalStorageValue()関数を使用してローカルストレージ値を初期名前値に設定します.

何か問題がありますか。

  const getLocalStorageValue = () => {
    console.log('i am an expensive function!!')
    return window.localStorage.getItem('name') || initialName
  }

このようにgetLocalStorageValue()関数のドキュメントを撮影すると、入力されたInputウィンドウに入力された名前の値が変化したときに実行されることがわかります.

コンポーネントの初期実行時にローカルストレージから値を1回取得するだけで、再レンダリングのたびに不要な関数が実行されます.

useState(()=> getLocalStorageValue())

高コスト計算を初期初期状態値に渡し、ユーザー状態を関数に変更する必要がある場合は、この関数は構成部品の最初のロード時にのみ実行され、その後の再ロードの場合は再実行されません.