Custom Hooks In React
React Hooks are functions that let you “hook into” React state and lifecycle features from function components. — React Docs
In React 16.8, React added hooks that let you use state, use effect, and other React features without writing a class. There are many handfuls of built-in hooks that are provided by React.
Sometimes, we want to reuse some stateful logic between our components but it’s not covered in the built-in hooks. To solve this, we as React developers, can create our own hooks called Custom Hooks.
Rules of Hooks
Before we create our own Custom Hooks, there are 2 specific rules that we need to know about Hooks:
- Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
There are also unwritten rules about creating Custom Hooks:
- Custom Hooks are named with “use” as a prefix. (e.g. useToggle, useArray, useObject)
- Custom Hook is a function that contains at least one or multiple built-in hooks from React Hooks. If a Custom Hook does not contain any built-in hooks, it’s not a Custom Hook.
Why Custom Hooks
Before we create one, let’s take a look at this example:
In this example, we have a component that renders a button that can toggle the boolean value. When we want to set the boolean value to
false directly, we can do it as follows:
What if we want to make another component that has a boolean state that can be toggled, or set true and false however we want? We create the same state and function on the other component. This will keep repeating for any boolean state. To avoid that, we can create a Custom Hook called useBoolean.
Create Custom Hooks
We will create a Custom Hook called useBoolean. This hook is used to manage the state for the boolean data type. This hook will:
- have an initial state from the parameter,
- returns the state and the functions to manage the state in an array. Use array when you want to return multiple values.
Implement Custom Hooks
Back to our component, we can use this custom hook by passing an initial state to it and using its returned values to display and manage the state. It looks like this:
Benefits of Custom Hooks
With the example above, we can see the benefit of using Custom Hooks:
- Reusable, we can use the hooks again and again.
- Clean code, no repeated same logic function on every component.
- Easy to maintain, update the custom hooks, and it can be reflected on all components that used the hooks.
We explained about custom hooks, what are the rules of custom hooks, how to create one, how to implement one, and the benefits of custom hooks.
I hope you enjoyed this article. Thanks for reading! Feel free to post some comments if you have any questions, or if you just want to say hi.
- React Build-in Hooks API — Official React docs about React Build-in Hooks.
- React Custom Hooks — Official React docs about Custom Hooks.
- useHooks — A website that provides many Custom Hooks and it’s easy to understand. Created by ui.dev.
- react-use — NPM package that contains many common and special custom hooks. My team are using this and it’s awesome!