tiket.com
Published in

tiket.com

Custom Hooks In React

Photo by Ferenc Almasi on Unsplash

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.
  • Only call Hooks from React function components. Don’t call Hooks from regular JavaScript 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:

Boolean value state management

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 true or false directly, we can do it as follows:

Set Boolean value to True or False with function

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.
Custom Hook — useBoolean.js

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:

Implement useBoolean.js to Component

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.

Conclusion

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.

Useful Link

  • 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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store