useState, useEffect, memo, useCallbackがごっちゃになるからメモ

useState

// 宣言方法
const [ count, setCount ] = useState(0);

画面上の値を動的に変えたい時に使う。
あとめっちゃ使う。

setXXXなどで値が変わったら、画面を再レンダリングする。

useEffect

useEffect(() => {
  // 処理を記載
  console.log("処理実行");
}, []);

画面表示時に1回だけ処理を行わせたい時に使う。
第二引数の依存配列[]に値変更を監視したいフィールドを入れると、その値に変化があった場合に処理が再実行される(副作用とかいう)。

memo

import { memo } from "react";

export const ChildApp = memo((props) => {
  // 処理を記載
  return ();
});

コンポーネント再レンダリング最適化をしたいときに使う。
コンポーネントのpropsからmemo()で囲ってあげる。

こうすることで、親コンポーネントが再レンダリングされてもmemoで囲ったコンポーネントのpropsの値が変わらない限り、再レンダリングの影響を受けなくなる(不要な再レンダリングがされなくなる)。

useCallback

import { useCallback } from "react";
import { ChildApp } from "./ChildApp";

export const App () => {
  const addTodo = useCallback(() => {// 処理});

  return (
    <div>
      <h1>Hello, World!</h1>
      <ChildApp addTodo={addTodo} />
    </div>
  );
};

memoの説明で、「memoで囲ったコンポーネントは、親から渡されるpropsが変更されない限り再レンダリングされない」と書いたけど、propsに関数を渡す場合、なぜか再レンダリングされてしまう。

理由は、子コンポーネントに渡す関数は、「毎回新しい関数」扱いで渡ってくるため、memoで囲っていてもpropsに渡ってきた関数は新しいやつ扱い（propsの変更扱い）されるからmemo の再レンダリング制御が効かなくなる。

そこで、親コンポーネントで記載した子コンポーネントに渡す関数をuseCallback()で囲ってあげると関数の再生成判断がされなくなり、子コンポーネントの再レンダリング制御が可能になる。

memoとuseCallback()はセットで覚えた方が良いと思う。