React allows calling a custom hook inside another custom hook. This approach is ideal for composing logic cleanly, just follow the Rules of Hooks.

Example: Composing Custom Hooks

Suppose you have two custom hooks:

A simple custom hook for toggling a boolean state

js

// useToggle.jsimport { useState } from ‘react’;

 

export function useToggle(initial = false) {

  const [value, setValue] = useState(initial);

  const toggle = () => setValue(v => !v);

  return [value, toggle];

}

A custom hook that uses useToggle and adds extra logic

// useDropdown.jsimport { useToggle } from ‘./useToggle’;

 

export function useDropdown() {

  const [isOpen, toggleOpen] = useToggle(false);

 

  // You can add more logic here if needed

  function open() { if (!isOpen) toggleOpen(); }

  function close() { if (isOpen) toggleOpen(); }

  return { isOpen, open, close, toggle: toggleOpen };

}

Also Read: The SEO for React Websites

Using the composed hook in a component

import { useDropdown } from ‘./useDropdown’;

function DropdownMenu() {

  const { isOpen, open, close, toggle } = useDropdown();

 

  return (

    <div>

      <button onClick={toggle}>Toggle Menu</button>

      {isOpen && <div>Menu Content</div>}

    </div>

  );

}

Here, useDropdown calls another custom hook, useToggle, internally.

Key Takeaways

  • Yes, you can nest custom hooks. It’s encouraged!
  • Follow the Rules of Hooks:
    • Call hooks at the top level of your custom hook.
    • Never call them conditionally.
  • Compose for clarity – small hooks ➜ composed hook ➜ lean component.