LoginSignup
0
0

Hooksをざっと把握

Posted at

1. useState

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

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

2. useEffect

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

3. useContext

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

4. useRef

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

5. useReducer

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

6. useMemo

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

7. カスタムフック

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0