React

概要

React は Meta が開発する UI 構築のための JavaScript ライブラリです。 コンポーネントベースの設計と Hooks により、宣言的かつ再利用しやすい UI を記述できます。

基本的な Hooks

import { useState, useEffect } from "react";

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

カスタムフック

ロジックをコンポーネントから分離してテスト・再利用しやすくします。

function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initial;
  });

  const set = (v: T) => {
    setValue(v);
    localStorage.setItem(key, JSON.stringify(v));
  };

  return [value, set] as const;
}

注意点

• useEffect の依存配列は正確に指定する（ESLint の exhaustive-deps ルールを活用）
• 状態の更新は非同期なので、最新値が必要な場合は関数形式 setState(prev => ...) を使う
• Context は頻繁に変わる値の共有には不向き（再レンダリングが広がりやすい）