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