I am trying to test function calling in react but the app.js function is getting called multiple times in strict mode.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();App.js
import React from "react";
import "./App.css";
import Auth from "./Auth";
import { Route, Routes, BrowserRouter } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Auth />} />
</Routes>
</BrowserRouter>
);
}
export default App;Auth.js
import React, { useState, useRef } from "react";
import "./App.css";
import CheckCurrentUser from "./CheckCurrentUser";
let counter = 0;
let currentState;
function Auth() {
const [loginState, setLoginState] = useState(false);
const CurrentAuthenticatedUser = useRef(undefined);
const loading = useRef(false);
async function checkLoginState() {
if (!loading.current) {
console.log(loading.current);
loading.current = true;
console.log(loading.current);
counter += 1;
console.log("before the await function : " + counter);
if (!CurrentAuthenticatedUser.current) {
console.log("counter value inside the if is :" + counter);
console.log(
"current authenticated user is :" + CurrentAuthenticatedUser.current
);
CurrentAuthenticatedUser.current = await CheckCurrentUser();
console.log(loading.current);
setLoginState(CurrentAuthenticatedUser.current);
loading.current = false;
}
}
console.log("after the await function : " + counter);
}
function loadingCheckLoginState() {
checkLoginState();
loading.current = true;
}
console.log("executing before");
currentState = loading.current
? console.log("loading is on")
: loadingCheckLoginState();
console.log("executing after");
return <h1>Open Points</h1>;
}
export default Auth;CheckCurrentUser.js
function CheckCurrentUser() {
try {
console.log("inside check current user document try block");
fetch(`https://jsonplaceholder.typicode.com/posts`).then((response) =>
console.log(response)
);
return true;
} catch (error) {
console.log("no logged in user - inside catch block");
return null;
}
}
export default CheckCurrentUser;In the console I am getting the following screenshot of the console in firefox browser
My questions are :
- why is the App.js getting executed twice?
- It seems like the second time it is executed, it is ignoring the results of the previous state.
I am using react 18.
Thank you in advance. Regards Gourab
