React useState フック解説
2024-10-11
React useState() フックを使用した状態オブジェクトの更新とマージ
React useState() フックは、コンポーネントの状態を管理するために使用される基本的なフックです。状態は、コンポーネントのレンダリングや動作を決定する変数です。
状態の初期化
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
// ...
}
setCount: 状態変数を更新するための関数。useState(0): 状態変数countを初期値 0 で作成します。
状態の更新
setCount(count + 1);
count + 1: 新しい値を計算し、setCountに渡します。
状態のマージ
setCount((prevCount) => prevCount + 1);
prevCount: 前の状態の値。setCountにコールバック関数を渡すことで、前の状態に基づいて新しい状態を計算できます。
状態のマージの利点
- パフォーマンス
以前の状態に基づいて新しい状態を計算することで、不必要なレンダリングを防ぐことができます。 - 同期性
複数の状態更新が同時に発生した場合でも、常に最新の値が使用されます。
例
function MyComponent() {
const [count, setCount] = useState(0);
const [name, setName] = useState('John Doe');
const handleClick = () => {
setCount((prevCount) => prevCount + 1);
setName('Jane Smith');
};
return (
<div>
<p>Count: {count}</p>
<p>Name: {name}</p>
<button onClick={handleClick}>Update</button>
</div>
);
}
基本的な例
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
retur n (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</butto n>
</div>
);
}
- レンダリング
countの値が変更されると、コンポーネントが再レンダリングされます。 - 更新
setCount(count + 1)でcountを 1 ずつ増やします。 - 初期化
useState(0)でcountを初期値 0 に設定します。
const increment = () => {
setCount((prevCount) => prevCount + 1);
};
状態のオブジェクト
const [user, setUser] = useState({
name: 'John Doe',
age: 30
});
const updateUser = () => {
setUser((prevUser) => ({
...prevUser,
age: prevUser.age + 1
}));
};
- スプレッドオペレーター
...prevUserを使用して、前の状態のプロパティをコピーし、ageプロパティのみを更新します。 - 更新
setUserにコールバック関数を渡し、ageプロパティを更新します。 - オブジェクトの状態
userはオブジェクトの状態です。
React useState() フック解説
特徴
- 状態のマージ
以前の状態に基づいて新しい状態を計算できます。 - 状態の更新
状態を更新するための関数を提供します。 - 初期値の設定
初期値を設定します。 - 状態の管理
コンポーネントの状態を管理します。
使い方
useStateフックをインポートします。useStateフックを使用して、状態変数と更新関数を定義します。- 状態変数をコンポーネント内で使用します。
- 状態を更新するために、更新関数を呼び出します。
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</ div>
);
}
注意
- 状態の更新は、コンポーネントの再レンダリングを引き起こします。
useStateフックは関数コンポーネントで使用できます。- 状態の更新は非同期的に処理されます。
Redux
- 複雑なアプリケーション
Redux は、複雑なアプリケーションや複数のコンポーネント間で状態を共有する必要がある場合に適しています。 - 中央集権化
状態は単一のストアに保存され、コンポーネント間で共有されます。 - グローバルな状態管理
Redux は、アプリケーション全体で共有される状態を管理するライブラリです。
Context API
- シンプルなアプリケーション
Context API は、比較的シンプルなアプリケーションで状態を共有する必要がある場合に適しています。 - 階層的な構造
Context API は、コンポーネントツリー内の特定の階層で状態を共有します。 - コンポーネント間で状態を共有
Context API は、コンポーネント間で状態を共有するための組み込みの React API です。
Zustand
- 柔軟性
Zustand は、様々なユースケースに対応する柔軟性を持っています。 - 軽量
Zustand は、Redux よりも軽量で、シンプルなアプリケーションに適しています。 - シンプルな状態管理
Zustand は、シンプルで使いやすい状態管理ライブラリです。
Recoil
- 複雑なアプリケーション
Recoil は、複雑なアプリケーションやパフォーマンスが重要な場合に適しています。 - パフォーマンス
Recoil は、パフォーマンスを重視したアプリケーションに適しています。 - 原子的な状態管理
Recoil は、原子的な状態管理を提供するライブラリです。
選択基準
- シンプルさ
シンプルなアプリケーションには、Zustand が適しています。 - パフォーマンス
パフォーマンスが重要な場合は、Recoil が適しています。 - 状態の共有範囲
グローバルな状態管理が必要な場合は、Redux が適しています。コンポーネント間で状態を共有する場合は、Context API や Zustand が適しています。 - アプリケーションの規模
複雑なアプリケーションには、Redux や Recoil が適しています。
// Redux
import { createStore } from 'redux';
import { Provider } from 'react-redux';
// Context API
import { createContext, useContext } from 'react';
// Zustand
import create from 'zustand';
// Recoil
import { atom, useRecoilValue, useRecoilState } from 'recoil';
javascript reactjs react-hooks
