Remove makeRemote

[tjzel]

Summary

makeRemote function seems to be no longer necessary.
Prettifying useAnimatedStyle as a bonus.

Why can makeRemote be removed

makeRemote utilizes the ShareableHandle idea. Let's look at its code:

export function makeRemote(initial) {
  const handle = makeShareableCloneRecursive({
    __init: () => {
      'worklet';
      return initial;
    },
  });
  registerShareableMapping(initial, handle);
  return initial;
}

The object handle defined inside this function has __init worklet property. This worklet has the object initial in its closure. When makeShareableCloneRecursive is called with this worklet, initial's value will be copied to the handle's closure. Therefore, calling __init on UI runtime will return the copied value of initial.

So at this point we have a ShareableObject handle with a worklet property __init. Both this object and its worklet were saved in _shareableCache when makeShareableCloneRecursive was called. Current mappings are:

_shareableCache[handle] - handle
_shareableCache[handle.__init] - handle.__init

Now registerShareableMapping is called. This function sets a new mapping for _shareableCache. It maps initial to handle. Therefore any worklet that has initial in its closure will take the mapping for initial instead, which is the handle.

Then on the UI thread, when we evaluate worklet that uses initial, we run it through valueUnpacker. valueUnpacker checks if the object has __init property, if yes, then it return the result of __init worklet. So it returns the copied value of initial that was copied during evaluation of __init.

To sum it up:

makeRemote is a function that maps a given JS reference to a function that on UI thread will return the same value. With current implementation of Shareables this hardly serves any purpose, since we could just copy the value like a plain JS value, using its copy.

For example, code:

const a = { b: 5 };
makeRemote(a);

function foo() {
  'worklet';
  console.log(a);
}

Provides the same results as

const a = { b: 5 };

function foo(){
  `worklet`;
  console.log(a);
}

Since all that makeRemote does is add unnecessary identity unpacking function.

Test plan

🚀

To check areAnimationsActive:

import { StyleSheet, View, Button } from 'react-native';

import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

import React from 'react';

export default function EmptyExample() {
  const [state, setState] = React.useState(0);
  const sv = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ rotate: `${sv.value}deg` }],
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, animatedStyle]} />
      <Button
        title="Start animation"
        onPress={() => (sv.value = withTiming(180, { duration: 30000 }))}
      />
      <Button title="Rerender" onPress={() => setState(state + 1)} />
    </View>
  );
}

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

[piaskowyk]

Overall, everything is going great. However, I do have one doubt regarding potential regression.

[tomekzaw]

🚢 🇮🇹