Break infinite queueMicrotask loop when updates are triggered in mapper-run phase

[kmagiera]

Summary

This fixes a problem when reanimated would get stuck in an infinite update loop triggered by shared value update in useAnimatedStyle or useDerivedValue. Although we don't recommend updating shared values in these stages of the mapper loop, it was still being used by some users that way and therefore the change mapper logic we introduced in reanimated 3 introduced a regression in that behavior.

When updating shared values in mapper phase we can never guarantee the correct order of mapper execution (as it may be the case that some mappers that used the shared value has already run and others didn't). To match the behavior of reanimated 2 we enqueue an update for the next frame that will run with the updated value.

Test plan

I used the following example that updates height in useDerivedValue:

export default function App(): React.ReactElement {
  const randomWidth = useSharedValue(10);
  const randomHeight = useSharedValue(10);

  const config = {
    duration: 500,
    easing: Easing.bezierFn(0.5, 0.01, 0, 1),
  };

  const randomerWidth = useDerivedValue(() => {
    randomHeight.value = randomWidth.value * 0.5;
    return randomWidth.value * 0.5;
  });

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomerWidth.value, config),
      height: randomHeight.value,
    };
  });

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
      }}>
      <Animated.View
        style={[
          { width: 100, height: 80, backgroundColor: 'black', margin: 30 },
          style,
        ]}
      />
      <Button
        title="toggle"
        onPress={() => {
          randomWidth.value = Math.random() * 350;
        }}
      />
    </View>
  );
}

When pressing "toggle" button the old version would end up blocking UI thread forever falling into an infinite loop of running microtasks. WIth this update we allow the animation to process and you should see the height and width change after each toggle press.

[tjzel]

Looks good to me!