「React Hooks 入門」の感想・備忘録

スポンサーリンク
posted with ヨメレバ
Amazon

点数

74点

感想

Reactのフックだけに絞った内容であり、それぞれのフックの説明とサンプルが記載されていた。

useStateとuseEffectを使い、他のフックはパフォーマンスなどに問題がある場合のみ使う、というのが大まかな使い方となっていた。

useState

  • 配列やオブジェクトの場合、stateの更新はstateをコピーしたものを新しい値としてセットする。
  • stateを1つのオブジェクトにまとめるべきか個別にするべきかは、どちらでも良い。
    管理しやすい方法を自分で考える。

useEffect

  • APIとの通信、非同期処理など、コンポーネントのレンダリング後やアンマウント後に実行したい処理を定義する。
  • 関数をreturnすると、その関数はuseEffectが再実行された時、またはコンポーネントがアンマウントされた時に実行される。

useRef

用途

  1. DOMの参照
    const inputElement = useRfe(null);
    として
    <input ref={inputElement} type="text>
    とすると
    inputElement.current.foucs()
    のようにアクセスすることができる。
  2. useStateを使いたいが再レンダリングはさせたくない場合。
    ※ useStateで実装できるのであればuseRefを使うべきではない

useStateと異なる点

  1. 値はcurrentプロパティを参照・更新する。
  2. 値を更新してもコンポーネントの再レンダリングは行われない。

React.memo

  1. React.memoはコンポーネントをメモ化するためのReactのAPIであり、再レンダリングをスキップすることができる。
  2. propsの値が前回と同じであれば、React.memoは再レンダリングせずにメモ化したコンポーネントを再利用する。

以下の場合にだけ使うべき。

  1. レンダーコストが高い。
  2. 頻繁に再レンダリングされるコンポーネント内の子コンポーネント。

useCallback

  • React.memoでメモ化されたコンポーネントにpropsとして関数を渡す場合に使う。
    useCallbackを使わないと、毎回再レンダリングされてしまう。

以下の場合はuseCallbackを使う意味がないので注意が必要である。

  1. React.memoでメモ化していないコンポーネントにuseCallbackでメモ化した関数を渡す。
  2. useCallbackでメモ化した関数を、それを生成したコンポーネント自身で利用する。

useMemo

  • 値の生成に膨大なコストがかかる場合に使うものだが、メモ化自体のコストが発生するため使用することはあまりない。

useReducer

  • useReducerはuseStateと同じような機能を持つ。
  • 複雑なstateを扱う時はuseStateではなくuseReducerを使うべき。
    ただし、useStateで事足りるのであれば、useReducerを使う必要はない。
  • 以下のような場合は、useReducerを使うと良いとされている。
    理由はstate更新ロジックをreducerに集約でき、窓口をdispatchに集約できるから。
    • stateを更新するのに別のstateを参照する必要がある。
    • stateを更新したら別のstateも更新する必要がある。
  • useReducerはstateとdispatch(stateを更新するための関数)を返す。
    const [state, dispatch] = useReducer(reducer, stateの初期値);
  • reducerが新しいstateをreturnすると、コンポーネントは再レンダリングされる。

例

import {userReducer} from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {count: state.count + 1};
  }
}
const App = () => {
  const [state, dispatch] = useReducer(reducer, {count: 0});
  return (
    <>
    <p>count: {state.count}</p>
    <button onClick={()=>dispatch({type: 'INCREMENT'})}>+</button>
    </>
  )
}

useContext

  • Contextの値を取得するためのフック。
  • Providerのvalueが更新されると、Provider内のすべてのConsumerは再レンダリングされるので注意が必要。
    Contextオブジェクトを複数に分割するなどで再レンダリングを防ぐことができるが、パフォーマンスに問題がなければ考慮しなくて良い。
スポンサーリンク

コメント