Conditional animated reactions and derived values

[MatiPl01]

Hi guys,

I have a little suggestion that will improve code readability in some cases and would make the usage of useAnimatedReaction easier when reactions should be called conditionally.

What?

I would like to be able to call useAnimatedReaction hook conditionally. It will be useful to make it possible to specify the condition under which the useAnimatedReaction will react to value updates.

Why?

Currently, I use the useAnimatedReaction hook in a lot of places in my project and have to write code like this:

useAnimatedReaction(
  () => {
    if (!useCustomSource.value) return null;
    return {
      scale: startScale.value,
      x: startX.value,
      y: startY.value
    };
  },
  data => {
    if (!data) return;
    transitionStartPosition.value = {
      x: canvasDimensions.width.value / 2 - data.x * data.scale,
      y: canvasDimensions.height.value / 2 - data.y * data.scale
    };
    transitionStartScale.value = data.scale;
  }
);

I'd like this reaction to be called on change of either startScale, startX or startY value but only if the useCustomSource value is true. For now, the reaction is unnecessarily called on each value change even though the useCustomSource is false and the callback function returns in the first line.

Possible solution

Add another property to the useAnimatedReaction which takes a shared value specifying if the reaction is supposed to listen for changes of values used in the prepare callback function.

For example, it could look like this (not ideal, but that's my current idea):

const isEnabled = useSharedValue(false); // This will be updated from somewhere

useAnimatedReaction(
  () => {
    /* Prepare (the same as it currently is) */
  },
  (result, previous) => {
    /* React (the same as it currently is) */
  },
  {
    enabled: isEnabled // <- the new property with additional config
  },
  dependencies
)

To make this change non-breaking and don't require additional parameters, the useAnimatedReaction should also support currently used syntax without the additional config parameter (should take either 3 parameters and work as before or take the new config as the 3rd, optional, parameter and take dependencies as the 4th parameter in such a case).

It will be nice to have similar functionality for the useDerivedValue hook and update the shared value to the new value only if the hook is not disabled.