Does useEffect block rendering the page?

Admin 1
Viewed 544

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>
      )}

use-effect reactjs settimeout javascript
1 Answers

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);
  }, []);
user_50372930
Related