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?

piero-la-lune · Accepted Answer · 2022-04-23 19:41:05Z

10

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

answered Apr 23, 2022 at 19:41

piero-la-lune

3012 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rafal Spacjer Over a year ago

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

nostop Jan 16 at 19:48

damn, you just saved my day!

waken22 · Accepted Answer · 2022-04-23 18:36:33Z

-1

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, 2022 at 18:36

waken22

292 bronze badges

1 Comment

piero-la-lune Over a year ago

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

Collectives™ on Stack Overflow

React 18: how to force synchronous rendering?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related