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?

Thanks in advance for your help and ideas

score 5 · Answer 1 · answered Apr 23 '22 at 19:41

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

It works! In a rare cases when you need to render component and do something after it's in DOM it can be very handy. I've used it in some legacy code, where we use Backbone and React together ;) — Rafal Spacjer, Dec 16 '22 at 14:03

score 0 · Answer 2 · answered Apr 23 '22 at 18:36

0

Didn't tried on your scenario but maybe act could work https://reactjs.org/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;
});

answered Apr 23 '22 at 18:36

waken22

11
1

Thanks, I just tried and it seems to be working, however I am getting a warning since I am using it outside of a testing environment: `The current testing environment is not configured to support act` – piero-la-lune Apr 23 '22 at 19:36

React 18: how to force synchronous rendering?

2 Answers2