javascript - addEventListener does not work within a useEffect hook - Stack Overflow

admin管理员组

文章数量:1302341

The following is a ponent 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 ponent to avoid unnecessary overhead?

The following is a ponent 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 ponent to avoid unnecessary overhead?

• javascript
• reactjs
• dom-events

Share Follow asked Jul 29, 2019 at 22:02 John SmithJohn Smith 4,39366 gold badges2828 silver badges4949 bronze badges 2

• 1 window.addEventListener("focus", focusFunction); return window.removeEventListener("focus", focusFunction); <-- what is that? Why are you adding the event and removing it and returning what removeEventListener returns? – epascarello Commented Jul 29, 2019 at 22:09
• @epascarello Returning a function that will be used to clean up once the ponent dismounts. I should return () => window.remove..., however this change still did not make it work. – John Smith Commented Jul 29, 2019 at 22:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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

The function gets called when the ponent unmounts

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

本文标签： javascriptaddEventListener does not work within a useEffect hookStack Overflow