'ReactJs useEffect execute twice when the page load

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;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source