[React Hook] useState

React界隈は、useが付いたものを本当に好むのが奇妙だ

useServer、useCallback、useState、useMemoなど

カスタムフックもすべてuseが付いている

どこから始まったんだろうか

useStateは有名なフックです。

状態値を保存し、変更されると再レンダリングします。非常にシンプルです。

誰もが知っているあの例です。

状態値が変更されると再レンダリングされると言いましたが、再レンダリングされるスコープはどうなるのでしょうか？

pタグだけ？それとも、buttonタグまで？

答えは、useStateが呼び出されたコンポーネント全体です。

ExampleComponentを再レンダリングしますが

仮想DOMを使用して値を比較し、他の場所のみDOMを変更すると言われています。

useStateは、毎回のレンダリング時に呼び出されますが、どのように値が保持されるのでしょうか？

これは、useStateの構造から答えが出てきます。

上記のコードは、実際のReact useStateコードです。

グローバルオブジェクトからdispatcherを取得してuseStateを呼び出します。

これだけでは、構造が理解できません。

さらに詳しく見てみると、次のコードが出てきます。

hookを取得し、set関数を直接hookにあるqueueにバインドして渡します。

(bindは既存の関数にthisをバインディングし、残りの引数はその関数の引数として使用し、thisがバインディングされた新しい関数を返します)

これだけでは、理由は分かりません。

もう少し詳しく見てみましょう

初期値を毎回割り当てているのが分かります。こうなると、stateが保持されることが説明できません。

もう少し詳しく見てみましょう。hookが何か怪しいです。

currentlyRenderingFiberとworkInProgressHookはグローバル変数です。

右側から割り当てが始まることを利用して、リンクリストを実装した形です。

そのため、フックを調べてみると、次の構造になると予想されます。

先頭に値が追加されていく様子です。

それでも説明がつかないため、他のuseStateの実装を見てみた結果

すべてmountStateを呼び出しているのではなく、再レンダリングされる場合にupdateState、rerenderStateを呼び出していることが分かりました。

したがって、構造は上記の通りであり、イベントに合わせて他の関数が呼び出されるということです。

直接コードを見たい場合は、react/packages/react-reconciler/src/ReactFiberHooks.jsを参照してください。