⛰️

React Hooks

2022/10/05に公開約2,500字

Hooks

Hooksとは、React16.8で追加された新機能になります。
クラスコンポーネントでしか使えなかった、stateやライフサイクルが関数コンポーネントでも使用することができるようになりました。
フックとは、React16.8で追加された新機能。
関数コンポーネントにstateやライフサイクルといったReactの機能を接続するための関数のこと

注意点

フックを呼び出すのはトップレベルのみ
フックを条件分岐等で呼び出さない
フックは、呼び出される順番で状態を管理している
毎回同じ順番で呼び出されないとバグの原因になる

UseState

const [count, setCount] = useState<T>(初期値);

コンポーネント内で状態管理を行いたい変数をuseStateを使って宣言します。
保持したいstateと、stateを更新するメソッドを指定することでuseStateを使用することができます。

UseEffect

useEffect(() => {
  console.log('第1引数には実行させたい副作用関数を記述')
},[依存する変数の配列]) 

関数コンポーネント内で副作用を実行するためのフック
副作用とは、UIの構築以外の処理のことで、APIを用いたデータ取得、リアルタイムでデータが反映される処理等になる。
クリーンアップ関数とは、コンポーネントがアンマウントされる直前に呼び出される関数のこと、メモリリークなどを防ぐことができる。
マウント時のみuseEffect内の処理を行いたい場合やマウント時、特定のstateが変化した際にuseEffect内の処理を行いたい場合に使用する。

クリーンアップ関数が必要になるケース
useEffectが必要となる代表的なユースケースとしてはコンポーネントを呼び出したタイミングで外部 API からリソースを取得したい場合などです。

UseContext

export const UserCount = createContext()

Contextという機能をシンプルに扱えるようにするためのフック
Contextとは、状態と状態を変更するメソッドをアプリ全体で共有するための仕組み。
Contextを用いることで、propsのバケツリレーを回避することができる。

Contextオブジェクト

親子関係にないコンポーネント間で値を共有することができ、Provider、Consumerという2つのコンポーネントを持っている。 createContext()を用いて作成することができる。

Context Provider

Contextオブジェクトが持つコンポーネントの1つで、コンポーネントで囲まれた範囲に値を渡すことができる。

Context Consumer

Contextオブジェクトが持つコンポーネントの1つで、Contextで共有したい値を受け取りたい箇所で使用することができる。

UseReducer

const [state, dispatch] = useReducer(reducer,'初期値')

reducerはstateを更新するための関数で、dispatchは、reducerを実行するための呼び出し関数です。
usestateと同様に、状態を保持するためのフック
より複雑なロジックを用いて、stateを更新したい場合や、前のstateに基づいて次のstateが計算される場合などで使用する。
stateやロジックの数が増えても、state更新の起点がdispatch1つに集約される。

UseCallback

useCallback(callbackFunction, [deps]);

useCallback(コールバック関数, [依存配列]);のように宣言します。
コールバック関数をメモ化することで、コンポーネントの不要な再レンダリングをスキップし、アプリのパフォーマンスを向上させるためのフック
メモ化とは、プログラムの高速化のための最適化技法の一種で、Reactではコンポーネントや関数の結果等をメモ化することで、コンポーネントに変更がない場合に余計なレンダリングがされないようにすることができる。
React .memoと共に使用する。React .memoとは、コンポーネントをメモ化する関数で、コンポーネントの再レンダリングをスキップすることができる。

UseMemo

const memoizedValue = useMemo<Type>(() => computeExpensiveFunction(a, b), [a, b]);

関数の結果をメモ化することで、不要な再計算をスキップし、アプリのパフォーマンスを向上させるためのフック
重い処理が走る関数は、UseMemoを用いて計算結果をメモ化する。それにより、関数の処理に関係ない状態が変更され、ページの再レンダリングが行われた際に重い処理がスキップされ、アプリのパフォーマンスが向上する。
UseCallbackとの違いは、UseCallbackは、関数自体をメモ化する。UseMemoは、関数の結果をメモ化する。

UseRef

const refObject = useRef(initialValue)
const value = refObject.current;

関数コンポーネント内でRefを作成し、利用できるようにするためのフック
Refとは、DOMノードやReactの要素にアクセスする機能のこと。
UseState同様に変数に値を保持することもできる、違いとしては、UseStateは、値が更新されると再レンダリングされるが、UseRefは、値が更新されても再レンダリングされない。

Discussion

ログインするとコメントできます