Ожидание прогрузки всех компонентов React

Question

Есть компонент LoadingScreen - который представляет из себя лоадер Мне нужно его скрывать в тот момент, когда прогрузятся остальные компоненты этой страницы Пробую через хук useState, но не могу подобрать условия для изменения стейта isLoading

const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
    // Какое-то условие, чтобы изменить isLoading на false
      setIsLoading(false);
  }, []);
  
  return (
    <>
      {isLoading
      ? <LoadingScreen /
      : //Компоненты страницы
      }
    </>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Документация говорит:

Не забывайте, что React откладывает выполнение useEffect, пока браузер не отрисует все изменения,...

То есть вам нет необходимости добавлять какое то условие. Работает так:

Рендерит
Выполняет useEffect() один раз и оставляет isLoading == false до конца жизненного цикла (поскольку используется конструкция с пустым массивом)
Снова рендерит уже относительно нового значения isLoading

БЛОГ НА HUSL

Ожидание прогрузки всех компонентов React

Ответы (1 шт):