■P146

────────────────
const Child = React.memo(() => {});
────────────────

────────────────
import React from "react";

const Child = React.memo(({ count }) => {
  console.log("Childが再レンダリングされました");
  return <p>カウント: {count}</p>;
});

const Parent = () => {
  const [count, setCount] = React.useState(0);
  const [text, setText] = React.useState("");

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <Child count={count} />
    </div>
  );
};

export default Parent;
────────────────


■P148

────────────────
const handleClick = useCallback(関数, [依存配列]);
────────────────

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

const Child = React.memo(({ onClick }) => {
  console.log("Childが再レンダリングされました");
  return <button onClick={onClick}>子コンポーネントのボタン</button>;
});

const Parent = () => {
  const [count, setCount] = useState(0);

  // 毎回新しい関数が作られる
  const handleClick = () => {
    console.log("ボタンがクリックされました");
  };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
      <Child onClick={handleClick} />
    </div>
  );
};

export default Parent;
────────────────


■P149

────────────────
import React, { useState, useCallback } from "react";

const Child = React.memo(({ onClick }) => {
  console.log("Childが再レンダリングされました");
  return <button onClick={onClick}>子コンポーネントのボタン</button>;
});

const Parent = () => {
  const [count, setCount] = useState(0);

  // useCallback を使って関数をメモ化
  const handleClick = useCallback(() => {
    console.log("ボタンがクリックされました");
  }, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
      <Child onClick={handleClick} />
    </div>
  );
};

export default Parent;
────────────────


■P150

────────────────
import React, { useState, useEffect } from "react";

const Component = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log("ボタンがクリックされました");
  };

  useEffect(() => {
    console.log("useEffect 発火");
  }, [handleClick]);

  return (
    <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
  );
};

export default Component;
────────────────


■P151

────────────────
import React, { useState, useEffect, useCallback } from "react";

const Component = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("ボタンがクリックされました");
  }, []);

  useEffect(() => {
    console.log("useEffect 発火");
  }, [handleClick]); // 関数の参照が変わらないため、useEffectは不要に実行されない

  return (
    <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
  );
};

export default Component;
────────────────


■P152

────────────────
const memoizedValue = useMemo(() => 計算処理, [依存配列]);
────────────────


■P153

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

const items = [
  { id: 1, category: "果物", name: "りんご" },
  { id: 2, category: "野菜", name: "にんじん" },
  { id: 3, category: "果物", name: "バナナ" },
  { id: 4, category: "野菜", name: "キャベツ" },
  { id: 5, category: "果物", name: "いちご" },
  { id: 6, category: "野菜", name: "ねぎ" },
  { id: 7, category: "果物", name: "みかん" },
  { id: 8, category: "野菜", name: "だいこん" },
  { id: 9, category: "果物", name: "パイナップル" },
  { id: 10, category: "野菜", name: "トマト" },
  { id: 11, category: "果物", name: "ぶどう" },
  { id: 12, category: "野菜", name: "レタス" },
  { id: 13, category: "果物", name: "レモン" },
  { id: 14, category: "野菜", name: "きゅうり" },
  { id: 15, category: "果物", name: "スイカ" },
  { id: 16, category: "野菜", name: "ほうれん草" },
  { id: 17, category: "果物", name: "メロン" },
  { id: 18, category: "野菜", name: "じゃがいも" },
  { id: 19, category: "果物", name: "桃" },
  { id: 20, category: "野菜", name: "なす" },
  //大量のデータ
];

const FruitList = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

const App = () => {
  const [text, setText] = useState("");
  const [category, setCategory] = useState("果物");

  const filteredItems = items.filter((item) => item.category === category);  // フィルタリング処理実行

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={() => setCategory("果物")}>果物</button>
      <button onClick={() => setCategory("野菜")}>野菜</button>
      <FruitList items={filteredItems} />
    </div>
  );
};

export default App;
────────────────


■P154

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

const items = [
  { id: 1, category: "果物", name: "りんご" },
  { id: 2, category: "野菜", name: "にんじん" },
  { id: 3, category: "果物", name: "バナナ" },
  { id: 4, category: "野菜", name: "キャベツ" },
  { id: 5, category: "果物", name: "いちご" },
  { id: 6, category: "野菜", name: "ねぎ" },
  { id: 7, category: "果物", name: "みかん" },
  { id: 8, category: "野菜", name: "だいこん" },
  { id: 9, category: "果物", name: "パイナップル" },
  { id: 10, category: "野菜", name: "トマト" },
  { id: 11, category: "果物", name: "ぶどう" },
  { id: 12, category: "野菜", name: "レタス" },
  { id: 13, category: "果物", name: "レモン" },
  { id: 14, category: "野菜", name: "きゅうり" },
  { id: 15, category: "果物", name: "スイカ" },
  { id: 16, category: "野菜", name: "ほうれん草" },
  { id: 17, category: "果物", name: "メロン" },
  { id: 18, category: "野菜", name: "じゃがいも" },
  { id: 19, category: "果物", name: "桃" },
  { id: 20, category: "野菜", name: "なす" },
  //大量のデータ
];

const FruitList = React.memo(({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
});

const App = () => {
  const [text, setText] = useState("");
  const [category, setCategory] = useState("果物");

  const filteredItems = useMemo(() => {
    return items.filter((item) => item.category === category);
  }, [category]);

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={() => setCategory("果物")}>果物</button>
      <button onClick={() => setCategory("野菜")}>野菜</button>
      <FruitList items={filteredItems} />
    </div>
  );
};

export default App;
────────────────

