Bug: useEffect happens synchronously when useLayoutEffect was called

[just-boris]

React version: 17.0.2 (also tested on 16.9.0, same result)

Steps To Reproduce

1. Open this codesandbox: https://0gobm.csb.app/ (Source)
2. Try to click on the "Works" button
3. Dropdown opens
4. Try to click on the "Broken" button
5. Dropdown does not open

Link to code example:

https://0gobm.csb.app/

The issue is related to how useEffect calls are scheduled. We have this effect:

  useEffect(() => {
    if (!open) {
      return;
    }
    const clickListener = (event) => {
      if (!dropdownRef.current.contains(event.target)) {
        onDropdownClose();
      }
    };

    window.addEventListener("click", clickListener);

    return () => {
      window.removeEventListener("click", clickListener);
    };
  }, [open, onDropdownClose]);

Normally, this effect happens asynchronously. However, sometimes, it is synchronous and we add listener to the window before the event fully bubbles and the dropdown gets closed by the same event.

This only happens if any underlying component contains useLayoutEffect with setState call (as shown on codesandbox). Looks like this causes forced render and this chain of events.

P.S. The report looks very similar to another one: #20074. However, I decided to open a new issue, because the circumstances are different (no portals in this case)

[bvaughn]

useEffect is only synchronously run when an update is scheduled from useLayoutEffects. Updates from within layout effects must be applied synchronously (before paint) as that's the only point where users can e.g. tweak tooltip positions, dialog sizes, etc without the user seeing a flash of invalid content. In order to preserve the overall contract about when effects will run, React must also synchronously flush pending passive effects before handling the update.

Unfortunately this is expected behavior, but it also has a simple workaround: listen to the event during the capture phase.

window.addEventListener("click", clickListener, true);

Alternately you could use a setTimeout to debounce when the "click" event is attached:

useEffect(() => {
  // Delay until after the current call stack is empty,
  // in case this effect is being run while an event is currently bubbling.
  // In that case, we don't want to listen to the pre-existing event.
  let timeoutID = setTimeout(() => {
    timeoutID = null;

    window.addEventListener("click", clickListener);
  }, 0);

  return () => {
    if (timeoutID !== null) {
      clearTimeout(timeoutID);
    }

    window.removeEventListener("click", clickListener);
  };
}, []);