React-native: Keep animated values in state or as class property?

Question

Is it better to keep the animated value (fadeAnim) as a property of the state or is it ok to make it into a class-property?

Example:

class ModalShade extends React.Component {     fadeAnim = new Animated.Value(0)      render() {         return (             <Animated.View                 cls="bg-black absolute-fill"                 style={{ opacity: this.fadeAnim }}             />         )     }      componentDidMount() {         Animated.spring(             this.fadeAnim, {                 toValue: 0.6,                 tension: 100,                 friction: 20             }         ).start();     } } 

Clarification: I know that state is used for react's reconciliation. React-native' Animated values bypass the usual render(), so the component updates even when there's not state-change.

I don't see any point in comparing an Animated.Value in my shouldComponentUpdate, that's why I moved it out of state.

Answer 1

It is better to follow official documentation and to use state property. There are two good reasons for that:

1. You want to keep all things that have effect on a component render result in your state/props/context.
2. React-Native Animated library has its own optimizationzs that allows to avoid setState calls and re-rendering on change of Animated components. This is a quote from official documentation

When the component mounts, the opacity is set to 0. Then, an easing animation is started on the fadeAnim animated value, which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1.

This is done in an optimized way that is faster than calling setState and re-rendering.