title: React 18 strict mode causing component to render twice
body: <p>The changes to strict-mode in <strong>React version 18</strong> causes my code to render twice, which causes an error in <strong>axios</strong> abort controller, but I don't know how to clear the <strong>error</strong> from the browser console after the app renders twice.</p>
  <p>Please note: I am working on a sign-up / log-in app and even after I successfully logged in, <strong>React</strong> takes me back to the log-in page, because of the <strong>axios</strong> error</p>
  <pre class="lang-js prettyprint-override"><code>useEffect(() =&gt; {
          let isMounted = true;
          // used by axios to cancel request
          const controller = new AbortController();
  
          const getGoals = async () =&gt; {
              try {
                  const response = await goalPrivate.get(&quot;/goals&quot;, {
                      // option to cancel request
                      signal: controller.signal
                  })
                  console.log(response?.data);
                  // set goals state when component mounts
                  isMounted &amp;&amp; setGoals(response?.data);
              } catch (error) {
                  console.log(error.message);
                  // when refreshToken expires
                  navigate(&quot;/login&quot;, { state: { from: location }, replace: true });
              }
          }
  
          getGoals();
  
          // cleanup function
          return () =&gt; {
              // don't set state if component unmounts
              isMounted = false;
              // cancel request if component unmounts
              controller.abort();
          }
          
          // eslint-disable-next-line react-hooks/exhaustive-deps
      }, [])
  
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/hBLob.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hBLob.png" alt="shows code containing useEffect and it's side effect" /></a></p>