React Hooks – Introduction, Usage, Tooling, and Changelog

Original author: Dan Abramov. Translation by UC International R&D Jothy.

What are Hooks?

Hooks let you use state and other React features without writing a class, and you can build custom Hooks to share reusable stateful logic across components.

If you are new to Hooks, the following resources may be useful:

Hooks Introduction – explains why Hooks were added to React.

Hooks Overview – quick overview of built‑in Hooks.

Building Your Own Hooks – demonstrates how to reuse code with custom Hooks.

Understanding React Hooks – explores new possibilities unlocked by Hooks.

useHooks.com – community‑maintained Hook usage and demos.

You don’t have to learn Hooks immediately; they won’t replace classes, and the Hooks FAQ describes the gradual adoption strategy.

No Major Rewrites

We don’t recommend rewriting existing apps just to use Hooks. Instead, try Hooks in new components and let us know your thoughts. Hook‑based code works alongside class‑based code.

Can I Use Hooks Now?

Yes! Starting with version 16.8.0, React includes a stable Hooks implementation that works with:

React DOM

React DOM Server

React Test Renderer

React Shallow Renderer

To enable Hooks, all React packages must be upgraded to 16.8.0 or higher; otherwise Hooks will not run.

React Native will support Hooks in version 0.59.

Tooling Support

React DevTools now supports Hooks, and the latest Flow and TypeScript definitions also cover them. We strongly recommend enabling the new lint rule eslint-plugin-react-hooks; Create React App will include it soon.

Planning

The recent React roadmap outlines upcoming plans for the next few months.

Note that Hooks do not yet cover every class use‑case, but they are close. Currently, getSnapshotBeforeUpdate() and componentDidCatch() have no Hook equivalents and are relatively uncommon. Use Hooks for most new code.

The community already uses Hooks for animations, forms, subscriptions, and library integrations, creating many interesting examples and improving code reuse and user experience.

Testing Hooks

A new API ReactTestUtils.act() has been added to ensure test behavior matches the browser more closely. All rendering and component updates should be wrapped in act(). Testing libraries like react‑testing‑library also wrap render and fireEvent with act().

To test a custom Hook, create a component that uses the Hook and test the component.

We recommend using react-testing-library to reduce boilerplate and encourage tests that simulate user behavior.

Acknowledgements

Thanks to everyone who provided feedback on the Hooks RFC; we have read all comments and made adjustments to the final API.

Installation

React

React 16.8.0 is published to the npm registry.

Install with Yarn:

Install with npm:

We also provide a UMD build via CDN:

React Hooks ESLint Plugin

Note: We strongly recommend using eslint-plugin-react-hooks lint rules.

If you use Create React App, the next version of react-scripts will include this rule.

Assuming ESLint is installed, run:

Then add the following ESLint configuration:

Changelog

React

Added Hooks – a way to use state and other React features without classes. (Proposed by @acdlite, #13968)

Improved useReducer Hook with lazy‑initialization API. (Proposed by @acdlite, #14723)

React DOM

Avoid unnecessary renders when useState or useReducer receive the same value. (Proposed by @acdlite, #14569)

Do not compare the first argument of useEffect / useMemo / useCallback. (Proposed by @gaearon, #14654)

Use Object.is to compare values of useState and useReducer. (Proposed by @Jessidhia, #14752)

Support synchronous thenables passed to React.lazy(). (Proposed by @gaearon, #14626)

In strict mode (DEV only), render components twice with Hooks to match class behavior. (Proposed by @gaearon, #14654)

Warn in development when Hook order mismatches. (Proposed by @threepointone, #14585 and @acdlite, #14591)

Effect cleanup must return undefined or a function; null is not allowed. (Proposed by @acdlite, #14119)

React Test Renderer

Support Hooks in shallow renderer. (Proposed by @trueadm, #14567)

Fix error state in shouldComponentUpdate when getDerivedStateFromProps exists. (Proposed by @chenesan, #14613)

Add ReactTestRenderer.act() and ReactTestUtils.act() for batch updates, making tests closer to real behavior. (Proposed by @threepointone, #14744)

ESLint Plugin: React Hooks

Initial release. (Proposed by @calebmer, #13968)

Fixed false reports after loops. (Proposed by @calebmer and @Yurickh, #14661)

Do not treat thrown errors as rule violations. (Proposed by @sophiebits, #14040)

Hooks Post‑Alpha Changelog

The following major changes have been made since the first stable version (16.7.0). None break backward compatibility.

Removed useMutationEffect. (Proposed by @sophiebits, #14336)

Renamed useImperativeMethods to useImperativeHandle. (Proposed by @threepointone, #14565)

Avoid unnecessary renders when useState or useReducer receive identical values. (Proposed by @acdlite, #14569)

Do not compare the first argument of useEffect / useMemo / useCallback. (Proposed by @gaearon, #14654)

Use Object.is to compare values of useState and useReducer. (Proposed by @Jessidhia, #14752)

In strict mode (DEV only), render components twice with Hooks. (Proposed by @gaearon, #14654)

Improved useReducer Hook with lazy‑initialization API. (Proposed by @acdlite, #14723)