@ -61,7 +61,7 @@ React doesn't offer a way to "attach" reusable behavior to a component (for exam
With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. **Hooks allow you to reuse stateful logic without changing your component hierarchy.** This makes it easy to share Hooks among many components or with the community.
With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. **Hooks allow you to reuse stateful logic without changing your component hierarchy.** This makes it easy to share Hooks among many components or with the community.
We'll discuss this more in [Writing Custom Hooks](/docs/hooks-custom.html).
We'll discuss this more in [Building Your Own Hooks](/docs/hooks-custom.html).
@ -64,7 +64,7 @@ The [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScrip
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don't work inside classes -- they let you use React without classes. (We [don't recommend](/docs/hooks-intro.html#gradual-adoption-strategy) rewriting your existing components overnight but you can start using Hooks in the new ones if you'd like.)
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don't work inside classes -- they let you use React without classes. (We [don't recommend](/docs/hooks-intro.html#gradual-adoption-strategy) rewriting your existing components overnight but you can start using Hooks in the new ones if you'd like.)
React provides a few built-in Hooks like `useState`. You can also create custom Hooks to reuse stateful behavior between different components. We'll look at the built-in Hooks first.
React provides a few built-in Hooks like `useState`. You can also create your own Hooks to reuse stateful behavior between different components. We'll look at the built-in Hooks first.
>Detailed Explanation
>Detailed Explanation
>
>
@ -174,7 +174,7 @@ We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-h
>
>
>You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html).
>You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html).
## 💡 Custom Hooks
## 💡 Building Your Own Hooks
Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: [higher-order components](/docs/higher-order-components.html) and [render props](/docs/render-props.html). Custom Hooks let you do this, but without adding more components to your tree.
Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: [higher-order components](/docs/higher-order-components.html) and [render props](/docs/render-props.html). Custom Hooks let you do this, but without adding more components to your tree.
@ -239,7 +239,7 @@ You can write custom Hooks that cover a wide range of use cases like form handli
>Detailed Explanation
>Detailed Explanation
>
>
>You can learn more about custom Hooks on a dedicated page: [Writing Custom Hooks](/docs/hooks-custom.html).
>You can learn more about custom Hooks on a dedicated page: [Building Your Own Hooks](/docs/hooks-custom.html).
In the future, we intend to include this plugin by default into Create React App and similar toolkits.
In the future, we intend to include this plugin by default into Create React App and similar toolkits.
**You can skip to the next page explaining how to write [custom Hooks](/docs/hooks-custom.html) now.** On this page, we'll continue by explaining the reasoning behind these rules.
**You can skip to the next page explaining how to write [your own Hooks](/docs/hooks-custom.html) now.** On this page, we'll continue by explaining the reasoning behind these rules.
## Explanation
## Explanation
@ -134,4 +134,4 @@ React wouldn't know what to return for the second `useState` Hook call. React ex
## Next Steps
## Next Steps
Finally, we're ready to learn about [writing custom Hooks](/docs/hooks-custom.html)! Custom Hooks let you combine Hooks provided by React into your own abstractions, and reuse common stateful logic between different components.
Finally, we're ready to learn about [writing your own Hooks](/docs/hooks-custom.html)! Custom Hooks let you combine Hooks provided by React into your own abstractions, and reuse common stateful logic between different components.
Dan Abramov
6 years ago
GitHub