Handle recursion loop in mappers

[karol-bisztyga]

We should somehow detect recursion loops in mappers and let users of the library know that they're going in a bad direction in terms of code design. Sample code:

const sv = useSharedValue(0);
useAnimatedStyle(() => {
  sv.value = sv.value + 1;
  return {}
})

Not all of the users are aware what are the mappers and how they work, therefore we should provide at least warnings that can be seen outside.

Mappers are currently used in:

• useAnimatedStyle
• useDerivedValue
• useAnimatedReaction - this case is a bit different, the hook was introduced also as a workaround to those infinite loops. Still, they may occur when in react the user modifies shared values that are used in prepare, so we should as well handles such a case.

[mrousavy]

This might be a great point to suggest creating an ESLint plugin.

There are a few cases where an AST-aware ESLint plugin would be a huge help at compile time:

1. Warn/Error when a user is trying to call a non-worklet function from a worklet (I believe william's eslint-reanimated plugin already does this, not sure tho)
2. Correctly notice dependencies where the react-hooks ESLint plugin doesn't notice them (hooks with 3 arguments instead of 2, e.g. useAnimatedReaction or complex objects like useAnimatedScrollHandler, useAnimatedGestureHandler)
3. Correctly notice that a hooks' dependency isn't [sharedValue.value] but rather [sharedValue]
4. Your recursion/loop example
5. Warn/Error when styles are applied incorrectly (e.g. using an animated style in useMemo)
6. Warn/Error when trying to mutate something that has been context-captured from outside (and is therefore frozen) in a worklet