react.dev/content/blog/2019-02-04-react-v16.8.0.md

title	author
React v16.8: The One With Hooks	[gaearon]

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

What Are 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.

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

• 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.

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.

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 your existing code using classes.

Can I Use Hooks Today?

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

• 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.

React Native will fully support Hooks in its next stable release.

Tooling Support

React Hooks are now fully supported by React DevTools. They are also supported in the latest Flow and TypeScript definitions for React. We recommend using a new lint rule 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, we saw many interesting examples of custom Hooks for animations, forms, subscriptions, integrating with other libraries, and so on. Our goal is to empower the React community to write components and Hooks that deliver great user and developer experience. We can't wait to see what you'll create next!

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 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.

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)
• 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)

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)

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)