[Compiler Bug]: react native reanimated shared value mutation about react

[gsathya]

The compiler should actually compile this fine, I think the healthcheck script doesn't track the reanimated import and turn on the correct type information. This should just be a fix in the health check script.

[josephsavona]

An alternative would be to use your own helper for assigning the value. Instead of x.value = y, create your own updateSharedValue(sharedValue, value) helper function and call it.

[josephsavona]

Thanks for posting. We've discussed this previously with the Reanimated team.

React requires that values returned from hooks are immutable. This is because React's reactivity model is fundamentally based on immutability, both for developer reasoning and to enable features such as concurrent rendering, where React may render multiple distinct versions of your UI with different base states.

The one exception to this rule is the ref type (created with createRef() or useRef()). They are the escape hatch for when you need a value that can be directly mutated, rather than copying (spreading) and changing the new version as we do with state values. The reason that refs can be "safely" mutated is that they can't be accessed during render, which helps developers avoid accidentally rendering stale results.

Our recommendation for APIs such as Reanimated's SharedValue API:

• Disallow access to the .value during rendering, to help developers avoid accidentally reading the value outside of Reanimated APIs which will subscribe for updates
• Use a function for updates instead of property assignment, Eg setValue(sharedValue, value) instead of sharedValue.value = value.

[gkueny]

Thank’s @josephsavona for the explanation.

If I understand correctly, as react-native developer we have to wait some api design update by react-native-reanimated team to be able to use react-compiler with our component that use x.value = y; syntax ?

[AlirezaHadjar]

Thank you for the insight 🙌