reactjs - React - Conditionally Redirect to a page based on item in local Storage

Question

I am having four pages in react. Basically there are four forms which the user need to fill and at the last form which is page 4, we have the post all the data. Everything works fine, but I also want to check if the user closes the tab after completing one form and then comes back, I am trying to redirect the user to the second page straight away, without needing him to fill the first form again. So what I am doing is putting the fields from Page 1 (form 1) into local storage and checking whether the local storage is empty or not in the first page in useEffect and then doing the redirect there. But it is not working for me. It goes to an infinite loop in the useEffect

My App.js File

 <div className="App">
  <Header />
    <Switch>
      <Route path='form1' exact component={form1}></Route>
      <Route path='form2' exact component={form2}></Route>
      <Route path='form3' exact component={form3}></Route>
      <Route path='form4' exact component={form4}></Route>
      <Route path='/' exact component={form1}></Route>
      <Route component={NotFound} />
    </Switch>
    </div>
</Router>
  );
}`

My Form 1 file

useEffect(() => {
 if(localStorage.getItem("form1Details")) {
    history.push("/form2");
  }
}, []);

question from:https://stackoverflow.com/questions/65642375/react-conditionally-redirect-to-a-page-based-on-item-in-local-storage

Answer 1

I always avoid these warnings by using a __isMounted variable:

const (__isMounted, setMounted) = useState(true);

useEffect(() => {
 if(localStorage.getItem("form1Details") && __isMounted) {
    history.push("/form2");
  }

 return () => setMounted(false);
}, []);