<pre><code>


// This is a React coding question from BFE.dev

import React from 'react'

export function useClickOutside(callback: () =&gt; void) {
  // your code here
  const currentNodeRef = React.useRef&lt;HTMLElement&gt;();

  const handleClick = (e: Event) =&gt; {
      if (!currentNodeRef.current?.contains(e.target)) {
        callback();
      }
  }
  const callbackRef = React.useCallback((node: HTMLElement) =&gt; {
    // clean up
    document.removeEventListener('click', handleClick);
    currentNodeRef.current = node;
    if (node!== null) {
      document.addEventListener('click', handleClick)  
    }
    
  }, [])


  return callbackRef;
}
</code></pre>

With useCallback only

Click above header menu on this page, you can see that the dropdown menu is dismissed after clicking outside. [https://cdn.bfe.dev/bfe/img/VTHJ7ozQwkb…