How to compare shared value inside areEqualProps?

[VictorioMolina]

How to compare a SharedValue property inside memo callback?

1. _.isEqual(prevProps.animatedProgress, nextProps.animatedProgress)
2. prevProps.animatedProgress === nextProps.animatedProgress
3. _.isEqual(prevProps.animatedProgress.value, nextProps.animatedProgress.value)
4. prevProps.animatedProgress.value === nextProps.animatedProgress.value

Is this possible or not possible? Which one is the correct way?

[MatiPl01]

Hey!

In general, you shouldn't rely on the SharedValue read via the .value prop, so 3 and 4 are incorrect. Similarly, the first one proposed solution is incorrect, because lodash makes deep comparison of objects, so it will compare .value prop.

The correct solution is 2

Long explanation

---

Even though comparing .value from the JS thread is technically incorrect, in your case, all of listed proposed solution should work the same unless you pass a completely different SharedValue to your component, e.g. like this:

const progress1 = useSharedValue(0);
const progress2 = useSharedValue(0);

During the initial render:

<MyComponent animatedProgress={progress1} /> 

Some time later, when the component re-renders:

<MyComponent animatedProgress={progress2} /> // you pass a different progress value

In this case, when progress1.value is the same as progress2.value, your memoized component (MyComponent) won't be re-rendered, even if it should be, because it was passed a new progress2 variable. As a result, it will still use progress1 value and won't see progress2.value changes, because this value was treated as equal to progress1 and the progress1 is re-used.

You shouldn't rely on the .value value of the SharedValue as it is asynchronously modified on the UI thread and might not return the value that you expect to receive in the JS thread. You should always make shallow comparisons between SharedValues (with ===) on the JS thread.

Short explanation of the difference between JS and UI thread

---

Reanimated uses the concept of 2 separate threads:

• The UI thread - where all animations run,
• The JS thread - from which you call functions that modify state in the UI thread.

Let's say you want to update the SharedValue stored in the myAnimatedValue variable. After updating the value (e.g. myAnimatedValue.value = <new value>), you would expect that reading myAnimatedValue.value later in your code will return the <new value> you previously set.

Unfortunately, if you read the value from the JS thread (not in a worklet function executed within runOnUI, useDerivedValue, useAnimatedReaction or other hook from reanimated, which executes the callback directly on the UI thread), you may not get the expected <new value>, but the previous value (<old value>).

This is the result of asynchronous way of communication between JS and UI thread which doesn't guarantee that value is the same in both of them at the same time.

All React hooks are executed on the JS thread, so comparison of shared values via .value is not safe in there.

[VictorioMolina]

Thx very much @MatiPl01! ❤️

[MatiPl01]

You're welcome!