Hooked on Hooks

これは記事の日本語版です。

The English version of this article is here.

去年のReact大会では、hooksがコンポーネントの新しい書き方として紹介されました。例えば、stateというhookを使ったコンポーネントは次のようです：

import React, { useState } from 'react';

function Example() {
  // 新しいステート変数を宣言して、「count」と呼んでおこう
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}回クリックしました</p>
      <button onClick={() => setCount(count + 1)}>
        クリック
      </button>
    </div>
  );
}

要するに、コンポーネントはもうクラスではなく、次のステートを出力する関数となります。コンポーネントをステートからステートへ動く関数として考えるのは、UIの考え方を簡素化してくれると私は思います。

コンポーネントが大きくなるにつれ、同じフィーチャーに関わっている部分を同じところに集中させるという効果もあります。次のGIFではその改善が見やすいです。関わっている部分が同色になっています：

つまり、コードが読みやすくなるという利益もあります。

HooksはReactに限られていません。既にFlutterにもよくできている実装もあります。そしてVue3（記事当時はVue2です）の最初版もhooksを含めてリリースされるらしいです。

あなたがもっと分かりやすいコンポーネント指向のフロントエンドを作ろうとしているなら、どうぞReactのhooksを参考にしてください。