React useStateとコールバックの連携
2024-09-19
ReactでuseStateフックとコールバックを使用する方法
ReactのuseStateフックは、コンポーネントの状態を管理するための基本的な方法です。コールバック関数と組み合わせて使用することで、より柔軟な状態更新を実現できます。
基本的な使い方
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>
);
}
この例では、setCount関数を使用してcountの状態を更新しています。increment関数は、setCountに現在のcountに1を加えた値を渡しています。
コールバック関数を使用する
コールバック関数をsetCountに渡すことで、状態更新のタイミングや値を制御できます。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');
useEffe ct(() => {
// 何か処理を実行する
console.log('Effect triggered:', count, name);
}, [count, name]);
const increment = () => {
setCount((prevCount) => prevCount + 1);
};
const updateName = (newName) => {
setName(newName);
};
return (
<div>
<p>Count: {count}</p>
<p>Name: {name}</p>
<button onClick={increment}>Increment</button>
<input type="text" onChange={(e) => updateName(e.target.value)} />
</div>
);
}
この例では、increment関数とupdateName関数でコールバック関数を渡しています。
- updateName関数
setNameにコールバック関数を渡し、nameの状態を更新しています。 - increment関数
setCountにコールバック関数を渡し、現在のcountを元に新しいcountを計算しています。これにより、非同期処理や前回のcountの値に基づいた更新が可能になります。
コールバック関数と副作用フック（useEffect）の組み合わせ
useEffectフックと組み合わせて使用することで、状態更新後に特定の処理を実行できます。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// countが更新されたときに実行する処理
console.log('Count updated:', count);
}, [count]);
const increment = () => {
setCount((prevCount) => prevCount + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
この例では、countが更新されたときにコンソールにメッセージを出力しています。
React useStateとコールバックの連携
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</button>
</div>
);
}
- increment関数
クリックイベントが発生したときに呼び出され、setCount関数を使用してcountを1増やします。 - setCount関数
countの状態を更新するための関数です。 - use Stateフック
countという状態変数を初期値0で作成します。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');
useEffe ct(() => {
// 何か処理を実行する
console.log('Effect triggered:', count, name);
}, [count, name]);
const increment = () => {
setCount((prevCount) => prevCount + 1);
};
const updateName = (newName) => {
setName(newName);
};
return (
<div>
<p>Count: {count}</p>
<p>Name: {name}</p>
<button onClick={increment}>Increment</button>
<input type="text" onChange={(e) => updateName(e.target.value)} />
</div>
);
}
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// countが更新されたときに実行する処理
console.log('Count updated:', count);
}, [count]);
const increment = () => {
setCount((prevCount) => prevCount + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
useReducerフック
- Reducer関数
状態の更新ロジックを集中管理できるため、コードの可読性と保守性を向上させます。 - 複雑な状態管理
useReducerフックは、より複雑な状態管理が必要な場合に適しています。
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
retu rn { ...state, count: state.count + 1 };
default:
return state;
}
};
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
const increment = () => {
dispatch({ type: 'INCREME NT' });
};
return (
<div>
<p>Count: {state.count}</p>
<button onClick={increment}>Increment </button>
</div>
);
}
Context API
- ProviderとConsumer
Providerコンポーネントで状態を提供し、Consumerコンポーネントで状態にアクセスします。 - 状態の共有
Context APIを使用すると、コンポーネントツリー全体で状態を共有できます。
``javascript import React, { createContext, useContext, useState } from 'react';
const CountContext = createContext();
function CountProvider({ children }) { const [count, setCount] = useState(0);
const increment = () => { setCount(count + 1); };
return ( <CountContext.Provider value={{ count, increment }}> {children} </CountContext.Provider> ); }
function Counter() { const { count, increment } = useContext(CountContext);
return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> </div> ); }
### 3. **Zustand**
* **シンプルな状態管理:** Zustandは、シンプルな状態管理ライブラリで、Reduxよりも軽量です。
* **Storeの作成:** `createStore`関数を使用してストアを作成し、状態と更新関数を定義します。
```javascript
import create from 'zustand';
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
function Counter() {
const { count, increment } = useStore();
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
javascript reactjs react-hooks
