score:3

Accepted answer

Right now your useEffect is run on every render since it doesn't have any dependencies supplied as a second argument. The other issue is skipping the effect on first render.

If the initial value for the tile contents marker is null then you can solve this with something like:

  useEffect(() => {
    // exit early if the Tile contents are the initial content values
    // which means the animation shouldn't run
    if (props.contents.marker === null) {
      return;
    }
    value.setValue(0);
    Animated.timing(value, {
      toValue: 100,
      duration: 10000,
      useNativeDriver: true
    }).start();
  // note the addition of the dependency array here so this effect only runs
  // when props.contents.marker changes
  }, [props.contents.marker]);

See https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects for more info on the second argument to useEffect.


Related Query

More Query from same tag