Реактивная нативная анимация useEffect с массивом зависимостей создает бесконечный цикл - PullRequest
Новая
       27

Реактивная нативная анимация useEffect с массивом зависимостей создает бесконечный цикл

0 голосов
/ 30 марта 2020

Я пытаюсь выяснить, как сделать eslint счастливым с помощью правила react-hooks/exhaustive-deps, а также использовать библиотеку Animated для создания анимации с помощью useEffect.

Следующий код должен выделить кнопка при нажатии, накладывая ее на цветной вид. 

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>
  )
};

Есть ли способ сделать это (с помощью useCallback, useMemo и т. д. c.) без отключения правила?

1 Ответ

2 голосов
/ 30 марта 2020

Вам не нужно звонить setOpacity, вместо этого вы можете использовать setValue: 

opacity.setValue(0)

Также нет необходимости добавлять opacity к зависимостям, потому что оно никогда не меняется. ESLint не всегда понимает это правильно.

...