React useEffect execute initial setup

Question

I have a parent component that always needs to retrieve a token first before the subcomponents get executed. As discussed in this post What is the correct order of execution of useEffect in React parent and child components? the subcomponents useEffect gets executed first.

My question is how can I handle retrieving the token on initial loading (in the main component)?

You can get token then render the children, for example {token && <>>} — Farzaneh Torkpichlou, Dec 18 '21 at 12:31
Did you try with empty brackt? useEffect(() => { // your code }, []); — Asela Priyadarshana, Dec 18 '21 at 12:32
Yes the problem is that the useEffect of subcomponents gets executed before the higher up components. — Grifting, Dec 18 '21 at 13:52

score 0 · Accepted Answer · answered Dec 19 '21 at 12:53

I solved it by using a state to track if the session has been initialized. If the session has not been initialized its displaying a loading animation. This is only executed on the initial loading of the app. The loading component can't have a useEffect that requires the api with a valid token or user information.

function App() {
  const [hasSession, setSession] = useState(false)

  useEffect(() => {
    async function initUserProfile() {
      await apiService.init()
      setSession(true)
    }

    initUserProfile()
  }, [])

  if (hasSession === false) {
    return (<Loading />)
  }

  return (
    <Router>...</Router>
  )
 }

React useEffect execute initial setup

1 Answers1