Functional refs still behave slightly different from React

This is a follow-up issue to #2052, which was fixed by #2055.

While re-testing the sandbox from that issue, I found that there is still a subtle deviation from the order of events in React - here’s the console output for comparison:

As you can see, React cleans up all refs before creating new ones - whereas Preact seems to create and clean up refs in the order they were created?

This could be important and might create problems for components that use several functional refs to manipulate the same component or global state.

(Refs are sometimes used as a way to create side-effects that depend on the life-cycle of elements - as opposed to useEffect or life-cycle methods, which depend on the life-cycle of components.)

[marvinhagemeister]

Looking at the difference in behavior I guess it comes down to different diffing strategies used under the hood. React has a 2-pass rendering algorithm and for that it makes sense to flush all pending refs in one go. We currently do have a single-pass algo and update elements as we go. We offload some effects into queues to ensure that effects are called independent of that. In the long run we’ll likely switch to a 2-pass renderer, but it will take time.

[JoviDeCroock]

This is a deviation that was outlined in the PR and probably won’t be fixed since it does not cause any severe issues