@ -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.
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.)
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
>
@ -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).
## 💡 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.
@ -239,7 +239,7 @@ You can write custom Hooks that cover a wide range of use cases like form handli
>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.
**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
@ -134,4 +134,4 @@ React wouldn't know what to return for the second `useState` Hook call. React ex
## 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