React v16.8: La primera con Hooks

¡Con React 16.8, los Hooks de React están disponibles en una versión estable!

¿Qué son los Hooks?

Los Hooks te permiten utilizar estado y otras caracteristicas de React sin tener que utilizar clases. También puedes crear tus propios Hooks para compartir lógica con estado reutilizable entre componentes.

Si nunca antes has escuchado hablar de los Hooks, es posible que estos recursos te resulten interesante:

• Presentando Hooks explica el por qué estamos agregando los Hooks a React.
• Un vistazo a los Hooks es una rápida descripción general de los Hooks integrados.
• Construyendo tus propios Hooks demuestra la reutilización del código con Hooks personalizados.
• Dar Sentido a los Hooks de React explora las nuevas posibilidades que ofrecen los Hooks.
• useHooks.com muestra recetas y demostraciones de Hooks mantenidos por la comunidad.

No es necesario que aprendas Hooks en estos momentos. Los Hooks no tienen cambios con ruptura y no tenemos planes de eliminar las clases de React. Las preguntas frecuentes sobre Hooks describen la estrategia de adopción gradual.

Sin Grandes Reescrituras

Nosotros no recomendamos reescribir tus aplicaciones existentes para utilizar Hooks de la noche a la mañana. En su lugar, intente utilizar Hooks en alguno de los nuevos componentes y haganos saber que piensa. El código que utiliza Hooks funcionará junto con el código existente que utiliza clases.

¿Puedo utilizar Hooks al día de hoy?

¡Sí! A partir de la 16.8.0, React incluye una implementación estable de React Hooks para:

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

Tenga en cuenta que al habilitar Hooks, todos los paquetes de React necesitan tener una versión igual a 16.8.0 o superior. Los Hooks no funcionarán si olvidas actualizar, por ejemplo, React DOM.

React Native soportará Hooks en la versión 0.59.

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.

What’s Next

We described our plan for the next months in the recently published 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.

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!

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 can also wrap their APIs with it (for example, react-testing-library’s render and fireEvent utilities do this).

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.

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.

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.

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.

Installation

React

React v16.8.0 is available on the npm registry.

To install React 16 with Yarn, run:

yarn add react@^16.8.0 react-dom@^16.8.0

To install React 16 with npm, run:

npm install --save react@^16.8.0 react-dom@^16.8.0

We also provide UMD builds of React via a 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>

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:

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

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

Then add it to your ESLint configuration:

{
  "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)
• Improve the useReducer Hook lazy initialization API. (@acdlite in #14723)

React DOM

• Bail out of rendering on identical values for useState and useReducer Hooks. (@acdlite in #14569)
• Don’t compare the first argument passed to useEffect/useMemo/useCallback Hooks. (@acdlite in #14594)
• Use Object.is algorithm for comparing useState and useReducer values. (@Jessidhia in #14752)
• Support synchronous thenables passed to React.lazy(). (@gaearon in #14626)
• Render components with Hooks twice in Strict Mode (DEV-only) to match class behavior. (@gaearon in #14654)
• Warn about mismatching Hook order in development. (@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

React Test Renderer

• Support Hooks in the shallow renderer. (@trueadm in #14567)
• Fix wrong state in shouldComponentUpdate in the presence of getDerivedStateFromProps for Shallow Renderer. (@chenesan in #14613)
• Add ReactTestRenderer.act() and ReactTestUtils.act() for batching updates so that tests more closely match real behavior. (@threepointone in #14744)

ESLint Plugin: React Hooks

• Initial release. (@calebmer in #13968)
• Fix reporting after encountering a loop. (@calebmer and @Yurickh in #14661)
• Don’t consider throwing to be a rule violation. (@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.

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.

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

• Remove useMutationEffect. (@sophiebits in #14336)
• Rename useImperativeMethods to useImperativeHandle. (@threepointone in #14565)
• Bail out of rendering on identical values for useState and useReducer Hooks. (@acdlite in #14569)
• Don’t compare the first argument passed to useEffect/useMemo/useCallback Hooks. (@acdlite in #14594)
• Use Object.is algorithm for comparing useState and useReducer values. (@Jessidhia in #14752)
• Render components with Hooks twice in Strict Mode (DEV-only). (@gaearon in #14654)
• Improve the useReducer Hook lazy initialization API. (@acdlite in #14723)