CODEWITHSUNDEEP
reactjsreact-routerreact-hooksuse-effect
Panagiss
Panagiss

Reputation: 3720

BrowserRouter runs Before useEffect on ReactJS

My problem is that React will check first Routing for my page and afterwards is going to run useEffect() function. This gives me kind of a problem. What im doing is that i need useEffect() to run first in order to fetch data from local storage. That specific data "decides" in which page my application will redirect.

So that's the main App.js

function App() {

  const [user, setUser] = useState({id:null,authorized:false});

  useEffect(() => {
    const aUser = JSON.parse(localStorage.getItem("user"));
    if(aUser!=null){
      console.log(JSON.stringify(aUser));
      setUser(aUser);
    }
   
  }, [])

  return (
    <div className="App">
      <BrowserRouter>

          <Route exact path="/" render={ () => 
            !user.authorized ? <Login setUser={setUser} user={user}/> 
            : <Redirect to="/home" />  }
                />

          <Route exact path="/login" render={ () =>
             !user.authorized ? <Login setUser={setUser} user={user}/> 
              : null}/>

          <Route exact path="/home" 
            render={() => !user.authorized ?
              <Redirect to="/login" /> : <Forbidden/>
            }/>
      
        </BrowserRouter>
    </div>
  );
}

export default App;

So let's assume that user data is already stored in local storage and the user is authorized. When i start up my react app it will first show the Home page and that's because i have set the Route "/" to redirect to "/home" if the user is authorized. Ok that good. My "problem" is when i refresh the page from /home it will redirect to /login. Why? Because Routes will be checked first and after that the useEffect() will run.

An obvious solution will be to redirect to /home as i do for the first Route ("/"). OK i get that but why useEffect() Won't run first? That's my main question.

Update:

I can solve MY problem from the beginning but i want to know if there is a solution regarding useEffect(). One solution is as i said before to redirect to "/home" if user is authorized like that

<Route exact path="/login" render={ () =>
             !user.authorized ? <Login setUser={setUser} user={user}/> 
              : <Redirect to="/home" /> 
       }
    />

Basically the same code as "/" Route.

Another solution that may be the best it's to get rid of useEffect() and load the user data with useState() like this:

const [user, setUser] = useState(()=>localStorage.getItem("user"));

Upvotes: 0

Views: 692

Answers (1)

Priyankar Kumar
Priyankar Kumar

Reputation: 437

The way you can solve this problem is by initializing the state itself by fetching from local storage like this:

 const [user, setUser] = useState(()=>localStorage.getItem("user"));

useState takes a function that can be used to initialize the state. This is used for lazy intialization.

Link to Docs

It's also good to keep in mind the order in which the different lifecycle hooks run.

Upvotes: 3

Related Questions