Click event added in useEffect after changing state by onClick is executed in same moment

Question

React 18 changed useEffect timing at it broke my code, that looks like this:

const ContextualMenu = ({ isDisabled }) => {
    const [isExpanded, setIsExpanded] = useState(false);
    const toggleMenu = useCallback(
        () => {
            if (isDisabled) return;

            setIsExpanded((prevState) => !prevState);
        },
        [isDisabled],
    );
    useEffect(() => {
        if (isExpanded) {
            window.document.addEventListener('click', toggleMenu, false);
        }

        return () => {
            window.document.removeEventListener('click', toggleMenu, false);
        };
    }, [isExpanded]);
    return (
        <div>
            <div class="button" onClick={toggleMenu}>
                <Icon name="options" />
            </div>
            {isExpanded && <ListMenu />}
        </div>
    );
};

The problem is, toggleMenu function is executed twice on button click - first one is correct, it's onClick button action, which changes state, but this state change executes useEffect (which adds event listener on click) and this click is executed on the same click, that triggered state change.

So, what should be correct and most "in reactjs spirit" way to fix this?

Answer 1

Your problem is named Event bubbling

You can use stopPropagation to fix that

const toggleMenu = useCallback(
    (event) => {
        event.stopPropagation();
        if (isDisabled) return;

        setIsExpanded((prevState) => !prevState);
    },
    [isDisabled],
);