What is the order for execution of useEffect hook in react?

Question

I am creating a simple react app with router.

I want to get data from the server in one of the child components but data will be fetched only if user is logged in, so in router component I check whether user is logged in or not in useEffect hook. If it is logged in I set a variable which i access afterwords.

In the child component i send the request to server which uses that variable.

but the problem is useEffect of child component is running before useEffect of router component

Sample code for example

My router component

import React, { useEffect } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import App from "./App";
// import AllWatchers from './components/AllWatchers'

export default function Router() {
  useEffect(() => {
    console.log("router");
  }, []);
  console.log("inrouter");
  return (
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={App} />
          {/* <Route path='/watchers' component={AllWatchers} /> */}
        </Switch>
      </BrowserRouter>
    </div>
  );
}

** my App(child) component **

import React, { useEffect } from "react";
import "./styles.css";

export default function App() {
  useEffect(() => {
    console.log("App");
  }, []);
  console.log("inapp");
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

the output to console for this is

inrouter 
inrouter 
inapp 
inapp 
App 
router 

so my router component is rendering first but useEffect hook of App component is running first why?

you can view code https://codesandbox.io/s/heuristic-gagarin-ego8d?file=/src/App.js:0-319 and check the console

Answer 1

I don't know how to explain why this is happening, but here's a brief solution for you.

import React, { useEffect } from "react";
import "./styles.css";

export default function App() {
  useEffect(() => {
    const timer = setTimeout(() => {
      console.log("App");
    }, 2000);
    return () => clearTimeout(timer);
  }, []);
  console.log("inapp");

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Got it

inrouter 
inrouter 
inapp 
inapp 
router 
App