Animation behaving differently (improved) in React 18

[ad1992]

Hi team,
We were debugging an animation related issue in Excalidraw, fortunately which gets fixed in React 18.

The scenario is when user clicks on a button, an animation takes place which is jerky(blanking canvas) in React 17, but smooth in React 18.

Here is the link, turn on the flag useReact18API for React 18 to see the difference.

As per debugging, in React 17 the resizeObserver handler gets triggered twice when width is updated during transition in React 17
First time when it gets called, the width of DOM container is 1368.1640625
where as in state its 1369 => state gets updated => CDU => canvas is painted
2nd time it gets called when width of DOM container is 958.296875
and state is 1368.1640625 => state gets updated => CDU => canvas is painted

In React 18 the resize Observer gets triggered only once
the width of DOM container is 1368.1640625
where as in state its 1369, => state gets updated => CDU => canvas is painted
And thats it.
Surprisingly the new width is 958.29 for which the resize handler never gets triggered in React 18.

The canvas paint is run behind a throttle request animation frame.

Even with StrictMode the behaviour is same.

I guess, since canvas is painted twice thats why the blanking is visible in React 17 but not in React 18.
But I am not really sure why the resize handler gets triggered only once in React 18. Your insights will be helpful 🙂.
Thanks!