Does useEffect block rendering the page?

Question

I would like to do a little load time every time the user arrives or reloads the page. I use for that a useEffect () which has a setTimeout () and which simply sets the variable setLoading to false after 1 second. But my question is does this setTimeout block the return of the function? Otherwise it is useless since I would like this useEffect to allow the page to load the html and render it almost instantly.

 const [isLoading, setLoading] = useState(true); useEffect(() => { const timer = setTimeout(() => { setLoading(false); }, 1000); return () => clearTimeout(timer); });

 {isLoading? <Loading />: ( <Router> <Switch> <Route exact path="/"> <Header showModal={showModal} /> <div className="top"> <div className="leftPart"> <Presentation /> <Skills /> </div> <Timeline /> </div> <Projects /> <Footer /> <ConnexionModal showModal={openModal} hideModal={hideModal} /> </Route> <Route exact path="/admin"> <Admin /> </Route> <Route path="*"> <Erreur404 /> </Route> </Switch> </Router> )}

Answer 1

No, it's non-blocking by definition.

But, if you want to implement a loading logic, useEffect is definitely the right tool.

You just need to pass a second argument to it.

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

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 1000);
  }, []);