Запрос на бэк перед загрузкой сайта?

Question

[drunkseal]

Нужно сделать запрос на бэк.
Когда использую useEffect происходит моргание на сайте, как мне этого избежать?
Пример из моего кода:
const Container = (...) => {
const dispatch = useDispatch()

useEffect(() => {
dispatch(fetchVacations())
}, [])

return (...)}

Answer 1

[Nikolay Matyushkin]

1) useLayoutEffect - можно пробнуть его, но архитекторы реакта настоятельно рекомендуют использовать useEffect

2) если же мы слушаем архитекторов реакта, значит мы создаём переменную в стейте компонента:

const [isLoading, setLoading] = useState(false);

Перед возвратом jsx разметки, ставим условие, если isLoading === false, то return. А в useEffect, после диспатча сэтим в isLoading значение true.

useEffect(() => {
dispatch(fetchVacations());
if (!isLoading) setLoading(true);   // Сэтим истину только в случае если isLoading === false 
}, [])                              // во избежании мультирендеринга

if (!isLoading) return;

return (...)}

таким образом, компонент не рендерится, пока мы не задиспатчим данные в стор

Comments

[drunkseal]

Спасибо большое!)