React 18: how to force synchronous rendering?

Question

After upgrading to React 18, I am having issues with Leaflet popup rendering.

It seems the new rendering function has become asynchronous, which breaks Leaflet popup display (because Leaflet needs to compute the size of the popup for positioning, but now it gets an empty content since React has not yet rendered the popup).

Before (working as expected):

marker.bindPopup(() => {
  var div = document.createElement('div');
  ReactDOM.render(<MyPopup />);
  console.log(div.innerHTML); // <div>[...]</div>
  return div;
});

With React 18 (positioning broken):

marker.bindPopup(() => {
  var div = document.createElement('div');
  createRoot(div).render(<MyPopup />);
  console.log(div.innerHTML); // empty string!
  return div;
});

Is there any way to force React 18 to render the popup before returning the div?

Answer 1

I just found another solution that seems to be working, and better suited to a production environment: flushSync. In the React documentation, it is not mentioned for this purpose, only to opt out of automatic batching.

I still not sure if this is the correct way to do it, or if it will break in a future update.

marker.bindPopup(() => {
  var div = document.createElement('div');
  const root = createRoot(div);

  flushSync(() => {
    root.render(<MyPopup />);
  });

  console.log(div.innerHTML); // <div>[...]</div>
  return div;
});