Unexpected Object.freeze() - "TypeError: cannot add a new property, js engine: hermes"

[mark-c-hoffner]

Description

Functions passed to runOnJS as the property of an object cause all other properties of that object to be frozen.

I did not expect those other properties to be frozen.

If this is intended behavior, a remark on the runOnJS docs would be helpful.

Steps to reproduce

1. Given this:

  const anArray = [];

  const aFunction = (s) => {
      anArray.push(s);
  };

  const anObject = {
    anArray,
    aFunction,
  };

2. This fails:

  const aWorklet = () => {
    'worklet';
    runOnJS(anObject.aFunction)('fails');
  };

3. This succeeds:

  const aWorklet = () => {
    'worklet';
    runOnJS(aFunction)('succeeds');
  };

Snack or a link to a repository

https://github.com/mark-c-hoffner/reanimated-freeze-reproduction

Reanimated version

3.6.0

React Native version

0.72.7

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

None

Device

Real device

Device model

moto g(7) play - 9

Acknowledgements

Yes

[tomekzaw]

Hey @mark-c-hoffner, thanks for submitting this issue as well as providing a detailed description.

Yes, this is an intended behaviour, but this limitation does not only affect runOnJS.

For each variable foo that you pass to a worklet, we call Object.freeze(foo) – see the code and the comment here.

const foo = { bar: { baz: 7 } };

runOnUI(() => {
  'worklet';
  console.log(foo.bar.baz);
})();

We freeze objects to prevent users from modifying the original object after it was copied to a worklet. There is no reactivity here and it would lead to hard-to-debug issues.

foo.bar.baz = 42; // this change wouldn't be reflected in the worklet (use a shared value instead)

Thanks for your suggestion to better document this, maybe we'll mention it in the "Troubleshooting" section in our docs or find a way to display a better warning in dev mode instead of the generic one from Object.freeze, added a task in our backlog.

[mark-c-hoffner]

Thank you @tomekzaw for the clarification on the scope of Object.freeze with worklets. I just discovered react-native-reanimated and have been marveling at how it brings threading capabilities into JS. It makes complete sense that there's locking steps to prevent chaos.

I love the idea of somehow replacing the generic warning from Object.freeze when trying to add properties to a reanimated frozen object.