addEventListener does not work within a useEffect hook

Question

The following is a component whose functionality, partly, is to change the window's title as the page is getting focused and blurred. It does not work.

const ATitleChangingComponent = () => {

    const focusFunction = (event: FocusEvent) => {
            document.title = "focused";
    };
    const blurFunction = (event: FocusEvent) => {
            document.title = "blurred";
    };


    useEffect(() => {
            window.addEventListener("focus", focusFunction);
            return window.removeEventListener("focus", focusFunction);
    }, []);

    useEffect(() => {
            window.addEventListener("blur", blurFunction);
            return window.removeEventListener("blur", blurFunction);
    }, []);

    return <p>some unimportant jsx</p>
};

However,

const focusFunction = (event: FocusEvent) => {
    document.title = "focused";
}; 
window.addEventListener("focus", focusFunction);

works just fine.

A side question: are const focusFunction and const blurFunction getting constructed within the function each render? I assume if so, they should be lifted out of the component to avoid unnecessary overhead?

Answer 1

Need to return a function, otherwise listener is removed immediately.

The function gets called when the component unmounts

useEffect(() => {
        window.addEventListener("blur", blurFunction);
        return () => window.removeEventListener("blur", blurFunction);
}, []);