ReactでReduxを使わずに状態管理する方法

ReactにはReduxという状態管理ライブラリがありますが、Reduxを導入するとプロジェクトの複雑さが増すことがあります。そこで、Reduxを使わずに状態管理を行う方法について紹介します。

useStateフックを使う

ReactにはuseStateというフックがあります。これを使うことで、簡単にコンポーネント内で状態を管理することができます。

例えば、以下のようなコードで、カウンターの値を管理できます。

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useStateは、配列を返します。最初の要素には現在の状態の値、二番目の要素には状態を変更するための関数が格納されています。

useContextフックを使う

複数のコンポーネントで同じ状態を使い回したい場合は、useContextフックを使うことができます。

以下は、ユーザー情報を格納するUserContextを定義し、それを複数のコンポーネントで使用する例です。

import { createContext, useContext, useState } from 'react';

const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  return (
    <UserContext.Provider value={user}>
      <Profile />
      <Settings />
    </UserContext.Provider>
  );
}

function Profile() {
  const user = useContext(UserContext);

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
    </div>
  );
}

function Settings() {
  const user = useContext(UserContext);

  return (
    <div>
      <label>
        Name:
        <input
          type="text"
          value={user.name}
          onChange={(e) => setUser({ ...user, name: e.target.value })}
        />
      </label>
      <br />
      <label>
        Age:
        <input
          type="number"
          value={user.age}
          onChange={(e) => setUser({ ...user, age: e.target.value })}
        />
      </label>
    </div>
  );
}

UserContext.Providerで囲まれたコンポーネント内で、useContext(UserContext)を呼ぶことで、UserContextの値を取得することができます。

まとめ

Reduxを使わずに、useStateフックやuseContextフックを使うことで
、簡単に状態管理をすることができます。特に小規模なプロジェクトではReduxを導入する必要性は低いため、これらのフックを上手に活用して開発を進めていきましょう。

また、useStateやuseContext以外にも、useReducerやuseRefといったフックを使うことで、状態管理の方法をさらに拡張することができます。

このように、Reactには様々な状態管理の方法が用意されています。プロジェクトの規模や要件に応じて適切な方法を選択し、効率的な開発を行いましょう。