title: React app freezing due to useEffect hook in 16.9 while working fine in 16.8
body: <p>The code runs fine on React 16.8, yet freezes on >=16.9. I looked at the changes for 16.9 but all it mentioned was an additional <em>warning</em> when there's an infinite loop, not an actual change in behaviour, so this shouldn't be happening, yet it is. </p>
  
  <p>Setting useEffect's dependency to [] does break the loop but means the code needs to be modified and I'm not sure how.</p>
  
  <p>The below code can also be found in a sandbox <a href="https://codesandbox.io/s/389o3qyoq5" rel="nofollow noreferrer">here</a>. The version is set to 16.8.4 so it doesn't freeze.</p>
  
  <p>index.jsx</p>
  
  <pre class="lang-js prettyprint-override"><code>//...
  import { SessionContext, getSessionCookie, setSessionCookie } from "./session";
  import "./styles.css";
  
  const history = createBrowserHistory();
  
  const LoginHandler = ({ history }) =&gt; {
    const [email, setEmail] = useState("");
    const [loading, setLoading] = useState(false);
    const handleSubmit = async e =&gt; {
      e.preventDefault();
      setLoading(true);
      // NOTE request to api login here instead of this fake promise
      await new Promise(r =&gt; setTimeout(r(), 1000));
      setSessionCookie({ email });
      history.push("/");
      setLoading(false);
    };
  
    if (loading) {
      return &lt;h4&gt;Logging in...&lt;/h4&gt;;
    }
  
    return (
      //...
    );
  };
  
  const LogoutHandler = ({ history }: any) =&gt; {
    //...
  };
  
  const ProtectedHandler = ({ history }) =&gt; {
     //...
  };
  
  const Routes = () =&gt; {
    const [session, setSession] = useState(getSessionCookie());
    useEffect(
      () =&gt; {
        setSession(getSessionCookie());
      },
      [session]
    );
  
    return (
      &lt;SessionContext.Provider value={session}&gt;
        &lt;Router history={history}&gt;
          &lt;div className="navbar"&gt;
            &lt;h6 style={{ display: "inline" }}&gt;Nav Bar&lt;/h6&gt;
            &lt;h6 style={{ display: "inline", marginLeft: "5rem" }}&gt;
              {session.email || "No user is logged in"}
            &lt;/h6&gt;
          &lt;/div&gt;
          &lt;Switch&gt;
            &lt;Route path="/login" component={LoginHandler} /&gt;
            &lt;Route path="/logout" component={LogoutHandler} /&gt;
            &lt;Route path="*" component={ProtectedHandler} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/SessionContext.Provider&gt;
    );
  };
  
  const App = () =&gt; (
    &lt;div className="App"&gt;
      &lt;Routes /&gt;
    &lt;/div&gt;
  );
  
  const rootElement = document.getElementById("root");
  render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>session.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import * as Cookies from "js-cookie";
  
  export const setSessionCookie = (session: any): void =&gt; {
    Cookies.remove("session");
    Cookies.set("session", session, { expires: 14 });
  };
  
  export const getSessionCookie: any = () =&gt; {
    const sessionCookie = Cookies.get("session");
  
    if (sessionCookie === undefined) {
      return {};
    } else {
      return JSON.parse(sessionCookie);
    }
  };
  
  export const SessionContext = React.createContext(getSessionCookie());
  </code></pre>
  
  <p>Expected result: app functions in 16.9 just like in 16.8</p>
  
  <p>Actual result: app freezes in 16.9 due to supposed infinite loop in useEffect </p>
  
  <p>Error message: Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.</p>