How to remove event listener mousedown on component unmount using useeffect react hook?

Question

i want to remove eventlistener mousedown on component unmount using react usehook below is my code,

function Dialog ({setIsDialogOpen, items}: Props) {
const dialogRef = React.useRef<HTMLDivElement>(null);


React.useEffect(() => {
    const handleClickOutsideDialog = (event: any) => {
        if (
            dialogRef &&
                !dialogRef.contains(event.target)//error here
        ) {
            alert('You clicked outside of me!');
            setIsDialogOpen(false);
          }
    };
    document.addEventListener('mousedown', handleClickOutsideDialog);
}, [setIsDialogOpen]);


return (
    <Wrapper ref={dialogRef}>
        <Container_one>
            <span>title</span>
            <Description> some big description</Description>
        </Container_one>
        <Container_two>
            {items.map(item => (
                <div
                    key={item.id}
                />
            ))}
        </Container_two>
    </Wrapper>
);

this works fine. but i want to remove event listener on unmount using usehook. how can i do it. could someone help me with this. thanks.

Answer 1

You add the removeEventListener() in the cleanup func.

You can find the information in the documentation .

React.useEffect(() => {
    const handleClickOutsideDialog = (event: any) => {
        if (
            dialogRef &&
                !dialogRef.contains(event.target)//error here
        ) {
            alert('You clicked outside of me!');
            setIsDialogOpen(false);
          }
    };
    document.addEventListener('mousedown', handleClickOutsideDialog);

    return () => { 
        document.removeEventListener('mousedown', handleClickOutsideDialog);
    }
}, [setIsDialogOpen]);