Build Your Own Custom React Hook
Hooks are functions that can be called inside functional components to add various capabilities.
React Hooks provide a way to add stateful logic to functional components in React. They were introduced in React version 16.8 as a way to write reusable and more concise code compared to using class components and lifecycle methods.
With React Hooks, we can use built-in hooks like useState, useEffect, useContext, useMemo etc., or create your own custom hooks.
In this article we will learn how to create our very own custom react hooks. Before we start, let’s see an example.
Example: 1
We need a toggle button that allows the user to switch between the dark or light mode of the application.
In React, we can do this easily.
const SwitchColorMode = () => {
const [colorMode, colorModeSet] = useState(false);
const handleClick = useCallback(() => {
colorModeSet((prevState) => !prevState);
}, []);
return (
<div className="wrapper">
<label>Color Mode</label>
<button onClick={handleClick}>
{colorMode ? 'on' : 'off'}
</button>
</div>
);
};Example: 2
What if, we need another component that shows and hides the content?
We will follow the same approach.
const Accordion = () => {
const [open, openSet] = useState(false);
const handleClick = useCallback(() => {
open((prevState) => !prevState);
}, []);
return (
<div className="wrapper">
<label onClick={handleClick}>Click me to learn more..</label>
{open && <>Hello There!</>}
</div>
);
};See, in both examples, the logic is the same. That means we can separate the behavior from the UI. For that, we can create a simple hook that just manages the boolean state in a concise and reusable way.
Build Your Own Custom React Hook
Let’s create a custom hook for the above example.
import { useState } from 'react';
function useToggle(initialValue = false) {
const [state, stateSet] = useState(initialValue);
function toggle() {
stateSet(prevState => !prevState);
}
return [state, toggle];
}In this example, we define a custom hook called useToggle that initializes a boolean state with an initial value defaulting to false.
It returns an array with two elements: the current boolean value and a toggle function.
The toggle function uses the stateSet function provided by the useState hook to toggle the boolean value.