web-dev-qa-db-ja.com

useStateは同期ですか？

これまで、setState({myProperty})の呼び出しは非同期であり、_this.state.myProperty_の値はコールバックまで、または次のrender()メソッドまで有効ではないことを明示的に警告してきました。

seStateを使用して、明示的に更新した後の状態の値を取得するにはどうすればよいですか？

これはフックでどのように機能しますか？私の知る限り、useStateのセッター関数はコールバックを受け取りません。

_const [value, setValue] = useState(0);
setValue(42, () => console.log('hi callback');
_

コールバックは実行されません。

古い世界での私の別の回避策は、インスタンス変数_(e.g. this.otherProperty = 42)_をクラスにぶら下げることですが、再利用する関数インスタンスがないため、ここでは機能しません（厳密モードではthisがありません）。 。

javascriptreactjsreact-hooks
50
AnilRedshift

useEffect を使用して、更新後に最新の状態にアクセスできます。複数の状態フックがあり、それらの一部のみの更新を追跡する場合は、useEffect関数の2番目の引数として配列で状態を渡すことができます。

useEffect(() => { console.log(state1, state2)}, [state1])

上記のuseEffectは、state1が更新されたときにのみ呼び出され、最新ではない可能性があるため、この関数内のstate2値を信頼しないでください。

useStateによって作成された更新関数が同期的であるかどうかに興味がある場合、つまりReactがフックを使用するときに状態更新をバッチ処理する場合、 この答え を提供する場合それへのいくつかの洞察。

34
Claire Lin

まあ、あなたが関連する docs を参照すると、あなたは見つけるでしょう...

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

ステートフルな値とそれを更新する関数を返します。

最初のレンダリング中に返される状態（state）は、最初の引数として渡された値（initialState）と同じです。

SetState関数は、状態を更新するために使用されます。新しい状態値を受け入れ、コンポーネントの再レンダリングをキューに入れます。

setState(newState);

その後の再レンダリングでは、useStateによって返される最初の値は、更新を適用した後の最新の状態になります。

つまり、新しい状態は何であれ、useStateに設定したばかりの状態、つまりinitialStateの値になります。それはstateに直接行き、その後反応的に更新されます。関連する docs からさらに引用する：

UseStateを呼び出すとどうなりますか？ 「状態変数」を宣言します。私たちの変数はcountと呼ばれていますが、バナナのように他の何でも呼び出すことができます。これは、関数呼び出し間で一部の値を「保持」する方法です。useStateは、this.stateがクラスで提供するものとまったく同じ機能を使用する新しい方法です。通常、変数は関数が終了すると「消えます」が、状態変数はReactによって保持されます。

状態が更新されるたびに何かを実行したい場合は、componentDidUpdateを使用します。（ドキュメント）

3
benas