带有依赖项数组的 React Native 动画 useEffect 钩子创建无限循环

Question

I am trying to figure out how to make eslint with the rule react-hooks/exhaustive-deps happy and also use the build in Animated library in react native to make animations with useEffect.

The following code should highlight the button when clicked, by overlaying it with a colored view.

const Component = props => {
  const [active, setActive] = useState(false);
  const [opacity, setOpacity] = useState(new Animated.Value(0));

  useEffect(() => {
    if (active) {
      Animated.timing(opacity, {
        toValue: 1,
        duration: 200,
        useNativeDriver: true
      }).start();
    } else {
      setOpacity(new Animated.Value(0))
    }
  }, [active, opacity]); // <- Works fine without `opacity`, but eslint wants this

  return (
    <View>
      <Animated.View style={{backgroundColor: "blue", opacity}} />
      <TouchableOpacity onPress={()=> setActive(!active)} />  
    </View>
  )
};

Is there any way of doing this (with useCallback, useMemo, etc.) without disabling the rule?

Answer 1

You don't need to call setOpacity , instead you can use setValue :

opacity.setValue(0)

There is also no need to add opacity to dependencies, because it never changes. ESLint doesn't always get it right.