React V16.8: The One With Hooks February 06, 2019 by Dan Abramov

With React 16.8,React HookAvailable in stable versions!

What is a Hook?

Hook allows us to use state and other React features without having to write a class. We can also build our own hooks to share reusable stateful logic between components. If you have never heard of Hooks before, you may be interested in the following resources:

  • The Hook introduction explains why we added a Hook to React.
  • The Hook Overview is a quick overview of the built-in hooks.
  • Building your own Hooks demonstrates using custom hooks to reuse code.
  • Understand React Hook explores the new possibilities that come with unlocking hooks.
  • UseHooks.com features a community maintenance Hook tutorial and demo examples.

You don’t have to learn hooks now. There are no radical changes to Hook, and we have no plans to remove classes from React. This Hook FAQ describes the strategy to be adopted step by step.

You don’t have to rewrite it massively

We do not recommend rewriting your existing application to use Hooks overnight. Instead, we recommend that you try using Hooks in some new components, and let us know how you feel about them. Code that uses hooks works side by side with existing code that uses classes.

Can you use Hook now?

Of course! As of 16.8.0, React includes a stable implementation of React Hook to:

  • React DOM
  • React DOM Server
  • React Test Renderer
  • Note that to enable Hooks, all React packages need to be updated to 16.8.0 or higher. If you forget to upgrade, you cannot use Hooks, such as React DOM.

React Native will be supported in the 0.59 release.

Tool support

React DevTools currently supports React Hooks. This is also supported in the latest Flow and TypeScript definitions of React. We strongly recommend using a new checking rule called eslint-plugin-react-hooks to enforce Hook best practices. Soon it will also be included in the Create React App by default.

What’s next?

We’ve outlined our Roadmap for the next few months in our recently released React Roadmap.

Note that React Hook doesn’t cover all use cases for class yet, but it’s almost there.

Currently, only getSnapshotBeforeUpdate() and componentDidCatch() have no corresponding Hook API, and their life cycles are relatively unusual. If you need to, you should be able to use Hooks in most new code you write.

Although Hook is still in its infancy, the React community has already created interesting examples and manuals using Hook for animation, forms, subscriptions, integration with other libraries, and more. We are excited about Hooks that make it easier to reuse code and help us write components in a simpler way for a better user experience. We can’t wait to see your next creation!

Test the hooks

We added a new API called reacttestutils.act () in the release. It ensures that the behavior in the test matches the behavior in the browser more closely. We recommend wrapping any code that renders and triggers component updates into act() calls. Test libraries can also wrap their apis in it (for example, the React-testing-library render and fireEvent utilities do so).

For example, counters on this page could 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((a)= > {
  container = document.createElement('div');
  document.body.appendChild(container);
});

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

it('can render and update a counter', () = > {// Test first render and effect
  act((a)= > {
    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');
});
Copy the code

If you want to test custom Hooks, you can do so by creating a component in the test and using its Hooks, and then you can test the Hooks you wrote.

To reduce boilerplate, it is recommended to use the react-testing-library for testing, which is designed to encourage the writing of test cases.

Thank you

Thanks to all students who share their feedback by commenting in Hook RFC. We’ve read all of your comments and made some tweaks to the final API based on them.

The installation

React

React V16.8.0 is available on NPM.

To install React 16 using Yarn, run the following command:

Yarn add react @ ^ 16.8.0 react - dom @ ^ 16.8.0Copy the code

To install React 16, run the following command:

NPM install --save react@^16.8.0 react-dom@^16.8.0Copy the code

React UMD builds are also available via CDN:

<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>
Copy the code

Refer to the documentation for detailed installation instructions.

ESLint plugin for React Hook

Note: As mentioned above, it is strongly recommended that you use the ESlint-plugin-react-hooks rule. If you are using the Create React App instead of manually configuring ESLint, it is recommended that you wait for the next version of React – Scripts, which will be released soon and include this rule.

Assuming you have ESLint installed, run the following command:

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

# yarn
yarn add eslint-plugin-react-hooks@next --dev
Copy the code

Then, add the following to the ESLint configuration:

{
  "plugins": [
    // ...
    "react-hooks"]."rules": {
    // ...
    "react-hooks/rules-of-hooks": "error"}}Copy the code