tgoop.com/react_tg/424
Create:
Last Update:
Last Update:
На первой итерации решение может выглядеть как-то так:
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
