Fix useFrameCallback cleanup

[szydlovsky]

Summary

useFrameCallback had a bit faulty cleanup: it used ref.current during useEffect cleanup, when the ref value could as well be unreachable (already deallocated). I added the callbackId memoization + removed unnecessary setting it to -1.

Test plan

useFrameCallback example from Example App, as well as this code:

Code

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useFrameCallback,
  useSharedValue,
  useAnimatedStyle,
} from 'react-native-reanimated';

export default function App() {
  const t = useSharedValue<number>(0);
  const height = 1300;

  useFrameCallback((frameInfo) => {
    t.value = frameInfo.timeSinceFirstFrame / 350;
  });

  const infinityStyle = useAnimatedStyle(() => {
    const scale = 2 / (3 - Math.cos(2 * t.value));
    return {
      transform: [
        { translateX: scale * (Math.sin(2 * t.value) / 2) * 200 },
        {
          translateY:
            scale * Math.cos(t.value) * Math.min(height / 2 - 120, 200),
        },
      ],
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.dot, infinityStyle]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 150,
  },
  dot: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#b58df1',
    position: 'absolute',
  },
});

[tomekzaw]

LGTM but let's wait for @piaskowyk's approval

[andreialecu]

Not sure if this is the cause, but we started running into #6299 recently.

I made a fix in #6301