import { useState, useEffect } from 'react';

export function useClock() {
  const [time, setTime] = useState(() => new Date());

  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  return time;
}

function useWrong(flag) {
  if (flag) {
    // これはルール違反: フックはトップレベルで呼ぶ必要がある
    useEffect(() => console.log('Bad'), []);
  }
}

import { useState, useEffect } from 'react';

export function useFetch(url, options) {
  const [status, setStatus] = useState('idle');  // idle | loading | success | error
  const [data, setData]   = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    let ignore = false;
    const controller = new AbortController();

    async function start() {
      setStatus('loading');
      try {
        const res = await fetch(url, { ...options, signal: controller.signal });
        if (!res.ok) throw new Error(res.statusText);
        const json = await res.json();
        if (!ignore) {
          setData(json);
          setStatus('success');
        }
      } catch (e) {
        if (!ignore) {
          setError(e);
          setStatus('error');
        }
      }
    }
    start();

    return () => {
      ignore = true;
      controller.abort();
    };
  }, [url, JSON.stringify(options)]);

  return { status, data, error };
}

export function useForm(initial) {
  const [values, setValues] = useState(initial);
  const [errors, setErrors] = useState({});

  const onChange = (e) => {
    const { name, value } = e.target;
    setValues(v => ({ ...v, [name]: value }));
  };

  const validate = (rules) => {
    const newErrors = {};
    for (const key in rules) {
      const error = rules[key](values[key]);
      if (error) newErrors[key] = error;
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const reset = () => setValues(initial);

  return { values, errors, onChange, validate, reset };
}

function Signup() {
  const { values, errors, onChange, validate } = useForm({ email: '', pw: '' });

  const handleSubmit = () => {
    if (validate({
      email: v => /@/.test(v) ? '' : 'メールが不正',
      pw: v => v.length >= 8 ? '' : '8文字以上必要'
    })) {
      // 送信
    }
  };
  return (/* JSX */);
}

function usePagination(total, perPage) {
  const pageCount = useMemo(() => Math.ceil(total / perPage), [total, perPage]);
  return pageCount;
}

function useToggle<S extends string>(on: S, off: S) {
  const [state, setState] = useState<S>(off);
  const toggle = () => setState(s => s === on ? off : on);
  return { state, toggle };
}

const { state } = useToggle<'on' | 'off'>('on', 'off');

import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

test('カウンタが増える', () => {
  const { result } = renderHook(() => useCounter());
  act(() => result.current.inc());
  expect(result.current.count).toBe(1);
});

import { useEffect, useRef } from 'react';

export function useEventListener(type, handler, target = window) {
  const saved = useRef();

  useEffect(() => {
    saved.current = handler;
  }, [handler]);

  useEffect(() => {
    const el = target?.current || target;
    if (!el?.addEventListener) return;
    const listener = (e) => saved.current(e);
    el.addEventListener(type, listener);
    return () => el.removeEventListener(type, listener);
  }, [type, target]);
}

function Modal({ onClose }) {
  useEventListener('keydown', e => {
    if (e.key === 'Escape') onClose();
  });
  /* ... */
}

function useSafeAsync(fn, deps = []) {
  const mounted = useRef(true);
  useEffect(() => {
    mounted.current = true;
    fn().catch(console.error);
    return () => (mounted.current = false);
  }, deps);
  const safeSet = updater => {
    if (mounted.current) updater();
  };
  return safeSet;
}

function createUseApi(base) {
  return function useApi(path) {
    return useFetch(base + path);
  };
}
const useGitHub = createUseApi('https://api.github.com');

<Context.Provider value={A}>
  └─ <ChildA />  ← useContext ⇒ A
      └─ <Context.Provider value={B}>
            └─ <ChildB />  ← useContext ⇒ B

function App() {
  const user = { id: 1, name: 'Taro' };
  return <Page user={user} />;
}
function Page({ user }) {             /* ← 中継だけ */
  return <Sidebar user={user} />;
}
function Sidebar({ user }) {          /* ← 中継だけ */
  return <UserProfile user={user} />;
}
function UserProfile({ user }) {
  return <p>{user.name}</p>;          /* ← 本当に必要なのはここだけ */
}

const UserContext = createContext(null);
function App() {
  const user = { id: 1, name: 'Taro' };
  return (
    <UserContext.Provider value={user}>
      <Page />
    </UserContext.Provider>
  );
}
function UserProfile() {
  const user = useContext(UserContext);
  return <p>{user.name}</p>;
}

const ThemeContext = React.createContext('light'); // デフォルト値

<ThemeContext.Provider value="dark">
  <Toolbar />
</ThemeContext.Provider>

const memoValue = useMemo(() => ({ theme, toggle }), [theme]);

const value = useContext(ThemeContext);

const SettingsContext = createContext({
  showCompleted: true,
  toggleShow: () => {}
});

const AuthContext = createContext({
  user: null,
  login: () => {},
  logout: () => {}
});

const SettingsProvider = ({ children }) => {
  const [showCompleted, setShowCompleted] = useState(true);
  const ctx = useMemo(
    () => ({ showCompleted, toggle: () => setShowCompleted(v => !v) }),
    [showCompleted]    // プリミティブのみ依存
  );
  return <SettingsContext.Provider value={ctx}>{children}</SettingsContext.Provider>;
};

import { createContext, useContextSelector } from 'use-context-selector';

const CountContext = createContext({ count: 0, inc: () => {} });

function CounterLabel() {
  const count = useContextSelector(CountContext, v => v.count);
  return <span>{count}</span>;
}

const TodoContext = createContext(null);

function todoReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, action.payload];
    case 'toggle':
      return state.map(t =>
        t.id === action.id ? { ...t, done: !t.done } : t
      );
    default:
      return state;
  }
}

export function TodoProvider({ children }) {
  const [todos, dispatch] = useReducer(todoReducer, []);
  const ctx = useMemo(() => ({ todos, dispatch }), [todos]);
  return <TodoContext.Provider value={ctx}>{children}</TodoContext.Provider>;
}

export const SettingsContext =
  createContext<SettingsCtx | undefined>(undefined);

export function useSettings(): SettingsCtx {
  const ctx = useContext(SettingsContext);
  if (!ctx) {
    throw new Error('useSettings must be inside <SettingsProvider>');
  }
  return ctx;
}

<QueryClientProvider client={client}>  // Provider
  <App />
</QueryClientProvider>

const wrapper = ({ children }) => <AuthProvider>{children}</AuthProvider>;
const { result } = renderHook(() => useAuth(), { wrapper });

import { useMemo } from 'react';

function ExpensiveList({ items, query }) {
  const filtered = useMemo(() => {
    return items.filter(item => item.name.includes(query));
  }, [items, query]); // itemsかqueryが変わったときだけ再計算

  return filtered.map(item => <li key={item.id}>{item.name}</li>);
}

const memoizedValue = useMemo(() => compute(expensive), [deps]);

function SearchableTable({ rows }) {
  const [keyword, setKeyword] = useState('');
  const visibleRows = useMemo(() => {
    const lower = keyword.toLowerCase();
    return rows.filter(r => r.name.toLowerCase().includes(lower));
  }, [rows, keyword]);
  return (
    <>
      <input value={keyword} onChange={e => setKeyword(e.target.value)} />
      <ul>{visibleRows.map(r => <li key={r.id}>{r.name}</li>)}</ul>
    </>
  );
}

function Preview({ file }) {
  const thumbnail = useMemo(() => {
    return file ? createThumbnail(file) : null; // Canvas処理など重い関数
  }, [file]);
  return thumbnail ? <img src={thumbnail} /> : null;
}

const sorted = useMemo(
  () => [...items].sort((a, b) => a.date - b.date),
  [items]
);

// NG: setState関数は安定参照のため依存不要
useMemo(() => compute(state, setState), [state, setState]); 
// OK
useMemo(() => compute(state), [state]);

const result = useMemo(() => {
  console.time('expensive');
  const v = heavy();
  console.timeEnd('expensive');
  return v;
}, [deps]);

const [state, dispatch] = useReducer(reducer, initialState, init?)

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: throw new Error();
  }
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>＋</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>−</button>
    </>
  );
}

function formReducer(state, action) {
  switch (action.type) {
    case 'change':
      return { ...state, [action.field]: action.value };
    case 'reset':
      return action.initial;
    default:
      return state;
  }
}

const initialForm = { name: '', email: '', password: '' };

function SignupForm() {
  const [form, dispatch] = useReducer(formReducer, initialForm);

  const handleChange = e =>
    dispatch({ type: 'change', field: e.target.name, value: e.target.value });

  return (
    <form>
      {Object.entries(form).map(([key, val]) => (
        <input key={key} name={key} value={val} onChange={handleChange} />
      ))}
      <button onClick={() => dispatch({ type: 'reset', initial: initialForm })}>
        クリア
      </button>
    </form>
  );
}

function init(countFromLocal) {
  return { count: countFromLocal };
}
const [state, dispatch] = useReducer(reducer, initialArg, init);

// todoReducer.js
export function todoReducer(state, action) { /* 省略 */ }

// TodoList.jsx
import { todoReducer } from './todoReducer';
const [todos, dispatch] = useReducer(todoReducer, []);

import { useRef, useEffect } from 'react';

function TextInputFocus() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} placeholder="自動でフォーカス" />;
}

function MultiStepForm() {
  const step1Ref = useRef(null);
  const step2Ref = useRef(null);
  const [step, setStep] = useState(1);

  useEffect(() => {
    if (step === 1) step1Ref.current.focus();
    if (step === 2) step2Ref.current.focus();
  }, [step]);

  return (
    <>
      {step === 1 && <input ref={step1Ref} />}
      {step === 2 && <input ref={step2Ref} />}
      <button onClick={() => setStep(s => s + 1)}>次へ</button>
    </>
  );
}

function ChatWindow({ messages }) {
  const bottomRef = useRef(null);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <div className="chat-area">
      {messages.map(m => <p key={m.id}>{m.text}</p>)}
      <div ref={bottomRef} />
    </div>
  );
}

function RenderCount() {
  const countRef = useRef(0);
  useEffect(() => { countRef.current += 1 });
  return <p>レンダー回数: {countRef.current}</p>;
}

function Timer() {
  const intervalRef = useRef(null);
  const [count, setCount] = useState(0);

  const start = () => {
    if (intervalRef.current === null) {
      intervalRef.current = setInterval(() => setCount(c => c + 1), 1000);
    }
  };

  const stop = () => {
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  };

  useEffect(() => stop, []); // アンマウント時に停止

  return <>
    <p>{count} 秒経過</p>
    <button onClick={start}>開始</button>
    <button onClick={stop}>停止</button>
  </>;
}

const FancyInput = React.forwardRef((props, ref) => {
  return <input className="fancy" ref={ref} {...props} />;
});

function Parent() {
  const inputRef = useRef(null);
  return <>
    <FancyInput ref={inputRef} />
    <button onClick={() => inputRef.current.focus()}>フォーカス</button>
  </>;
}

const Canvas = React.forwardRef((props, ref) => {
  const canvasRef = useRef();
  useImperativeHandle(ref, () => ({
    clear: () => canvasRef.current.getContext('2d').clearRect(0,0,300,150)
  }));
  return <canvas ref={canvasRef} width={300} height={150} />;
});

function DrawingApp() {
  const canvasRef = useRef();
  return <>
    <Canvas ref={canvasRef} />
    <button onClick={() => canvasRef.current.clear()}>クリア</button>
  </>;
}

const memoizedHandler = useCallback(() => {
  console.log('クリックされました');
}, [依存値1, 依存値2]);

function useCallback<T extends (...args: any[]) => any>(
  callback: T,
  deps: DependencyList
): T;

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

  const handler = useCallback(() => {
    console.log(count); // 依存にcountを含めないと常に0が表示
  }, []); 

  return <button onClick={handler}>ログ出力</button>;
}

const memoizedValue = useMemo(() => computeExpensive(a, b), [a, b]);
const memoizedHandler = useCallback(() => doSomething(a, b), [a, b]);

const Child = React.memo(({ onAction }) => {
  console.log('Child render');
  return <button onClick={onAction}>アクション</button>;
});

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

  const handleAction = useCallback(() => {
    console.log('Action!');
  }, []); // 依存なし → 再レンダー時も同じ参照

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>増やす</button>
      <Child onAction={handleAction} />
    </>
  );
}

function Search({ query }) {
  const [results, setResults] = useState([]);
  const fetchResults = useCallback(async () => {
    const res = await fetch(`/api?q=${query}`);
    setResults(await res.json());
  }, [query]);

  useEffect(() => {
    fetchResults();
  }, [fetchResults]); // fetchResults を正しく依存に含める

  return /* 結果表示 */;
}

const expensiveCompute = useCallback((x) => heavyCalc(x), []);
const memoizedResult = useMemo(() => expensiveCompute(input), [input, expensiveCompute]);

import { renderHook, act } from '@testing-library/react-hooks';

test('fetchResults が更新時に変化する', async () => {
  const { result, rerender } = renderHook(
    ({ query }) => useCallback(/*…*/, [query]),
    { initialProps: { query: 'a' } }
  );
  const first = result.current;
  rerender({ query: 'b' });
  expect(result.current).not.toBe(first);
});

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <div>カウント: {this.state.count}</div>;
  }
}

class Greeting extends React.Component {
  render() {
    return <h1>こんにちは、{this.props.name}さん！</h1>;
  }
}

// 呼び出し側
<Greeting name="太郎" />

class Counter extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    // 複数回連続呼び出すと反映タイミングがずれる可能性あり
  }

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}

this.setState(prev => ({ count: prev.count + 1 }));

class DataFetcher extends React.Component {
  state = { data: null };

  componentDidMount() {
    fetch(this.props.url)
      .then(r => r.json())
      .then(json => this.setState({ data: json }));
  }

  render() {
    return this.state.data
      ? <div>{this.state.data.title}</div>
      : <p>読み込み中…</p>;
  }
}

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    logErrorToService(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h2>エラーが発生しました</h2>;
    }
    return this.props.children;
  }
}

MyComponent.contextType = ThemeContext;
class MyComponent extends React.Component {
  render() {
    return <div style={{ color: this.context.primary }}>…</div>;
  }
}

class PureCounter extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;
  }
  render() { /* … */ }
}

// コンストラクタ内で
constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

// クラスフィールド
handleClick = () => { /* this が正しい */ }

MyComponent.defaultProps = { text: 'デフォルトテキスト' };

MyComponent.displayName = 'カスタム名';

import { useEffect } from 'react';

function Example({ url }) {
  useEffect(() => {
    fetch(url).then(r => r.json()).then(data => {
      console.log(data);
    });
  }, [url]);
  return <div>データを取得中…</div>;
}

function InitLogger() {
  useEffect(() => {
    console.log('コンポーネントが画面に追加されました');
  }, []); // 依存配列空でマウント後のみ
  return <div>初期化ログを出力</div>;
}

function Fetcher({ userId }) {
  const [profile, setProfile] = useState(null);
  useEffect(() => {
    let active = true;
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => {
        if (active) setProfile(data);
      });
    return () => { active = false }; // クリーンアップ
  }, [userId]); 
  // userIdが変わるたびに実行／前回のフェッチはキャンセル
  return profile ? <UserCard data={profile} /> : <p>読み込み中…</p>;
}

function Clock() {
  const [time, setTime] = useState(Date.now());
  useEffect(() => {
    const id = setInterval(() => setTime(Date.now()), 1000);
    return () => clearInterval(id); // アンマウント時に解除
  }, []);
  return <div>現在時刻：{new Date(time).toLocaleTimeString()}</div>;
}

import { useLayoutEffect, useRef } from 'react';

function MeasureBox() {
  const ref = useRef();
  useLayoutEffect(() => {
    console.log(ref.current.getBoundingClientRect());
  }, []);
  return <div ref={ref}>サイズを測定</div>;
}

useEffect(() => { /* データ取得 */ }, [id]);
useEffect(() => { /* 購読登録 */ }, [socket]);

import { useState, useEffect } from 'react';

function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal: controller.signal })
      .then(r => r.json())
      .then(setResults)
      .catch(err => {
        if (err.name !== 'AbortError') console.error(err);
      });
    return () => controller.abort(); // クエリ変更時・アンマウント時に中断
  }, [query]);
  return (
    <ul>
      {results.map(r => <li key={r.id}>{r.title}</li>)}
    </ul>
  );
}

// Button.jsx
export function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function Greeting({ name }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

<Greeting name="太郎" />
<Greeting name="花子" />

function Profile({ avatarUrl, username, bio }) { /* … */ }

import React from 'react';

class Greeting extends React.Component {
  render() {
    return <h1>こんにちは、{this.props.name}さん！</h1>;
  }
}

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </>
  );
}

const [todos, setTodos] = useState(() => loadTodosFromLocalStorage());

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>タイトル</h2>
      <p>内容テキスト</p>
    </Card>
  );
}