preact/compat: requestAnimationFrame works not the same way as in React 19

[krutoo]

• Check if updating to the latest Preact version resolves the issue

Describe the bug
Apparently rendering works differently in react and preact in relation to requestAnimationFrame

In Firefox requestAnimationFrame with useLayoutEffect works not the same way as in React 19

Here is a demo of problem:
https://github.com/user-attachments/assets/9a86e4f2-8e7a-441a-b75b-65837397cb74

There is no same problem with React 18/19

To Reproduce

Here is an example repo with simple modal component with implemented open/close transitions:
https://github.com/krutoo/typescript-react/tree/preact-compat-react-19-raf

Opening transition is not working in Firefox with preact/compat - there is no transition visually.

By process of elimination I discovered that the problem was in the requestAnimationFrame call in src/hooks/use-transition-status.ts

Looks like, when Preact is used, requestAnimationFrame callback is called on same render tick that previous render.

Sorry if I use terms that are not applicable to Preact and its rendering model, I just don't know enough about the internals of Preact.

Steps to reproduce the behavior:

1. Clone demo branch of repo with fresh Node.js (22+) installed
2. npm i && npm run dev
3. Try open modal in Firefox and see no opening transition

Expected behavior
I'm not sure if this is a problem or a feature of Preact or a feature of my source code.

[krutoo]

I also noticed that if you do it like this:

timers.requestAnimationFrame(() => {
  timers.requestAnimationFrame(() => setStatus('opening'));
});

instead this:

timers.requestAnimationFrame(() => setStatus('opening'));

Then it will work, but intermittently: in my other project it works but in a very strange way - if there are a lot of elements with same requestAnimationFrame logic and they appear sequentially, then it works only if you quickly move the mouse somewhere on the browser tab =)

[JoviDeCroock]

I mean, generally I would presume that when you use the platform for these things to be slightly more correct. If I recall correctly, React will flush > 1 time during frames while for us useEffect aligns with the animation frame. I'd say the best thing to do is check what kind of logic you are running in what chain, we can't really help you with a screen share... Hence we ask for a reproduction, actual code that runs from i.e. stackblitz or codesandbox.

Generally doing requestAnimationFrame --> setState means that you'll effectively queue an update to land after the current paint cycle ends and a micro-tick passes.

[krutoo]

@JoviDeCroock oh, i forgot attach repo link... updated issue description, sorry

[krutoo]

@JoviDeCroock can you open sandbox?
https://codesandbox.io/p/github/krutoo/typescript-react/preact-compat-react-19-raf

[krutoo]

@JoviDeCroock Did you manage to open the sandbox?