[React.js] - パート9: React Hooks - Hookとは何ですか？

Ace Lennox

2025年01月16日読了時間：2分

Reactはバージョン16.8からHooksを導入し、functionコンポーネントでstateなどのReact機能を扱えるようになりました。クラスコンポーネントは引き続き利用可能ですが、基本的には不要です。

Hooksとは？

Hooksを使うと、functionコンポーネントでstate管理やライフサイクルメソッドなどを扱うことができます。

例（useState使用）
お好みの料理を選択するコンポーネントです:

import React, { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteFood() {
  const [food, setFood] = useState("pizza");

  return (
    <>
      <h1>My favorite food is {food}!</h1>
      <button onClick={() => setFood("pizza")}>Pizza</button>
      <button onClick={() => setFood("sushi")}>Sushi</button>
      <button onClick={() => setFood("tacos")}>Tacos</button>
      <button onClick={() => setFood("pasta")}>Pasta</button>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<FavoriteFood />);