Audience: developers that write React.js code.
If you have a large page component with many useState, useEffect, useWhatever, please remember you can create custom hooks that calls your individual hooks.
This is a component with poor encapsulation. All the innards (hooks) are spilled out onto the same local area.
```
function MyPage() {
useState for this button
useEffect for my button
useCallback for my button
useState for navbar
useState for navbar filter
useState for another navbar
}
```
Now try this.
```
function MyPage() {
const { ... } = useButton()
const { ... } = useNavbar()
}
function useButton() {
useState for this button
useEffect for my button
useCallback for my button
return { all the states, handlers you want }
}
function useNavbar() {
useState for navbar
useState for navbar filter
useState for another navbar
return { all the states, handlers you want }
}
That's all. Now your code broken up and grouped into its nice little boxes.
```
What are the costs?
1. A tiny bump on the call stack because we're creating a function. But you really shouldn't need to care about this.
2. The usual pains of React when you want to return references from your custom hooks that that end up in your dependency arrays. If you actually don't keep your references stable in your custom hooks, and some other hook uses it, you'll hit infinite renders.
If you have a large page component with many useState, useEffect, useWhatever, please remember you can create custom hooks that calls your individual hooks.
This is a component with poor encapsulation. All the innards (hooks) are spilled out onto the same local area.
```
function MyPage() {
useState for this button
useEffect for my button
useCallback for my button
useState for navbar
useState for navbar filter
useState for another navbar
}
```
Now try this.
```
function MyPage() {
const { ... } = useButton()
const { ... } = useNavbar()
}
function useButton() {
useState for this button
useEffect for my button
useCallback for my button
return { all the states, handlers you want }
}
function useNavbar() {
useState for navbar
useState for navbar filter
useState for another navbar
return { all the states, handlers you want }
}
That's all. Now your code broken up and grouped into its nice little boxes.
```
What are the costs?
1. A tiny bump on the call stack because we're creating a function. But you really shouldn't need to care about this.
2. The usual pains of React when you want to return references from your custom hooks that that end up in your dependency arrays. If you actually don't keep your references stable in your custom hooks, and some other hook uses it, you'll hit infinite renders.
Dennis