I like the way you say it out loud :))

I was getting an console error: Uncaught TypeError: Cannot read properties of null (reading 'contains') at HTMLDocument.handler. But if I wrapped the if statement with another if (menuRef.current) { }, the error went away.

Hope this useful for you :)))

Thank you so much for your kind words and feedback!

@@TK-ot8dj hay can you make same video for class based component because i am trying to do the same but for every click on the home page it is calling clickhandlerOutside

Cảm ơn bạn nhé

Thank bro :))) yes, Im Vietnamese

cảm ơn em nhé :)))

That's not how the empty array works, empty array only renders it once, it does not remove the functionality once the component is unmounted, so if you don't remove the eventListener, the outside click event might trigger even after the drop-down menu etc is hidden, I'm not exactly sure since I'm a beginner too but cleaning it up is always recommended

Thanks. Yes, I do it myself. You can watch how I built it from scratch in the previous video kzfaq.info/get/bejne/gbh_mdJo29utd40.html

thanks for your advice, i will do better in the next video

Great question! To make this into a custom hook, you can extract the functionality of detecting an outside click and closing the menu into a separate function, which can be reused for any type of popup, sidebar or navbar. Here's an example of how you can create a custom hook: import { useEffect } from "react"; export const useClickOutside = (ref, callback) => { const handleClick = (e) => { if (ref.current && !ref.current.contains(e.target)) { callback(); } }; useEffect(() => { document.addEventListener("click", handleClick); return () => { document.removeEventListener("click", handleClick); }; }); }; Then, in your component where you want to use the custom hook, you can simply use it like this: import { useRef } from "react"; import { useClickOutside } from "./useClickOutside"; const MyComponent = () => { const ref = useRef(null); const handleCloseMenu = () => { // close your menu logic here }; useClickOutside(ref, handleCloseMenu); return ( // your menu component here ); };