🙌

なんとなく理解するReact Hooks

2023/08/13に公開

Hooksをざっと把握中

1. useState

ステートの値が更新されることで、差分描画で再レンダリングする。

ステートの値を子コンポーネントに渡して、再レンダリングする。

2. useEffect

副作用フックといい、「〇〇が✗✗後に読み出す...」といったことが可能

3. useContext

propsをバケツリレーで渡さなくても下の階層で
Contextに収容されているデータにアクセスできる。

4. useRef

指定した要素の情報を参照する(DOMを参照する)
またuseRefでは、useStateのようにコンポーネント内での値を保持することが可能

5. useReducer

useStateでもほぼ同じ処理を実現できる。
しかし、stateが複数の値にまたがるような複雑なロジックがある場合や
前回のstateに基づいてstateを更新する場合などに力を発揮する。(一旦なんとなくの理解でOK)

6. useMemo

必要なときだけ処理を実行して、
必要がないときは処理が走らないようにメモ化する。
メモ化した場合は値をメモリーに保存する。
実用例としてはパファーマンスを上げたい場合などに使用する?

7. カスタムフック

処理をコンポーネントに直接書くのではなく、別ファイルに切り出して
新しいHooksとして定義した関数のことをカスタムフックという。
今回はボタンを押したらローカルストレージに値を保存するカスタムフックを実装。

Discussion