■P130

────────────────
const Parent = (a, b) => {
  return a + b;
};
────────────────


■P131

────────────────
let total = 0;

const Sum = (value) => {
  total += value;
  return total;
};
────────────────

────────────────
const Greeting = (props) => {
  return <p>Hello, {props.name}!</p>;
};

const App = () => {
  return <Greeting name="world" />;
};

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


■P132

────────────────
let count = 0;

const NonPureCounter = () => {
  // レンダリング時にcountを直接変更している
  count += 1;
  return <p>カウント: {count}</p>;
};

const Counters = () => {
  return (
    <div>
      <NonPureCounter />
      <NonPureCounter />
      <NonPureCounter />
    </div>
  );
};

export default Counters;
────────────────


■P133

────────────────
const PureCounter = ({ count }) => {
  // 受け取ったcountをそのまま表示するだけ
  return <p>カウント: {count}</p>;
};

const Counters = () => {
  return (
    <div>
      {/* 必要な値を明示的にpropsとして渡す */}
      <PureCounter count={1} />
      <PureCounter count={2} />
      <PureCounter count={3} />
    </div>
  );
};

export default Counters;
────────────────


■P134

────────────────
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)
────────────────


■P135

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

const NonPureInput = () => {
  const [, setRenderCount] = useState(0);

  const inputElement = document.getElementById("my-input");

  const handleRender = () => {
    // ステートを更新し再レンダリングを引き起こす
    setRenderCount((prev) => prev + 1);
  };

  // コンポーネントのトップレベルに副作用をともなう処理がある
  if (inputElement) {
    inputElement.focus();
  }

  return (
    <div>
      <input id="my-input" />
      <button onClick={handleRender}>再レンダリング</button>
    </div>
  );
};

export default NonPureInput;
────────────────


■P136

────────────────
useEffect(setup, dependencies);
────────────────


■P137

────────────────
const MyComponent= (props) => {
  const propsValue = props.value;
  const localValue = "ローカル変数";

  useEffect(() => {
    console.log(
      "${propsValue}または${localValue}が変化したときに実行される",
    );
  }, [propsValue, localValue]);

  …省略…
};
────────────────

────────────────
useEffect(() => {
  console.log("初回レンダリング後に一度だけ実行される");
}, []);
────────────────


■P138

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

const NonPureInput = () => {
  const [, setRenderCount] = useState(0);

  const inputElement = document.getElementById("my-input");

  const handleRender = () => {
    // ステートを更新し再レンダリングを引き起こす
    setRenderCount((prev) => prev + 1);
  };

  // コンポーネントのトップレベルに副作用をともなう処理がある
  if (inputElement) {
    inputElement.focus();
  }

  return (
    <div>
      <input id="my-input" />
      <button onClick={handleRender}>再レンダリング</button>
    </div>
  );
};

export default NonPureInput;
────────────────


■P139

────────────────
import { useEffect, useRef } from "react";

const PureInput = () => {
  // useRefでテキストフィールドへの参照を取得
  const inputRef = useRef(null);

  useEffect(() => {
    // コンポーネントが初回レンダリングされた後に副作用としてフォーカスを設定
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return <input ref={inputRef} />;
};

export default PureInput;
────────────────


■P140

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

const WindowSize = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    // リサイズ時にウィンドウの幅を更新するイベントハンドラー
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    // ウィンドウのリサイズイベントを登録
    window.addEventListener("resize", handleResize);
  }, []);

  return (
    <div>
      <p>ウィンドウの幅: {width}px</p>
    </div>
  );
};

export default WindowSize;
────────────────


■P141

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

const WindowSize = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    // リサイズ時にウィンドウの幅を更新するイベントハンドラー
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    // ウィンドウのリサイズイベントを登録
    window.addEventListener("resize", handleResize);

    // クリーンアップ関数を返すことで、コンポーネントがアンマウントされる前にイベントリスナーを解除する
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return (
    <div>
      <p>ウィンドウの幅: {width}px</p>
    </div>
  );
};

export default WindowSize;
────────────────


■P143

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

const Counter = () => {
  const [count, setCount] = useState(0);
  const [double, setDouble] = useState(0);

  // countの変更に応じてdoubleを更新する
  useEffect(() => {
    setDouble(count * 2);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Double: {double}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>
        カウントを増やす
      </button>
    </div>
  );
};

export default Counter;
────────────────


■P144

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

const Counter = () => {
  const [count, setCount] = useState(0);
  const double = count * 2; // レンダリング中に直接計算する

  return (
    <div>
      <p>Count: {count}</p>
      <p>Double: {double}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>
        カウントを増やす
      </button>
    </div>
  );
};

export default Counter;
────────────────

