React Native: визуализировано больше хуков, чем во время предыдущей ошибки рендеринга

Question

Я получаю ошибку Rendered more hooks than during the previous render в своем собственном приложении реакции на этом экране:

const HomeScreen = props => {
  const [refreshing, setRefreshing] = useState(false);

  if (props.data.loading) { // error shows its located here
    return <Text>Loading...</Text>; 
  }

  const onRefresh = useCallback(() => {
    setRefreshing(true);

    wait(2000).then(() => setRefreshing(false));
  }, [refreshing]);

  return (
    <View style={styles.container}>
      <FlatList
        data={props.data.sample}
        renderItem={({item}) => <Card {...item} user={props.data.user} />}
        keyExtractor={item => item._id}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
      />
    </View>
  );
};

Но когда я перемещаю useState ниже оператора if:

const HomeScreen = props => {

  if (props.data.loading) { // error shows its located here
    return <Text>Loading...</Text>; 
  }

  // moved here, change in the order of hooks...
  const [refreshing, setRefreshing] = useState(false); 

  const onRefresh = useCallback(() => {
    setRefreshing(true);

    wait(2000).then(() => setRefreshing(false));
  }, [refreshing]);

Я получаю предупреждение:

Warning: React has detected a change in the order of Hooks called by "HomeScreen". This will lead to bugs and errors if not fixed...

Я получаю эту ошибку при горячей перезагрузке приложения, но затем, когда я отклоняю предупреждение и затем принудительно перезагружаю его, оно не появляется. Я просто хочу убедиться, что с этим оператором if все в порядке.

Кроме того, я не знаю, почему перемещение useState исправит исходное сообщение об ошибке повторного рендеринга?

Answer 1

Ну, ошибка очевидна. Только useState вызывается, когда loading является истинным, и оба useState и useCallback вызываются, когда это не так, поэтому реакция реагирует на количество несовместимых хуков. Это скорее всего случайность. На этот раз никакие хуки не вызываются, когда loading истинно, и оба они отображаются, когда это не так. Исходный код React, вероятно, не проверяет «число обработанных хуков», если это число изначально равно нулю, следовательно, нет ошибки.

Как говорит предупреждение, условно вызывая хуки (написание оператора возврата перед любым хуком) ) это плохая идея. Это может не сломать ваше приложение в данном конкретном случае, но в целом это плохая практика. Хуки вызываются при каждом рендеринге и реагируют на потребности, чтобы правильно их отслеживать.

Я бы поставил все хуки (в данном случае и useState, и useCallback) ДО условного возврата. Я не вижу причин не делать этого.