Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

7章フック

Reactのアプリケーションは絶えず描画を繰り返します。プロパティもしくはステート値が変更されるたびにコンポーネントツリーが再描画され、新しいデータがUIに反映されます。描画はいわばReactの生命線です。ステートの更新を起点としたコンポーネントの描画サイクルを確立するために、前章ではuseStateフックを使ったステートの管理について学びました。本章では、Reactが提供するその他のフックについて、どのような場面でどう使い分けるかを学びます。

前章ではReactが提供するuseState、useRef、useContextの3つのビルトインフックを紹介しました。また、それらのフックを使用してuseInputやuseColorsのようなカスタムフックを実装する方法についても学びました。本章ではさらに、Reactが提供する他の3つのビルトインフック——useEffect、useLayoutEffect、useReducer——を紹介します。これらはReactのアプリケーション開発に欠かせないものです。またそれらに加えて、コンポーネントのパフォーマンスを最適化するための2つのフック——useCallbackとuseMemo——の使い方についても学びます。

7.1　useEffect

すでに本書の読者は、Reactにおいてコンポーネントが描画されると何が起きるのか、イメージできるようになったと思います。コンポーネントの実体はUIを描画するための関数で、アプリケーションの初期表示時もしくはステートが変更された際に、新しいプロパティ値とともにこの描画関数が呼び出されます。それでは、さらに一歩進んで、描画が完了したあとに何か処理を実行したい場合はどうすればいいでしょうか。

たとえばチェックボックスのUIを提供するコンポーネントについて考えてみましょう。ユーザーはこのコンポーネントを使って、チェックボックスにチェックを付けたり外したりできます。 ...