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
