Reactフックは、React 16.8で導入された革命的な機能です。フックを使用することで、クラスコンポーネントを書くことなく、ステート（state）やその他のReactの機能を関数コンポーネントで使用できるようになりました。これにより、コードの再利用性が高まり、コンポーネントの構造がよりシンプルになりました。

主要なReactフック

1. useState： コンポーネント内でステートを管理します。

   javascript

   Copy

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

2. useEffect： 副作用を実行します。コンポーネントのライフサイクルに関連する操作を行うのに適しています。

   javascript

   Copy

   useEffect(() => { document.title = You clicked ${count} times; }, [count]);

3. useContext： Reactのコンテキストを簡単に利用できます。

   javascript

   Copy

   const theme = useContext(ThemeContext);

4. useReducer： より複雑なステート管理に適しています。

   javascript

   Copy

   const [state, dispatch] = useReducer(reducer, initialState);

5. useCallbackとuseMemo： パフォーマンス最適化に役立ちます。

フックの利点

• ロジックの再利用：カスタムフックを作成することで、ステートフルなロジックを簡単に再利用できます。
• 関心の分離：ライフサイクルメソッドに関連するロジックをより小さな関数に分割できます。
• シンプルなコード：クラスコンポーネントと比べて、関数コンポーネントはより直感的で書きやすいです。
• テストのしやすさ：ロジックが小さな関数に分割されるため、テストが容易になります。

フックの使用例

カスタムフックを使用して、ウィンドウのサイズを監視する例:

javascript

Copy

function useWindowSize() { const [size, setSize] = useState([window.innerWidth, window.innerHeight]); useEffect(() => { const handleResize = () => { setSize([window.innerWidth, window.innerHeight]); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return size; } // 使用例 function ResponsiveComponent() { const [width, height] = useWindowSize(); return <div>Window size: {width} x {height}</div>; }

Reactフックは、関数コンポーネントの能力を大幅に向上させ、よりクリーンで再利用可能なコードを書くことを可能にします。フックを活用することで、Reactアプリケーションの開発がより効率的で楽しいものになるでしょう。