Implement useToggle() Custom Hook in React (Interview)

Custom hooks in React are a powerful way to reuse stateful logic across multiple components, and helps to write clean code that is extensible and easily testable.

In this blog post, we will implement a useToggle() custom hook in react to efficiently handle toggle functionality in React applications. This custom hook will help in toggling between states in different components like accordion and modal.

Implementation of useToggle() Custom Hook

Let's start by creating the useToggle() custom hook. This hook will manage the state of a boolean value and provide a toggle function to handle the show and hide (toggle) states.

import { useState } from 'react';

const useToggle = (initialState = false) => {
    const [state, setState] = useState(initialState);

    const toggle = () => {
        setState(!state);
    };

    return [state, toggle];
};

export default useToggle;

In the above code snippet,

we define a custom hook useToggle() that takes an initial state (defaulted to false) as a parameter. It uses the useState hook to manage the state of the boolean value and returns an array containing the current state and a function to toggle the state.

Using the useToggle() Hook

Now, let's see how we can use the useToggle() custom hook to toggle the state in a React component

import React from 'react';
import useToggle from './useToggle';

const ToggleComponent = () => {
    const [isToggled, toggle] = useToggle();

    return (
        <div>
            <p>The toggle state is: {isToggled.toString()}</p> // Convert boolean into string
            <button onClick={toggle}>Toggle Now</button>
        </div>
    );
};

export default ToggleComponent;

In the above code snippet,

We import the useToggle() custom hook and use it inside a component called ToggleComponent. We de-structure the returned array into isToggled (current state) and toggle (function to toggle the state). The component renders a paragraph displaying the current state and a button to toggle it.

Learn Next

1. 20 Most Asked Custom Hooks in React for Interviews
2. Best Resources to prepare for React Interviews