-
Notifications
You must be signed in to change notification settings - Fork 7.9k
Update docs for stable Hooks #1593
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
08b6e4b
4d61b4a
f510e11
9d62821
eaefc81
57138d7
5da272a
e9081c7
d15ec6e
37d46dd
ee5fea9
e301239
2fd487e
ed6e711
0d89570
95258c0
e5a987b
d460a9b
f9f0d66
d97cdca
601c016
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Loading branch information
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| --- | ||
| title: "React v16.8: The One With Hooks" | ||
| author: [gaearon] | ||
| --- | ||
|
|
||
| With React 16.8, [React Hooks](/docs/hooks-intro.html) 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](/docs/hooks-intro.html) explains why we're adding Hooks to React. | ||
| * [Hooks at a Glance](/docs/hooks-overview.html) is a fast-paced overview of the built-in Hooks. | ||
| * [Building Your Own Hooks](/docs/hooks-custom.html) demonstrates code reuse with custom Hooks. | ||
| * [Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) explores the new possibilities unlocked by Hooks. | ||
| * [useHooks.com](https://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](/docs/hooks-faq.html) 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](/docs/hooks-intro.html#gradual-adoption-strategy) 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](https://www.npmjs.com/package/eslint-plugin-react-hooks) to enforce best practices with Hooks. It will soon be included into Create React App by default. | ||
|
|
||
| ## What's Next | ||
|
|
||
| React Hooks don't cover *all* use cases for classes yet but they're [very close](/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes). 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](https://medium.com/@drcmda/hooks-in-react-spring-a-tutorial-c6c436ad7ee4) 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](https://github.com/reactjs/rfcs/pull/68) 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: | ||
|
|
||
| ```bash | ||
| yarn add react@^16.8.0 react-dom@^16.8.0 | ||
| ``` | ||
|
|
||
| To install React 16 with npm, run: | ||
|
|
||
| ```bash | ||
| npm install --save react@^16.8.0 react-dom@^16.8.0 | ||
| ``` | ||
|
|
||
| We also provide UMD builds of React via a CDN: | ||
|
|
||
| ```html | ||
| <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](/docs/installation.html). | ||
|
|
||
| ## Changelog | ||
|
|
||
| ### React | ||
|
|
||
| * Adds [Hooks](https://reactjs.org/docs/hooks-intro.html) — a way to use state and other React features without writing a class. ([@acdlite](https://github.com/acdlite) et al. in [#13968](https://github.com/facebook/react/pull/13968)) | ||
|
|
||
| ### React DOM | ||
|
|
||
| * Support synchronous thenables passed to `React.lazy()`. ([@gaearon](https://github.com/gaearon) in [#14626](https://github.com/facebook/react/pull/14626)) | ||
|
|
||
| ### React Test Renderer | ||
|
|
||
| * Support Hooks in the shallow renderer. ([@trueadm](https://github.com/trueadm) in [#14567](https://github.com/facebook/react/pull/14567)) | ||
| * Fix shallow renderer passing incorrect state to `shouldComponentUpdate` in the presence of `getDerivedStateFromProps`. ([@chenesan](https://github.com/chenesan) in [#14613](https://github.com/facebook/react/pull/14613)) | ||
|
|
||
| ### ESLint Plugin: React Hooks | ||
|
|
||
| * Initial [release](https://www.npmjs.com/package/eslint-plugin-react-hooks). ([@calebmer](https://github.com/calebmer) in [#13968](https://github.com/facebook/react/pull/13968)) | ||
| * Fix reporting after encountering a loop. ([@calebmer](https://github.com/calebmer) and [@Yurickh](https://github.com/Yurickh) in [#13968](https://github.com/facebook/react/pull/13968)) | ||
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How about:
We strongly recommend enabling a new [lint rule called `eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) to enforce best practices with Hooks.CRA soon? Why not now?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Didn't want to make it a release blocker because we also wanted to get facebook/create-react-app#6219 in and possibly facebook/react#14636. But maybe we should just split those.