React Hooks 入門【代表的なフック解説】useState から useEffect まで初心者向けに解説

// Hooks登場前（クラスコンポーネント）- 複雑で読みにくい
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 }; // 状態はthis.stateに
  }
 
  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}回クリック
      </button>
    );
  }
}

// Hooks登場後（関数コンポーネント）- シンプルで読みやすい！
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}回クリック
    </button>
  );
}

// ❌ NG：条件分岐の中で使っている
function BadExample({ isLoggedIn }) {
  if (isLoggedIn) {
    const [name, setName] = useState(""); // エラーになる！
  }
}
 
// ✅ OK：トップレベルで使う
function GoodExample({ isLoggedIn }) {
  const [name, setName] = useState(""); // 常にトップレベルで
  if (!isLoggedIn) return null;
  return <p>{name}</p>;
}

const [状態変数, 更新関数] = useState(初期値);

function LikeButton() {
  const [liked, setLiked] = useState(false); // 初期値はfalse
 
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? "❤️ いいね済み" : "🤍 いいね"}
    </button>
  );
}

// countのプラス・マイナスをreducerで管理する例
function reducer(state, action) {
  switch (action.type) {
    case "increment": return { count: state.count + 1 };
    case "decrement": return { count: state.count - 1 };
    default: return state;
  }
}
 
function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
 
  return (
    <>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

// テーマ情報を親から子孫に渡す例
const ThemeContext = React.createContext("light");
 
// どこからでもテーマ情報を受け取れる！
function ChildComponent() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>テーマ: {theme}</div>;
}
 
// 親コンポーネントでProviderでラップする
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

function SearchForm() {
  const inputRef = useRef(null);
 
  const handleClick = () => {
    inputRef.current.focus(); // 検索ボックスにフォーカス！
  };
 
  return (
    <>
      <input ref={inputRef} type="text" placeholder="検索..." />
      <button onClick={handleClick}>フォーカス</button>
    </>
  );
}

function Timer() {
  const timerIdRef = useRef(null); // タイマーIDを保存（変わっても再描画しない）
 
  const start = () => {
    timerIdRef.current = setInterval(() => console.log("tick"), 1000);
  };
 
  const stop = () => {
    clearInterval(timerIdRef.current);
  };
 
  return (
    <>
      <button onClick={start}>開始</button>
      <button onClick={stop}>停止</button>
    </>
  );
}

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    // コンポーネントが表示されたときにAPIを呼ぶ
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setUser(data));
 
    // クリーンアップ関数（コンポーネントが消えたときに実行）
    return () => {
      console.log("クリーンアップ");
    };
  }, [userId]); // [userId]：userIdが変わったときだけ再実行
 
  return <div>{user?.name ?? "読み込み中..."}</div>;
}

function DataTable({ items, filter }) {
  // filterが変わったときだけ再計算する
  const filteredItems = useMemo(
    () => items.filter((item) => item.name.includes(filter)),
    [items, filter]
  );
 
  return <ul>{filteredItems.map((item) => <li key={item.id}>{item.name}</li>)}</ul>;
}

function Parent() {
  const [count, setCount] = useState(0);
 
  // countが変わっても handleClick の参照が変わらない
  const handleClick = useCallback(() => {
    console.log("クリック！");
  }, []); // 依存なしなので一度だけ生成
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>カウント: {count}</button>
      <ChildButton onClick={handleClick} /> {/* 不要な再レンダリングを防ぐ */}
    </>
  );
}

function SearchPage() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();
 
  const handleChange = (e) => {
    setQuery(e.target.value); // 入力は即時反映
    startTransition(() => {
      setResults(heavySearch(e.target.value)); // 検索は後回しOK
    });
  };
 
  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending ? <p>検索中...</p> : <ResultList results={results} />}
    </>
  );
}

function EmailField() {
  const id = useId(); // 自動で一意のIDを生成
 
  return (
    <>
      <label htmlFor={id}>メールアドレス</label>
      <input id={id} type="email" />
    </>
  );
}

// データ取得の処理をカスタムフックとして切り出す
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
        setLoading(false);
      });
  }, [url]);
 
  return { data, loading, error };
}
 
// どのコンポーネントからも使いまわせる！
function UserList() {
  const { data, loading } = useFetch("/api/users");
  if (loading) return <p>読み込み中...</p>;
  return <ul>{data.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}