How do I guarantee the order of some effects?

[tezlm]

I have two effects that need to run in a specific order. Normally, I'd use queueMicrotask, but the effects are in different places of the code.

One effect is in a StableList component, which tries to retain the scroll position when items in a list change. It does this by saving the scroll position in a render effect then calling queueMicrotask to diff and set the scroll position after the dom is updated. Another effect tries to call scrollIntoView when a highlighted element changes. The problem is if scrollIntoView is ran between StableList's render effect and microtask, which will cause the scroll position to be messed up.

There's probably some way with setTimeout/queueMicrotask hackery, but surely there's a better way?

[tezlm]

I solved my problem by adding a callback prop to StableList which is called at the end of its effect.