React Hooksの魅力

ようこそ、React Hooks Advent Calendar 2019へ！まずは1日目ということで、React Hooksの魅力について語ってみます。

React Hooksの魅力

関数コンポーネントでも広がる機能性

もともとReactのコンポーネントはクラスコンポーネントしかなく、そしてrenderだけで済むものが関数コンポーネントで書けるようになりました。ただ、関数コンポーネントを拡張していって、stateなどが必要になると、改めてクラスコンポーネントに書き換える必要が出てしまいました¹。

React Hooksでは、関数コンポーネントのまま、stateや更新時のフックを実現できるようになります。

カスタムフックによるモジュール化

クラスコンポーネントでは、クラス内部にcomponentDidMountやcomponentDidUnmountといったコールバックは1つしか作れなかったので、前準備と後始末を分けて書くしかない、ということがありました。

React Hooksでは、コールバック類をいくつでも書けます。さらに、複数のHooksをまとめて呼び出すカスタムフックを作ることで、準備と後片付けをまとめて再利用することも可能としています。

粒度の細かな制御

クラスコンポーネントには、全体をメモ化して、propsやstateが変化しない限り再描画を抑える機能があります。また、componentDidUpdateは更新のたびに実行されます。

React Hooksの場合、useMemoを使えば「特定の変数群が変わらない限り」という条件でメモ化ができますし、useEffectでも同様に「特定の変数群の変化」をきっかけとしてコールバックを実行できます。

1. React 16.12時点でも、componentDidCatchやgetSnapshotBeforeUpdateといった一部のコールバックは関数コンポーネントで再現できません。 ↩