Simply toggling a value seems to have a weird behaviour when that value is not used

[lucianbc]

Hi!
Reanimated v1 question here. I am trying to understand the basics of this library, so I started with a simple toggle behaviour triggered by a state change. My working example is this one:

export default function App() {
  const [state, setState] = useState(1);

  const p = useValue<number>(0);

  useCode(
    () =>
      block([
        debug("Start here", p),
        cond(eq(p, 0), set(p, 1), set(p, 0)),
        debug("Stop here ", p),
      ]),
    [state]
  );

  return (
    <View style={styles.container}>
      <Animated.View
        style={{
          width: 100,
          height: 100,
          backgroundColor: "yellow",
          alignItems: "center",
          justifyContent: "center",
          // opacity: p,
        }}
      >
        <Text>{state}</Text>
      </Animated.View>

      <Button title="increment" onPress={() => setState((s) => s + 1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

The useCode is executing on each state change as expected and my logs look like this after clicking increment a few times:

Start here 0
Stop here  1
Start here 0
Stop here  1
Start here 1
Stop here  0
Start here 1
Stop here  0
Start here 0
Stop here  1
Start here 0
Stop here  1
Start here 1
Stop here  0
Start here 1
Stop here  0

Even though every time the start and stop values are different, it seems like the updated value is carried over only every other time.

What is interesting is that if I uncomment that opacity: p, so I basically use that value rather than just setting it, my logs look as expected:

Start here 1
Stop here  0
Start here 0
Stop here  1
Start here 1
Stop here  0
Start here 0
Stop here  1
Start here 1
Stop here  0
Start here 0
Stop here  1
Start here 1
Stop here  0
Start here 0
Stop here  1

Does anybody know why this is happening? My current assumption is that there is some kind of lazy evaluation in place and unless I read that value, the changes don't happen, but I am really intrigued by this thing.

[jakub-gonet]

You're right. We memoize values quite aggressively. We create a graph of nodes and traverse only parts that are "dirty" (i.e. changed). IIRC we process nodes that are attached to view so that's why those logs differ.