📋 目次
🚀 はじめに
React フックは、関数コンポーネントで状態管理やライフサイクルメソッドを利用できるようにする強力な機能です。この記事では、React フックの基礎から応用までを網羅的に解説します。React を利用している方はもちろん、これから React を学びたい方にも役立つ内容となっています。
この記事で学べること
- useState フックによる状態管理
- useEffect フックによるライフサイクル処理
- useContext フックによるグローバル状態管理
- useReducer フックによる複雑な状態管理
- カスタムフックの作成と利用
📚 基礎知識
React フックは、React 16.8 で導入された機能で、関数コンポーネントで状態とライフサイクル機能を扱うための新しい方法を提供します。これにより、クラスコンポーネントを使用せずに、関数コンポーネントで同様の機能を実現できるようになりました。
💡 重要なポイント
React フックを使用することで、コードの可読性と再利用性を向上させることができます。
useState フックの詳細
`useState` フックは、関数コンポーネントに状態を追加するための最も基本的なフックです。状態の値を保持し、更新するための関数を提供します。
クリックして選択
function Counter() {
const [count, setCount] = React.useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
この例では、`useState(0)` によって初期値 0 の状態 `count` が作成され、状態を更新する関数 `setCount` が返されます。
useEffect フックの詳細
`useEffect` フックは、コンポーネントのマウント、更新、アンマウント時に副作用を実行するために使用されます。例えば、データの取得、DOM の操作、タイマーの設定などを行うことができます。
クリックして選択
function MyComponent() {
const [data, setData] = React.useState(null);
React.useEffect(() => {
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
}
fetchData();
return () => {
// クリーンアップ関数
console.log('Component unmounting');
};
}, []);
return (
<div>
{data ? <p>Data: {JSON.stringify(data)}</p> : <p>Loading...</p>}
</div>
);
}
この例では、コンポーネントのマウント時に `fetchData` 関数を実行し、データ取得後に `setData` 関数で状態を更新しています。 `[]` は依存配列で、この配列が空の場合、コンポーネントのマウント時に一度だけ `useEffect` が実行されます。
useContext フックの詳細
`useContext` フックは、コンテキストの値を読み取るために使用されます。これにより、プロップドリルを回避し、コンテキストを通じてグローバルな状態を共有することができます。
クリックして選択
const MyContext = React.createContext('default value');
function ComponentA() {
const value = React.useContext(MyContext);
return <p>Value: {value}</p>;
}
function App() {
return <ComponentA />;
}
この例では、`MyContext` を作成し、`ComponentA` で `useContext(MyContext)` を使用してコンテキストの値を読み取っています。
useReducer フックの詳細
`useReducer` フックは、複雑な状態管理を行うために使用されます。これは、`useState` フックよりも柔軟性があり、状態遷移を予測可能にするために役立ちます。
クリックして選択
function reducer(state, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
function MyComponent() {
const [state, dispatch] = React.useReducer(reducer, { count: 0 });
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
);
}
この例では、`reducer` 関数を定義し、`useReducer(reducer, { count: 0 })` を使用して状態とディスパッチ関数を取得しています。
カスタムフックの作成
カスタムフックを使用すると、ロジックをカプセル化し、コンポーネント間で再利用することができます。
クリックして選択
function useFetch(url) {
const [data, setData] = React.useState(null);
React.useEffect(() => {
async function fetchData() {
const response = await fetch(url);
const result = await response.json();
setData(result);
}
fetchData();
}, [url]);
return data;
}
function MyComponent() {
const data = useFetch('https://api.example.com/data');
return (
<div>
{data ? <p>Data: {JSON.stringify(data)}</p> : <p>Loading...</p>}
</div>
);
}
この例では、`useFetch` というカスタムフックを作成し、`MyComponent` で使用しています。
パフォーマンスに関する考慮事項
`useEffect` フックの依存配列を適切に設定しないと、不要な再レンダリングが発生する可能性があります。また、`useReducer` フックを使用する際には、`reducer` 関数のパフォーマンスを最適化する必要があります。
クリックして選択
// エラーの例：不要な再レンダリング
function BadComponent({ data }) {
useEffect(() => {
// data が変更されるたびに実行される
console.log('Effect running');
}, [data]);
return <div>{data}</div>;
}
// 修正された例：依存配列を適切に設定
function GoodComponent({ data }) {
useEffect(() => {
console.log('Effect running');
}, []); // 依存配列を空にすることで、一度だけ実行
return <div>{data}</div>;
}
🎉 まとめ
この記事のポイント
- React フックは、関数コンポーネントで状態管理やライフサイクルメソッドを利用できるようにする強力な機能です。
- useState フック、useEffect フック、useContext フック、useReducer フックを理解することで、より複雑なコンポーネントを作成することができます。
- カスタムフックを作成することで、ロジックをカプセル化し、コンポーネント間で再利用することができます。
参考資料・出典
※ 本記事の情報は執筆時点のものです。最新情報については各公式サイトをご確認ください。
コメント