Click Outside to Close - React Hook 

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

Hope this useful for you :)))

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.

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

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

Thank bro :))) yes, Im Vietnamese

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

Thanks. Yes, I do it myself. You can watch how I built it from scratch in the previous video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KROfo7vuIGY.html

Cảm ơn bạn nhé

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 ); };

I have no experience with TypeScript, but I plan to learn it in the near future :))

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