useBoolean hook

Here's a quick React hook for handling boolean values in your React functional components.

import { useState, useCallback } from "react";

export function useBoolean(initValue = false) {
  const [value, setValue] = useState(initValue);

  const toggle = useCallback(() => setValue(!value), [value]);

  return [value, toggle];
}

Using the hook is very easy:

function Hello() {
  const [ state, toggleState ] = useBoolean();
  
  return (
    <div class="container">
        <button onClick={toggleState}>Toggle Me</button>
        <span className="state">{ state ? "on" : "off"}</span>
    </div>
  );
}

Happy coding.