Request for backing before loading the site?

Question

React

You need to make a request for backing.
When I use useEffect the site blinks, how can I avoid it?
Example from my code:
const Container = (...) => {
const dispatch = useDispatch()

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

return (...)}

Answer 1

1) useLayoutEffect - you can try it, but react architects strongly recommend using useEffect
2) if we listen to react architects, then we create a variable in the component state: Before returning jsx markup, we set a condition, if isLoading === false, then return. And in useEffect, after the dispatch, this is set to true in isLoading.
const [isLoading, setLoading] = useState(false);

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

if (!isLoading) return;

return (...)}

thus, the component is not rendered until we dispatch the data to the side