React Hooksの基本

React Hooks は、React 16.8 で導入された新機能であり、関数コンポーネントで state と ライフサイクル を管理するための仕組みです。

従来、これらの機能はクラスコンポーネントでのみ利用可能でしたが、Hooks によって関数コンポーネントでも利用できるようになりました。

Hooks の主な利点

シンプルで分かりやすいコード: クラスコンポーネントと比較して、Hooks を使用したコードはよりシンプルで分かりやすくなっています。
再利用性の高いコード: Hooks は再利用性の高いコードを書くのに役立ちます。同じロジックを複数のコンポーネントで簡単に共有できます。
テストしやすいコード: Hooks を使用したコードは、テストしやすいコードになっています。

代表的な Hooks

useState: コンポーネント内に state を保持し、更新するためのフックです。
useEffect: データフェッチ、サブスクリプション、サイドエフェクトなどの処理を行うためのフックです。
useContext: 共有コンテキストから値を読み取るためのフックです。
useReducer: 複雑な state 管理に役立つフックです。

Hooks の基本的な使い方

Hooks は、関数コンポーネント内で use キーワードを使って呼び出すことができます。例えば、useState フックを使用すると、以下のようになります。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
}

このコードでは、useState フックを使用して count という state 変数を定義しています。count 変数は初期値として 0 に設定されています。setCount 関数は、count 変数の値を更新するために使用されます。