💻 Проверь свои скиллы — задача по написанию hook для загрузки данных

На первой итерации решение может выглядеть как-то так:

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((respData) => setData(respData));
  }, []);

  return data;
}

В этом коде не хватает зависимости. Если url изменится, то запроса данных не произойдет.

Дальше код может стать таким:

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    setData(null); // не забыть сбросить данные перед загрузкой
    fetch(url)
      .then((res) => res.json())
      .then((respData) => setData(respData));
  }, [url]); // <-- не забыть зависимость

  return data;
}

На этом этапе можно остановиться, и подумать, как улучшить этот hook.

Пропустим ещё несколько итераций, и финальный код, который можно считать неплохим решением, выглядит так:

function useFetch(url) {
   const [data, setData] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);

   useEffect(() => {
      // флаг отмены
      let cancelled = false;

      setIsLoading(true);
      setData(null);
      setError(null);
      fetch(url)
         .then((res) => res.json())
         .then((respData) => {
            if (!cancelled) setData(respData);
         })
         .catch((e) => {
            if (!cancelled) setError(e);
         })
         .finally(() => {
            if (!cancelled) setIsLoading(false);
         });

      return () => {
         // выставим признак того, что запрос отменен
         cancelled = true;
      };
   }, [url]);

   return [data, isLoading, error];
}

Эта задачка позволяет проверить понимание устройства рендеринга React, как устроено хранение состояния, когда происходят перерисовки, как заставить компонент перерисоваться в ответ на асинхронное событие, как устроена "очистка (cleanup) эффекта", как работают сайд-эффекты.

@react_tg