☰

useState 初期値を関数として使用するのはいつですか? 質問する

tag-icon • tag-icon reactjs react-hooks
useState 初期値を関数として使用するのはいつですか? 質問する

useStateの初期値を関数として使用する場合はどうなりますか？
値を渡すだけの場合と何か違いはありますか？

例えば

const [state, setState] = useState(() => someValue)

ベストアンサー1

初期状態の計算を実行したいときに使用します1回だけ。

なぜなら、代わりに次の表現を使うと、

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

React は最初の結果をcompute()一度保存​​し、次のレンダリングではそれを無視します。しかし、compute関数は各レンダリングで呼び出され続けます。これは無駄になる可能性があります。

代わりに関数を渡すと、関数は 1 回だけ呼び出されます。

からドキュメント:

const [state, setState] = useState(initialState);

initialState 引数は、最初のレンダリング中に使用される状態です。以降のレンダリングでは無視されます。初期状態が高価な計算の結果である場合は、代わりに最初のレンダリングでのみ実行される関数を提供することができます。

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

useStateまた、質問のように関数を引数として渡す場合は、特定の条件を満たす必要があります。要件:

関数を として渡すとinitialState、初期化関数として扱われます。これは純粋で、引数を取らず、任意の型の値を返す必要があります。React はコンポーネントを初期化するときに初期化関数を呼び出し、その戻り値を初期状態として保存します。

おすすめ記事