React Login validation with UseEffect

Sub Title

• React useEffect doesn't run on page reload
• React Component's return relies on data from useEffect

Result

• useEffect runs AFTER each render

Code

Direction

1. show empty div to end user
   user can wait. They maybe think as 'The WebSite is loading'
2. After first render, useEffect will be run.
3. So, fetchuser() run normally and It get user information.
4. App rerender! and show RealContents to end user.

Sample Code

function App() {
  const [isInit, setIsInit] = React.useState(false);
  const [user, setUser] = React.useState({ loginId: "", name: "" });

  React.useEffect(()=>{
    const fetchuser = async () =>{
      try{
        const res = await UserApi.getUserInfo();
        setUser(res.data.user);
      }catch(err){
        //need login
      }finally{
        setIsInit(true);
      }
    }
  },[])

  if (!isInit) {
    // return empty content
    return <div></div>;
  } else {
    //check user and route relies on user obj
    return <MyRouter user={user}></MyRouter>;
  }
}

References

• stackoverflow - does a render happen before function in react hooks useeffect is called
• stackoverflow - react components return relies on data from useeffect