Why using Animated.Value as state instead of useRef()

[samsnori]

I was looking at the example implementation which uses:

const [opacity] = useState(() => new Animated.Value(1));
const [translateY] = useState(() => new Animated.Value(0));

And when I look at the React Native documentation they write:

Shouldn't this be therefore something like:

const opacity = useRef(new Animated.Value(1)).current;
const translate = useRef(new Animated.Value(0)).current;

Looking forward to learn about the chosen solution!

Thanks for the awesome package!

[zoontek]

@samsnori Both work, it's just that useRef cannot be lazily initiated, like useState can (it could if you write a hook like this)

As recreating a function instance is less costly than creating a new Animated.Value on each render (it's not even used, react will return the ref current value instead) , I went for useState here.

[samsnori]

Thanks @zoontek !

Sorry but maybe I misunderstand what you said: "creating a new Animated.Value on each render", is this exactly why useRef exist? Maybe you meant something different with "creating a new Animated.Value", but the docs from useRef say:

Btw, I can imagine this might seem I'm trying to be a smarty pants, sorry for that. I'm trying to learn.

[zoontek]

The documentation says it: This argument is ignored after the initial render.

React can't prevent the JS runtime from executing new Animated.Value() on each render, it just ignore the result. And new Animated.Value() has a certain cost.

To understand that in an easier way, there's a simple experiment you can do:

import { useRef, useState } from "react";
import { Animated, Button, StyleSheet, View } from "react-native";

const styles = StyleSheet.create({
  main: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

const createAnimatedValue = (value: number, from: "ref" | "state") => {
  console.warn(`new Animated.Value(${value}) called (from ${from})`);
  return new Animated.Value(value);
};

export const App = () => {
  const [, setCount] = useState(0);

  const opacityFromRef = useRef(createAnimatedValue(0, "ref")).current;
  const [opacityFromState] = useState(() => createAnimatedValue(0, "state"));

  return (
    <View style={styles.main}>
      <Button
        title="Trigger rerender"
        onPress={() => {
          setCount((prevCount) => prevCount + 1);
        }}
      />
    </View>
  );
};

Then press the button 10 times and check your logs 😄

[samsnori]

Thanks for that. That's really interesting.

Makes me wonder how useState is implemented; I mean somewhere it must track if the initializer function has been called already and only call it once.