Rollback of Event Handling Mechanism in overlay-kit

[jungpaeng]

useSyncExternalStore resolves tearing issues, but it doesn’t work well with suspense.
More details can be found in the following issue: facebook/react#26382.

Due to this incompatibility, when overlay components include logic that triggers fallbacks—such as useSuspenseQuery—errors like
"A component suspended while responding to synchronous input." may occur.

We confirmed that this issue does not arise when using the event-based approach.
Therefore, we are removing useSyncExternalStore from overlay-kit.

[jungpaeng]

It’s still unclear whether working around this issue is the right long-term solution.

We’ve observed that the same error can occur even in code that doesn’t use overlay-kit and instead relies on useState, as long as it’s not wrapped in a <Suspense> boundary.

We’ll take some more time to think through the best approach moving forward.

[jungpaeng]

If anyone has any thoughts or suggestions about this approach, please feel free to share them.

[jungpaeng]

We have determined that the functionality previously supported by useOverlay is considered a bug that goes against the intended behavior of React, and we have decided to no longer support it.

[jungpaeng]

I think I’ve found another bug in useSyncExternalStore.

Reopening the issue.

[jungpaeng]

function DemoWithEsOverlay() {
  function openOverlay() {
    overlay.open(({ isOpen, unmount }) => {
      return (
        <Modal isOpen={isOpen} onExit={unmount}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
            <p>MODAL CONTENT</p>
            <button
              onClick={() => {
                unmount();
                openOverlay();
              }}
            >
              close modal
            </button>
          </div>
        </Modal>
      );
    });
  }

  return (
    <div>
      <p>Demo with overlay-kit</p>
      <button onClick={openOverlay}>open modal</button>
    </div>
  );
}

When using useSyncExternalStore, the React scheduler optimizes the update, and as a result, the modal does not reopen after being unmounted.

To be precise, the modal is added (via an ADD dispatch), but it is not shown (OPEN does not occur).

This happens because the open(...) function triggers an ADD dispatch, but from React’s perspective, the component tree remains unchanged. Therefore, it does not trigger a subsequent OPEN dispatch.