UseEffect executes twice when it should execute only once I think. I use useEffect here to fetch some info when the page load, and I need to fetch data only once. I used to do this with the code below, but now I'm facing this problem
import "./App.css";
import axios from "axios";
import { useEffect, useReducer } from "react";
const appInitialState = {
pageLoading: true,
adminSignedIn: false,
};
const appStateReducer = (state, action) => {
if (action.type === "adminSigned") {
return { ...state, pageLoading: false, adminSignedIn: true };
} else {
return { ...state, pageLoading: false, adminSignedIn: false };
}
};
function App() {
const [appState, appStateDispatch] = useReducer(
appStateReducer,
appInitialState
);
useEffect(() => {
axios.post("http://localhost:8080/admin/v1/isAuthenticated").then((res) => {
console.log(res.data);
appStateDispatch({
type:
res.data.isAuthenticated === true ? "adminSigned" : "adminNotSigned",
});
});
}, []);
return (
<div className="App">
<h1>App</h1>
</div>
);
}
export default App;