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

It seems the new rendering function has bee asynchronous, which breaks Leaflet popup display (because Leaflet needs to pute 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?

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

It seems the new rendering function has bee asynchronous, which breaks Leaflet popup display (because Leaflet needs to pute 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?

• javascript
• reactjs

2 Answers 2

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;
});

Didn't tried on your scenario but maybe act could work https://reactjs/docs/testing-recipes.html#act

Remember to import act from react-dom/test-utils

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

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

   return div;
});