February 06, 2019 by Dan Abramov

With React 16.8, React Hooks are available in a stable release!

React 16.8 では、React Hooks が安定版で利用可能となりました。

What Are Hooks? – Hooks とは？

Hooks let you use state and other React features without writing a class. You can also build your own Hooks to share reusable stateful logic between components.

Hook を使うと、クラスを書くことなく state など React の機能を使えるようになります。コンポーネント間で再利用したいステートフルなロジックをシェアするために独自の Hooks を書くこともできます。

If you’ve never heard of Hooks before, you might find these resources interesting:

これまでに Hooks について何も聞いたことがなかったとしたら、以下の記事に興味をもつことでしょう。

・Introducing Hooks explains why we’re adding Hooks to React.
・Hooks at a Glance is a fast-paced overview of the built-in Hooks.
・Building Your Own Hooks demonstrates code reuse with custom Hooks.
・Making Sense of React Hooks explores the new possibilities unlocked by Hooks.
・useHooks.com showcases community-maintained Hooks recipes and demos.

• Introducing Hooks は、なぜわたしたちが React に Hooks を追加したかの説明です。
• Hooks at a Glance は、ビルトインの Hooks についてのさっと読める概要です。
• Building Your Own Hooks は、カスタム Hooks を使ってコードを再利用するデモです。
• Making Sense of React Hooks は、Hooks によってロックが解除された新しい可能性についての展望です。
• useHooks.com は、コミュニティが管理する Hooks のレシピとデモの紹介です。

You don’t have to learn Hooks right now. Hooks have no breaking changes, and we have no plans to remove classes from React. The Hooks FAQ describes the gradual adoption strategy.

ただし、直ちに Hooks を学ぶ必要はありません。Hooks には破壊的変更は含まれていませんし、React からクラス構文を取り除く予定もありません。Hooks FAQ では、段階的に採用する戦略について書いています。

No Big Rewrites

We don’t recommend rewriting your existing applications to use Hooks overnight. Instead, try using Hooks in some of the new components, and let us know what you think. Code using Hooks will work side by side with existing code using classes.

わたしたちは、既存のアプリケーションを Hooks を使ってすぐに書き換えることをオススメしていません。その代わり、新しいコンポーネントを作成するときに、Hooks を使ってみることをオススメします。そして、どう思うかおしらせください。Hooks を使っているコードは、クラス構文を使っている既存のコードと一緒でも動きます。

Can I Use Hooks Today?

Yes! Starting with 16.8.0, React includes a stable implementation of React Hooks for:

それでは、16.8.0 を始めましょう！React は以下のパッケージについても React Hooks の安定版を含んでいます。

• React DOM
• React DOM Server
• React Test Renderer
• React Shallow Renderer

Note that to enable Hooks, all React packages need to be 16.8.0 or higher. Hooks won’t work if you forget to update, for example, React DOM.

なお、Hooks を有効化するために、すべての React のパッケージは、16.8.0 以上となっている必要があるということにご注意ください。たとえば、React DOM のアップデートを忘れると、Hooks は動かないでしょう。　

React Native will support Hooks in the 0.59 release.

React Native は、0.59 のリリースで Hooks をサポートする予定です。

Tooling Support

React Hooks are now supported by React DevTools. They are also supported in the latest Flow and TypeScript definitions for React. We strongly recommend enabling a new lint rule called eslint-plugin-react-hooks to enforce best practices with Hooks. It will soon be included into Create React App by default.

React Hooks は、React DevTools でもサポートされています。また、最新の Flow や TypeScript の React用の定義ファイルでもサポートされています。Hooks を最大限に活用するために、eslint-plugin-react-hooks という新しい lint のルールを有効化することを強くオススメします。これは、近日中に Create React App にもデフォルトで含まれる予定です。

What’s Next

We described our plan for the next months in the recently published React Roadmap.

先日公開した React Roadmap に、次の数ヶ月間における予定を書いています。

Note that React Hooks don’t cover all use cases for classes yet but they’re very close. Currently, only getSnapshotBeforeUpdate() and componentDidCatch() methods don’t have equivalent Hooks APIs, and these lifecycles are relatively uncommon. If you want, you should be able to use Hooks in most of the new code you’re writing.

なお、React Hooks は、まだクラス構文で可能だったすべてのユースケースをカバーしていませんが、かなり近づいているということにご注意ください。現状では、getSnapshotBeforeUpdate() メソッドと componentDidCatch() メソッドが Hooks の API に実装されていないだけです。これらのライフサイクルは比較的マイナーなものなので、必要であれば作成している新しいコードのほとんどで Hooks を使用できるはずです。

Even while Hooks were in alpha, the React community created many interesting examples and recipes using Hooks for animations, forms, subscriptions, integrating with other libraries, and so on. We’re excited about Hooks because they make code reuse easier, helping you write your components in a simpler way and make great user experiences. We can’t wait to see what you’ll create next!

Hooks がアルファ版であった時でも、React コミュニティは、アニメーション、フォーム、サブスクリプション、他のライブラリとの統合などのために、Hooks を使用して多くの興味深いサンプルとレシピを作成しました。わたしたちは、Hooks に興奮しています。なぜなら、Hooks はコードの再利用をより簡単にし、コンポーネントをよりシンプルな方法で記述できるようにし、優れたユーザーエクスペリエンスを実現してくれるからです。わたしたちは、みなさんが次に作るものを見るのが待ち遠しいです。

Testing Hooks

We have added a new API called ReactTestUtils.act() in this release. It ensures that the behavior in your tests matches what happens in the browser more closely. We recommend to wrap any code rendering and triggering updates to your components into act() calls. Testing libraries like react-testing-library can also wrap their APIs with it.

今回のリリースで、ReactTestUtils.act() という新しい API を追加しました。これを使うことで、テストにおける振る舞いが、ブラウザで起こることとより厳密に一致するということが保証されます。コンポーネントをレンダリングしているコードやコンポーネントの更新をトリガーしているコードを act（） の呼び出しの中にラップしてみてください。react-testing-library のようなテスティング・ライブラリであれば、自身の API を act() でラップすることができるはずです。

For example, the counter example from this page can be tested like this:

たとえば、このページのカウンターのサンプルは、以下のようにテストコードを書くことができます。

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import Counter from './Counter';

let container;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  document.body.removeChild(container);
  container = null;
});

it('can render and update a counter', () => {
  // Test first render and effect
  act(() => {
    ReactDOM.render(<Counter />, container);
  });
  const button = container.querySelector('button');
  const label = container.querySelector('p');
  expect(label.textContent).toBe('You clicked 0 times');
  expect(document.title).toBe('You clicked 0 times');

  // Test second render and effect
  act(() => {
    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
  });
  expect(label.textContent).toBe('You clicked 1 times');
  expect(document.title).toBe('You clicked 1 times');
});

The calls to act() will also flush the effects inside of them.

act() の呼び出しは、作用をその中にも流し込みます。

If you need to test a custom Hook, you can do so by creating a component in your test, and using your Hook from it. Then you can test the component you wrote.

カスタム Hooks をテストする場合は、テストコードの中でコンポーネントを作成し、そのコンポーネントから Hook を使用することでそれを実行することができます。

To reduce the boilerplate, we recommend using react-testing-library which is designed to encourage writing tests that use your components as the end users do.

ボイラープレートを減らすために react-testing-library を使うことをオススメします。react-testing-library は、エンドユーザーと同じようにコンポーネントを使うテストを書くことを奨励するために設計されています。

Thanks

We’d like to thank everybody who commented on the Hooks RFC for sharing their feedback. We’ve read all of your comments and made some adjustments to the final API based on them.

わたしたちは、フィードバックを共有するために Hooks RFC にコメントを書いてくれたすべての方に感謝したいです。わたしたちは、コメントのすべてに目を通し、それに基づいて最終的な API にいくつかの調整を施しました。

Installation – インストール

React

React v16.8.0 is available on the npm registry.

React v16.8.0 は npm レジストリで利用可能です。

To install React 16 with Yarn, run:

React 16 を Yarn でインストールするには、以下を実行します。

To install React 16 with npm, run:

React 16 を npm でインストールするには、以下を実行します。

We also provide UMD builds of React via a CDN:

CDN 経由での React の UMD 版も提供しています。

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Refer to the documentation for detailed installation instructions.

詳細なインストール方法についてのドキュメントもご参照いただけます。　

ESLint Plugin for React Hooks

Note
As mentioned above, we strongly recommend using the eslint-plugin-react-hooks lint rule.
If you’re using Create React App, instead of manually configuring ESLint you can wait for the next version of react-scripts which will come out shortly and will include this rule.

Assuming you already have ESLint installed, run:

すでに ESLint がインストールされていると仮定して、次のコマンドを実行します。

# npm
npm install eslint-plugin-react-hooks@next --save-dev

# yarn
yarn add eslint-plugin-react-hooks@next --dev

Then add it to your ESLint configuration:

次に、以下を ESLint の設定に追加します。

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error"
  }
}

Changelog

React

• Add Hooks — a way to use state and other React features without writing a class. (@acdlite et al. in #13968)

  Hooks を追加しました。- クラスを書くことなく state や他の React の機能を使用するための方法です。(@acdlite et al. in #13968)

• Improve the useReducer Hook lazy initialization API. (@acdlite in #14723)

  useReducer Hook の遅延初期化 API を改善しました。(@acdlite in #14723)

React DOM

• Bail out of rendering on identical values for useState and useReducer Hooks. (@acdlite in #14569)

  useState Hook と useReducer Hook の同じ値でのレンダリングを回避するようになりました。(@acdlite in #14569)

• Don’t compare the first argument passed to useEffect/useMemo/useCallback Hooks. (@acdlite in #14594)

  useEffect/useMemo/useCallback Hook に渡される第一引数を比較しないようになりました。(@acdlite in #14594)

• Use Object.is algorithm for comparing useState and useReducer values. (@Jessidhia in #14752)

  useState と useReducer の値を比較するために、Object.is アルゴリズムを使うようになりました。(@Jessidhia in #14752)

• Support synchronous thenables passed to React.lazy(). (@gaearon in #14626)

  React.lazy() に渡される同期 thenable に対応しました。(@gaearon in #14626)

• Render components with Hooks twice in Strict Mode (DEV-only) to match class behavior. (@gaearon in #14654)

  クラスの振る舞いと一致するように Strict Mode において（開発時のみ）、2 回 Hooks でコンポーネントをレンダリングするようになりました。(@gaearon in #14654)

• Warn about mismatching Hook order in development. (@threepointone in #14585 and @acdlite in #14591)

  開発時において Hook の順番の不一致に関して警告を出すようになりました。(@threepointone in #14585 and @acdlite in #14591)

• Effect clean-up functions must return either undefined or a function. All other values, including null, are not allowed. @acdlite in #14119

  作用をクリーンアップする関数は、undefined か 関数を返さなければなりません。null を含む他のすべての値は許可されません。@acdlite in #14119

React Test Renderer

• Support Hooks in the shallow renderer. (@trueadm in #14567)

  shallow renderer で Hooks をサポートしました。(@trueadm in #14567)

• Fix wrong state in shouldComponentUpdate in the presence of getDerivedStateFromProps for Shallow Renderer. (@chenesan in #14613)

  Shallow Renderer の getDerivedStateFromProps が存在する場合において、shouldComponentUpdate の間違った state を修正しました。(@chenesan in #14613)

• Add ReactTestRenderer.act() and ReactTestUtils.act() for batching updates so that tests more closely match real behavior. (@threepointone in #14744)

  現実の振る舞いとより厳密に一致するように、更新をバッチ処理するための ReactTestRenderer.act() と ReactTestUtils.act() を追加しました。(@threepointone in #14744)

ESLint Plugin: React Hooks

• Initial release. (@calebmer in #13968)

  最初のリリースとなりました。(@calebmer in #13968)

• Fix reporting after encountering a loop. (@calebmer and @Yurickh in #14661)

  ループが発生した後のレポーティングを修正しました。(@calebmer and @Yurickh in #14661)

• Don’t consider throwing to be a rule violation. (@sophiebits in #14040)

  throw することをルール違反だと決めないようにしました。(@sophiebits in #14040)

Hooks Changelog Since Alpha Versions

The above changelog contains all notable changes since our last stable release (16.7.0). As with all our minor releases, none of the changes break backwards compatibility.

上記の変更履歴は、前回の安定版（16.7.0）からの特記すべきすべての変更を含んでいます。これまでのすべてマイナーリリースと同様に、どの変更も後方互換性を損なうことはありません。

If you’re currently using Hooks from an alpha build of React, note that this release does contain some small breaking changes to Hooks. We don’t recommend depending on alphas in production code. We publish them so we can make changes in response to community feedback before the API is stable.

もし、React のアルファ版から Hooks を現在使用しているなら、このリリースは Hooks に対してちょっとした破壊的変更をいくつか含んでいるということに注意してください。わたしたちはプロダクションのコードにおいて、アルファ版に依存していることをオススメしません。 アルファ版を公開している目的は、API が安定するまでコミュニティからのフィードバックに応じて変更を加えることができるようにするためです。

Here are all breaking changes to Hooks that have been made since the first alpha release:

以下は、最初のアルファ版がリリース以降に作られた Hook に対するすべての破壊的変更です。

• Remove useMutationEffect. (@sophiebits in #14336)

  useMutationEffect を削除しました。(@sophiebits in #14336)

• Rename useImperativeMethods to useImperativeHandle. (@threepointone in #14565)

  useImperativeMethods を useImperativeHandle に名前を変更しました。(@threepointone in #14565)

• Bail out of rendering on identical values for useState and useReducer Hooks. (@acdlite in #14569)

  useState Hook と useReducer Hook の同じ値でのレンダリングを回避するようになりました。(@acdlite in #14569)

• Don’t compare the first argument passed to useEffect/useMemo/useCallback Hooks. (@acdlite in #14594)

  useEffect/useMemo/useCallback Hook に渡される第一引数を比較しないようになりました。(@acdlite in #14594)

• Use Object.is algorithm for comparing useState and useReducer values. (@Jessidhia in #14752)

  useState と useReducer の値を比較するために、Object.is アルゴリズムを使うようになりました。(@Jessidhia in #14752)

• Render components with Hooks twice in Strict Mode (DEV-only). (@gaearon in #14654)

  クラスの振る舞いと一致するように Strict Mode において（開発時のみ）、2 回 Hooks でコンポーネントをレンダリングするようになりました。(@gaearon in #14654)

• Improve the useReducer Hook lazy initialization API. (@acdlite in #14723)

  useReducer Hook の遅延初期化 API を改善しました。(@acdlite in #14723)

訳者まとめ

翻訳は以上です。2018年10月に発表されて React 界隈に大きな衝撃をもたらせた React Hooks がついに安定版としてリリースされました。記事にもあったように、React Hooks は、Stateless だった Function Component でも state を扱えるようにする仕組みです。これにより Class Component が不要となり、完全に関数だけの世界が実現されます。もちろん引き続き Class Component は使い続けることはできるので従来のスタイルで書けなくなるということはありませんが、今回のリリースにより React が大きく変わる転換期を迎えることになるでしょう。マイナーリリースという位置付けではありますが、そのように大きな意味を持ったリリースでもあります。

React Hooks の詳細については、記事にもありましたが、公式ドキュメントが充実しているので、そちらに目を通すのが良いかと思います。公式ドキュメントの日本語翻訳プロジェクトも始まっているので、そのうち日本語でも読めるようになるかと思います。それから、公式ドキュメントも良いですが、Dan Abramovさんが React Hooks の使い方を紹介する動画も公開されています。クラスコンポーネントで書いた場合と、React Hooks で書いた場合を比較しながら紹介してくれていて、英語がわからなくても動画の内容に合わせて一緒にコードを書いていくだけで、それなりに理解が深まる内容になっています。これが大変オススメです。