Избегайте `useEffect` извлечения данных при монтировании, когда зависимость требует ввода данных пользователем - PullRequest
Новая
       7

Избегайте `useEffect` извлечения данных при монтировании, когда зависимость требует ввода данных пользователем

0 голосов
/ 18 мая 2019

React hook useEffect запускается при монтировании компонента.Однако, если эффект зависит от пользовательского ввода, выполнение эффекта при монтировании - избыточно.Допустимо ли тогда выполнять валидацию зависимости и затем соответственно выполнять ловушку?

Пример Codesandbox 

useEffect(() => {
    const fetchDogImage = async () => {
        const dogImage = await axios
            .get(`https://dog.ceo/api/breed/${breed}/images/random`)
            .then(response => response.data.message);

        setDogImage(dogImage);
    };

    // This avoids fetching dog image on mount - user hasn't searched for a dog breed, yet.
    // Is this an acceptable pattern?
    if (breed !== '') {
        fetchDogImage();
    }
}, [breed]);

1 Ответ

0 голосов
/ 18 мая 2019

Да, я думаю, что все в порядке, чтобы предотвратить запуск в первый раз. Кроме того, вы можете использовать Debouce , чтобы предотвратить слишком частый поиск. Например 

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(
    () => {
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      return () => {
        clearTimeout(handler);
      };
    },
    [value, delay],
  );

  return debouncedValue;
}

function App() {
    const [dogImage, setDogImage] = useState('');
    const [breed, setBreed] = useState('');
    const debouncedValue = useDebounce(breed, 1000);

    useEffect(() => {
        const fetchDogImage = async () => {
            const dogImage = await axios
                .get(`https://dog.ceo/api/breed/${debouncedValue}/images/random`)
                .then(response => response.data.message);

            setDogImage(dogImage);
        };

        if (debouncedValue !== '') {
            fetchDogImage();
        }
    }, [debouncedValue]);

    return (
        ...
    );
}
...