Почему React ждет пока загрузятся данные?

Question

[student985]

useFetch.js

export const useFetch = () => {
  const [loading, setLoading] = useState(true)
  const [data, setData] = useState([])
  const getProducts = async () => {
    const response = await fetch(url)
    const data = await response.json();
    setData(paginate(data));
    setLoading(false);
  };
 useEffect(() => {
    getProducts()
  }, [])
  return { loading, data }
}

utils.js

const paginate = (followers) => {

    const itemsPerPage = 9;
    const pages = Math.ceil(followers.length / itemsPerPage) ;
    return  Array.from({length:pages}, (_, index) => {
        const start = index * itemsPerPage;
        return followers.slice(start, start + itemsPerPage)
    });

}

export default paginate

App.js

import paginate from "./utils";
function App() {
  const {loading, data} = useFetch();
  const [page, setPage] = useState(0);
  const [followers, setFollowers] = useState([]);
useEffect(()=>{
    if(loading) return;
    setFollowers(data[page])
},[loading])

Подскажите пожалуйста, почему React в этом случае ждет пока закончится loading? Казалось бы увидел, что loading = true, вышел из useEffect и вылетел с ошибкой, что данных нет. useEffect срабатывает при изменение loading, но почему программа не выполняется дальше, пока loading не станет false?

Comments

[insighter]

нужно больше кода

Answer 1

[insighter]

const {loading, data} = useFetch();

loading само по себе не поменяется, App никогда не получит уведомление, что данные загрузились

Передавай в свой хук что то вроде onLoad колбека

Comments

[student985]

Почему App не получит уведомление, что данные загрузились
function App() {
const {loading, data} = useFetch();

Он их прекрасно получает и дожидается пока эти данные загрузятся. Я только не понимаю почему useEffect заставляет дожидаться эти данные ?

[insighter]

student985,

Он их прекрасно получает и дожидается пока эти данные загрузятся.

у тебя что то ещё происходит из за чего App обновляется и не связано с загрузкой

Я только не понимаю почему useEffect заставляет дожидаться эти данные ?

Никто ничего не дожидается, меняется состояние loading.
Первый раз useEffect вызывается когда loading = true, второй раз вызывается когда loading = false.

Ты же в eEffect передаешь функцию, она вызывается тогда когда loading меняет значение

[student985]

insighter, "первый раз useEffect вызывается когда loading = true" но после этого он должен пройти дальше без данных и сказать что их нет. Но этого не происходит он не проходит в зону возврата html, он вызывается второй раз и только после идет дальше с данными

[insighter]

student985, ты точно понимаешь семантику этого процесса?
Реакт (движок) вызывает твою функцию App, она в конце возвращает, то что ты называешь "html", на самом деле это реакт-объекты, ну ок.
Но до этого, функция App() вызывает хук useEffect (который тоже обычная функция) и передает ему стрелочную функцию, и с такой семантикой:
вот функция и вот зависмые параметры (loading), когда все реакт-функции будут вызваны, обновлен DOM Реакту нужно проверить, если изменились зависимости с которыми предыдущий раз запускалась эта стрелочная функция, то эту функцию надо вызвать. Стрелочную функцию переданную в useEffect надо вызвать а не весь App().

()=>{
    if(loading) return;
    setFollowers(data[page])
}

[student985]

insighter, Если честно плохо понимаю. Ладно спасибо большое за уделенное время, буду разбираться

[insighter]

student985, рассмотри простые примеры, то что ты привел это нетривиальные штуки.