フックを簡単にまとめてみる【React】

React

2023.07.13

はじめに
前提条件
useEffect
useLayoutEffect
useState
useReducer
useMemo
useCallback
おわりに

はじめに

前回は useEffect の使い方について説明しました。

今回はフックについてまとめようとおもいます。

前提条件

前提条件は以下の通りです。

Windows11
React がインストールされている
react-create-app を使用してパッケージが作成されている

useEffect

useEffect(() => {
  // ここに処理を記述
},[])

UI の描画後に処理を実行することができる。[] を使用することで描画時一度のみ実行することができる。

useLayoutEffect

useLayoutEffect(() => {
  // ここに処理を記述
},[])

UI の描画前に処理を実行することができる。[] を使用することで描画前一度のみ実行することができる。

useEffect の処理タイミングよりも少し早い。

useState

const [checked, setChecked] = useState(false);

変数を管理することができます。

setChecked(true);
を実行することで checked 変数の中身を変更することができます。

useState を使用することでどこからでも任意のタイミングで変数の中身を変更することができます。

useReducer

const [checked, toggle] = useReducer(checked => !checked, false);

return (
  <>
    <input type="checkbox" value={checked} onChange={toggle} />
  </>
);

useReducer で toggle を宣言しておくと、toggle を呼び出すだけで、!checked を checked 変数に格納することができます。

関数を簡略化できます。
さらに、他にも沢山使い道があるそうなので、是非調べてみてください。

useMemo

const words = useMemo(() => children.split(" "), [children]);

上記は、children が変化しない限り Strign.split が呼び出されることはありません。

useMemo は変数に対してキャッシュを使用します。

useCallback

const fn = useCallback(() => {
  // ここに処理を記述
}, []);

useMemo と同様に依存配列に変化がない限り、呼ばれることはありません。

useMemo は関数に対してキャッシュを使用します。

おわりに

今回は各フックの簡単な使い方について説明しました。

次回は、データのやり取りについて説明できればと思います。