memo()

memo() は「状態」を子コンポーネントに渡している場合の再レンダリング防止で使う。親コンポーネントとセットで考える。

"use client";
import React from "react";

export default function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <List items={[...]} />
    </div>
  );
}

// 重いリストレンダリング
const List = React.memo(({ items }: { items: string[] }) => {
  console.log("HeavyList rendered");
  return (
    <ul>
      {items.map((i) => (
        <li key={i}>{i}</li>
      ))}
    </ul>
  );
});

親側のset関数で親が再レンダリングされても重いitems配列を表示する <List /> コンポーネントは再レンダリングされない

useCallback()

useCallback() は「状態」ではなく「親側で定義した関数」をpropsとして渡す場合に使う。子コンポーネントとセットで考える。

memo() で関数をpropsで渡すと親コンポーネントが再レンダリングされるとmemo() で囲った子コンポーネントも再レンダリングされてしまう。なぜならpropsとして渡した「関数」自体がレンダリング毎に違うものとして扱われる為（ = 参照が変わる）。状態だけでなくset関数も参照が変わらないので子に渡す場合はmemo() だけで良い。

参照（Reference)：

JavaScript ではオブジェクトや配列、関数は値ではなく「メモリ上の場所」を指している。再レンダリング毎に中身は同じでも新しい関数として扱われる。

export default function TodoList() {
  const [todos, setTodos] = useState([...]);

  const handleRemove = useCallback((title: string) => {
    setTodos((prev) => prev.filter((t) => t !== title));
  }, []);

  return (
    <ul>
      {todos.map((t) => (
        <TodoItem
          key={t}
          title={t}
          onRemove={() => handleRemove(t)}
        />
      ))}
    </ul>
  );
}

const TodoItem = React.memo(
  ({ title, onRemove }: { title: string; onRemove: () => void }) => {
    console.log("render");
    return (
      <li>
        {title} <button onClick={onRemove}>x</button>
      </li>
    );
  }
);

useCallback() の使い方としてはmemo()と組み合わせて使う
子に渡しているhandle関数が親のレンダリング毎に新しい参照を作るので、handle関数を useCallback() で囲む。

useMemo()

useMemo() の方はuseCallback() の「配列やオブジェクト」版とも言えるが、重い計算に使うと覚える。

useCallback() は子コンポーネントの関係で考えるが、 useMemo()は重い計算を行っているコンポーネント単体でも考えることが出来る。

計算に依存関係がある場合：

import React, { useState, useMemo } from "react";

const Parent = () => {
  const [count, setCount] = useState(1);
  const [multiplier, setMultiplier] = useState(2);

  // multiplierが変わったときだけ計算し直す
  const memoizedValue = useMemo(() => {
    console.log("useMemo");
    return count * multiplier;
  }, [count, multiplier]); // ←依存にcountとmultiplierを指定

  return (
    <div>
      <p>メモ化された値: {memoizedValue}</p>
      <button onClick={() => setCount((c) => c + 1)}>count +1</button>
      <button onClick={() => setMultiplier((m) => m + 1)}>multiplier +1</button>
      <ExpensiveComponent value={memoizedValue} />
    </div>
  );
};

export default Parent;

const ExpensiveComponent = ({ value }: { value: number }) => {
  console.log("計算実行");
  // 高コストの計算
  const computed = Array.from({ length: 1000000 }, (_, i) => i * value).reduce(
    (a, b) => a + b,
    0
  );
  return <div>計算結果: {computed}</div>;
};

重い計算結果だけ覚える場合：

import React, { useMemo } from "react";

const Component = () => {
  // 空配列なので初回レンダリング時だけ計算される
  const heavyResult = useMemo(() => {
    console.log("重い計算を実行中…");
    let sum = 0;
    for (let i = 0; i < 1_000_000_000; i++) {
      sum += i;
    }
    return sum;
  }, []); // 依存なし

  return (
    <div>
      <h1>重い計算の結果: {heavyResult}</h1>
    </div>
  );
};

export default Component;

状態によるレンダリング（{show && <Component />}）や <Link> による遷移で、import元の親コンポーネントがアンマウントされると、再度重い計算が実行される。

React：memo化