fix(Worklets): shareable deadlock

[tjzel]

Summary

TBA

Test plan

The following code no longer deadlocks with Reanimated. Compile and run in Release, sometimes you have to wait a couple of minutes before the deadlock manifests.

Code

import React from 'react';
import { StyleSheet } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

export default function Repro() {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      {new Array(1024).fill(0).map((_, i) => (
        <AnimatorWrapper key={i} />
      ))}
    </ScrollView>
  );
}

function AnimatorWrapper() {
  const [display, setDisplay] = React.useState(true);

  React.useEffect(() => {
    const timeout = setInterval(
      () => {
        setDisplay((display) => !display);
      },
      Math.random() * 500 + 300
    );
    return () => clearInterval(timeout);
  }, []);

  if (!display) {
    return null;
  }

  return <Animator />;
}

function Animator() {
  const opacitySv = useSharedValue(0);
  const widthSv = useSharedValue(10);
  const heightSv = useSharedValue(10);

  React.useEffect(() => {
    opacitySv.value = withTiming(1, { duration: 100 });
    widthSv.value = withTiming(100, { duration: 100 });
    heightSv.value = withTiming(20, { duration: 100 });
  }, [opacitySv, widthSv, heightSv]);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacitySv.value,
      width: widthSv.value,
      height: heightSv.value,
    };
  });

  return <Animated.View style={[styles.box, animatedStyle]} />;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 2,
  },
  box: {
    backgroundColor: 'blue',
  },
});