第4章: コンポーネントとHooks — Reactの心臓部

// 関数コンポーネントの基本形
function Greeting({ name }: { name: string }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

// アロー関数でも記述可能
const Greeting = ({ name }: { name: string }) => (
  <h1>こんにちは、{name}さん！</h1>
);

// Propsの型定義と分割代入
interface UserCardProps {
  name: string;
  role: string;
  avatarUrl?: string; // オプショナル
}

function UserCard({ name, role, avatarUrl }: UserCardProps) {
  return (
    <div className="user-card">
      {avatarUrl && <img src={avatarUrl} alt={name} />}
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

function Card({ children, title }: { children: React.ReactNode; title: string }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// 使用例
<Card title="お知らせ">
  <p>この中身がchildrenとして渡されます。</p>
</Card>

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      {/* 前の値を元に更新する場合は関数形式を使う */}
      <button onClick={() => setCount(prev => prev + 1)}>+1 (関数形式)</button>
    </div>
  );
}

import { useReducer } from 'react';

type State = { count: number; step: number };
type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'setStep'; payload: number };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + state.step };
    case 'decrement':
      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload };
  }
}

function StepCounter() {
  const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 });

  return (
    <div>
      <p>カウント: {state.count}（ステップ: {state.step}）</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

import { useState, useEffect } from 'react';

function ChatRoom({ roomId }: { roomId: string }) {
  const [messages, setMessages] = useState<string[]>([]);

  useEffect(() => {
    // セットアップ: 接続を確立
    const connection = createConnection(roomId);
    connection.on('message', (msg) => {
      setMessages(prev => [...prev, msg]);
    });

    // クリーンアップ: 接続を切断
    return () => {
      connection.disconnect();
    };
  }, [roomId]); // roomIdが変わったら再接続

  return <ul>{messages.map((m, i) => <li key={i}>{m}</li>)}</ul>;
}

// NG: useEffectで派生データを計算
const [items, setItems] = useState([]);
const [filteredItems, setFilteredItems] = useState([]);

useEffect(() => {
  setFilteredItems(items.filter(item => item.active));
}, [items]);

// OK: レンダリング中に直接計算（useEffect不要）
const [items, setItems] = useState([]);
const filteredItems = items.filter(item => item.active);

import { useState, useEffect } from 'react';

function useLocalStorage<T>(key: string, initialValue: T) {
  // 初期値をlocalStorageから読み取り
  const [value, setValue] = useState<T>(() => {
    try {
      const stored = localStorage.getItem(key);
      return stored ? JSON.parse(stored) : initialValue;
    } catch {
      return initialValue;
    }
  });

  // 値が変わるたびにlocalStorageへ保存
  useEffect(() => {
    try {
      localStorage.setItem(key, JSON.stringify(value));
    } catch {
      // localStorageが使えない場合は無視
    }
  }, [key, value]);

  return [value, setValue] as const;
}

// 使用例
function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'dark');
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      現在: {theme}
    </button>
  );
}

// NG: 3秒後に表示されるのは常にクリック時のcountの値
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      // このcountはクリック時の値（古い値）
      alert('count: ' + count);
    }, 3000);
  };

  return <button onClick={handleClick}>count: {count}</button>;
}

// OK: useRefで最新値を参照する
function Counter() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count; // 毎レンダリングで最新値を反映

  const handleClick = () => {
    setTimeout(() => {
      alert('count: ' + countRef.current); // 常に最新値
    }, 3000);
  };

  return <button onClick={handleClick}>count: {count}</button>;
}

// NG: 無限ループ
useEffect(() => {
  setCount(count + 1); // State更新 → 再レンダリング → Effect再実行 → ...
}, [count]);

// NG: オブジェクトを依存配列に（毎回新しい参照）
const options = { method: 'GET' };
useEffect(() => {
  fetch('/api', options);
}, [options]); // optionsは毎レンダリングで新しいオブジェクト

// OK: useMemoで参照を安定化
const options = useMemo(() => ({ method: 'GET' }), []);
useEffect(() => {
  fetch('/api', options);
}, [options]);