Using componentDidMount() to check user log in status on app load - reactjs

Question

I am running a React frontend app that checks whether a user is currently logged in on a Rails API. I used componentDidMount to check then set the state accordingly but when the page loads for the first time, and the user is logged in, the required info flashes on the page then the app renders and the state goes back to initial state.
Here is my code:
import React, { Component } from "react";
import { Routes, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import Home from "./Home";
import Header from "./Header";
import Signin from "./Signin";
import Signup from "./Signup";
import { withRouter } from "../withRouter";
import axios from "axios";
class App extends Component {
constructor(props) {
super(props);
this.state = {
loggedInStatus: "NOT_LOGGED_IN",
user: {},
};
this.handleLogin = this.handleLogin.bind(this);
}
checkLoginStatus() {
axios
.get("http://localhost:3001/logged_in", { withCredentials: true })
.then((response) => {
if (
response.data.logged_in &&
this.state.loggedInStatus === "NOT_LOGGED_IN"
) {
this.setState({
loggedInStatus: "LOGGED_IN",
user: response.data.user,
});
} else {
this.setState({
loggedInStatus: "NOT_LOGGED_IN",
user: {},
});
}
})
.catch((error) => console.log("check login error", error));
}
componentDidMount() {
this.checkLoginStatus();
}
handleLogin(data) {
if (data.logged_in) {
this.setState({
loggedInStatus: "LOGGED_IN",
user: data.user,
});
this.props.navigate("/");
}
}
render() {
return (
<React.StrictMode>
<Header />
<div className="app container mt-3">
<Routes>
<Route path="/" element={<Home user={this.state.user.email} />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route
path="/signin"
element={<Signin handleLogin={this.handleLogin} />}
/>
<Route
path="/signup"
element={<Signup handleLogin={this.handleLogin} />}
/>
</Routes>
</div>
</React.StrictMode>
);
}
}
export default withRouter(App);

Answer 1

Strict mode can't automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions: Class component constructor , render , and shouldComponentUpdate methods.
Try to remove strict mode and see if the behavior is the same.