Reactで hooksを用いた関数ベースのコンポーネント作成を個人的に好む理由

React 16.8からhooksがサポートされるようになりました。hooksでは、componentDidMountやthis.setStateなどクラスで使われていたメソッドを用いる代わりにReactが新しく提供している、useStateやuseEffectなどの関数でそれを補う形になる。

下は、classのthis.setStateを使わないuseStateを用いた簡単なhooks利用サンプル

const Layout = (props: LayoutProps) => {
  const [layout, setLayout] = useState('pattern1');
  
  return (<div>
    <input type="radio" onChange={() => { setLayout('pattern1') }} checked={layout === 'pattern1'} />
    <input type="radio" onChange={() => { setLayout('pattern2') }} checked={layout === 'pattern2'} />
    {(layout === 'pattern1') && <div>pattern1</div>}
    {(layout === 'pattern2') && <div>pattern2</div>}
  </div>);
}

また、useEffectをつかうことによって、componentDidMount, componentDidUpdate,また componentWillUnmountなど、Reactでクラスベースでメソッドと同じようにこれまでのライフサイクルをフックして処理を挟むことができる。

私がhooksを好む理由

ではなぜ私がhooksに心惹かれるのか、理由は主に下の3つ。

  • FunctionalComponentからステートを持ったコンポーネントに変更しやすい
  • 作ったカスタムhooksが他のコンポーネントでも使いまわせる
  • 関数が呼ばれる回数を強く意識するようになる。

1. FunctionalComponentからステートを持ったコンポーネントに変更しやすい

Stateを持たず、propsだけ受け取って表示をするようなプレゼンテーショナルなコンポーネントを作成しやすい。

2. 作ったカスタムhooksが他のコンポーネントでも使いまわせる

class内に便利なメソッドを持ってしまったとするとそれを使い回すにはextendsして別クラスを作らざるを得ません。別クラスが出てくるとまたそのクラスをextendsして、いつのまにか自分が把握できないメソッドをいくつか持ってるケースがある。

3. 関数が呼ばれる回数を強く意識するようになる。

useMemoやuseEffectなどを使って関数が呼ばれる回数を減らすことに喜びを見出せるようになる。これは自分だけかもしれないが、なぜかclassベースでコンポーネントを作っていた時はshouldComponentUpdateを使ったパフォーマンスチューニングにあまりやる気がでなかった。


Home