Toggling a boolean value is a common task in many React applications, but it can be cumbersome to manage state and logic across components.

React Hooks provide a clean and reusable way to handle stateful logic, and a toggle hook is a simple yet powerful example of how Hooks can simplify your code.

In this blog post, we’ll explore how to create a toggle hook in React that toggles a boolean value and returns the current value and a toggle function.

useBoolean Hook Code

Here’s a hook to toggle a boolean value in React.js with TypeScript:

import { useState } from "react";

const useToggle = (initialValue: boolean): [boolean, () => void] => {
  const [value, setValue] = useState<boolean>(initialValue);

  const toggleValue = () => {
    setValue((prevValue) => !prevValue);
  };

  return [value, toggleValue];
};

export default useToggle;

useBoolean Hook Code Usage Example

You can use this hook by importing it into your React component and then calling it like this:

import useToggle from "./useToggle";

function MyComponent() {
  const [isToggled, toggleIsToggled] = useToggle(false);

  return (
    <div>
      <button onClick={toggleIsToggled}>Toggle</button>
      {isToggled ? <p>It's toggled!</p> : <p>It's not toggled yet.</p>}
    </div>
  );
}

Explanation

In this example, the useToggle hook takes an initial value for the boolean and returns a tuple with the current value and a function to toggle it.

The toggleValue function uses the setValue function returned by useState to set the new value of the boolean. In the component, we destructure the tuple into isToggled and toggleIsToggled and use them to update the UI when the button is clicked.