Changing props state using api causes infinite loop

Question

I don't know why, changing the props state inside useEffect causes infinite loop of errors. I used them first locally declaring within the function without using props which was running ok.

EDIT:

Home.js

import Axios from "axios";
import React, { useEffect, useState } from "react";

function Home(props) {
  // const [details, setDetails] = useState({});
  // const [login, setLogin] = useState(false);
  useEffect(() => {
    try {
      const data = localStorage.getItem("expensesAccDetails");
      if (data) {
        Axios.post("http://localhost:3001/eachCollectionData", {
          collection: data,
        }).then((res) => {
          if (res.data.err) {
            console.log("Error");
          } else {
            console.log(res.data[0]);
            props.setLogin(true);
            props.setUserdetails(res.data[0]);
          }
        });
      }
    } catch (err) {
      console.log(err);
    }
  }, []);

  return props.login ? (
    <div>
      <div>Welcome {props.setUserdetails.FullName}</div>
    </div>
  ) : (
    <div>You need to login first</div>
  );
}

export default Home;

App.js

function App() {
  const [login, setLogin] = useState(false);
  const [userdetails, setUserdetails] = useState({});

  return (
    <Router>
      <Routes>
        <Route
          path="/Home"
          element={
            <>
              <Home
                setLogin={setLogin}
                login={login}
                setUserdetails={setUserdetails}
                userdetails={userdetails}
              />
              <Bars login={login} />
            </>
          }
        />
      <Routes>
    <Router>

  );

Here I initialized the states directly in App.js so I don't have to declare it on every page for the route renders. I just passed them as props to every component.

Answer 1

I suggest to create a componente Home with the post and two sub-component inside:

const Home = () => {
  const [userDetails, setUserDetails] = useState({});
  const [login, setLogin] = useState(false);

  useEffect(() => {
    // api call
  }, []);

  return (
    <>
      <Welcome login={login} details={userDetails} />
      <Bars login={login} details={userDetails} />
    </>
  );
};

where Welcome is the following:

const Welcome = ({ userdetails, login }) => (
  <>
    login ? (
    <div>
      <div>Welcome {userdetails.FullName}</div>
    </div>
    ) : (
    <div>You need to login first</div>
    );
  </>
);

A better solution is to use only one state variable:

const [userDetails, setUserDetails] = useState(null);

and test if userDetails is null as you test login is true.

An alternative if you have to maintain the call as you write before, you can use two state as the follow:

function App() {
  const [userdetails, setUserdetails] = useState(null);
  return (
    <Router>
      <Routes>
        <Route
          path="/Home"
          element={
            <>
              <Home
                setUserdetails={setUserdetails}
              />
              <Bars login={!!userdetails} />
            </>
          }
        />
      <Routes>
    <Router>
  );

and on Home component use a local state:

const Home = ({setUserdetails}) => {
  const [userDetailsLocal, setUserDetailsLocal] = useState(null);

  useEffect(() => {
    // api call
    // ... on response received:
    setUserdetails(res.data[0]);
    setUserDetailsLocal(res.data[0]);
    // ...

  }, []);

  userDetailsLocal ? (
    <div>
       <div>Welcome {userDetailsLocal.FullName}</div>
    </div>
  ) : (
     <div>You need to login first</div>
  );
};

Answer 2

I advise to follow Max arquitecture for your solution. the problem lies in the Router behavior. React Router is not part of React core, so you must use it outside your react logic.

from documentation of React Router:

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render.

https://v5.reactrouter.com/web/api/Route/component

Edit: ok, you make me write it. A solution could be like:

function App() {
  const [login, setLogin] = useState(false);
  const [userdetails, setUserdetails] = useState({});

useEffect(() => {
    try {
      const data = localStorage.getItem("expensesAccDetails");
      if (data) {
        Axios.post("http://localhost:3001/eachCollectionData", {
          collection: data,
        }).then((res) => {
          if (res.data.err) {
            console.log("Error");
          } else {
            console.log(res.data[0]);
            setLogin(true);
            setUserdetails(res.data[0]);
          }
        });
      }
    } catch (err) {
      console.log(err);
    }
  }, []);

  return (
    <Router>
      <Routes>
        <Route
          path="/Home"
          element={
            <>
              <Home
                login={login}
                userdetails={userdetails}
              />
              <Bars login={login} />
            </>
          }
        />
      <Routes>
    <Router>

  );