title: "Maximum update depth exceeded" in React functional component
body: <p>I have a problem with a react functional component. When the react-apollo query is "on completed" executes a code to handle a token, and when finish send to another page (using <code>history.push</code>). </p>
  
  <p>When run the code I get a infinite loop with this message: <code>Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops</code></p>
  
  <ol>
  <li><p>I've tried comment <code>history.push</code> and the infinite loop does not happen again.</p></li>
  <li><p>I comment all the logic in <code>list-session</code> component to avoid a recursive call, but it does not work (I checked thoroughly the code to confirm is not a recursive call).</p></li>
  </ol>
  
  <p>I thing the problem is related with the lifecycle or with the history.push behavior</p>
  
  <p>Ptt: I'm learning react on this moment</p>
  
  <pre><code>  const { setUserInfo, setUserId } = useContext(userContext);
    const { token } = match.params;
  
    const onCompleted = data =&gt; {
      if (data.validateUser.status) {
        setUserId(token);
        setUserInfo(data.validateUser.infoUser);
        localStorage.setItem("token", token);
        // history.push("/list-session");
      } else {
        history.push("/rare-page");
      }
    };
  
    return (
      &lt;div className="Auth" data-testid="AuthPage"&gt;
        &lt;Query
          query={VALIDATE_USER}
          variables={{ userId: token }}
          onCompleted={onCompleted}
        &gt;
          {({ error }) =&gt; {
            if (error) return &lt;Error /&gt;;
            return (
              &lt;&gt;
                &lt;h2 data-testid="AuthState"&gt;Authenticating...&lt;/h2&gt;
                &lt;div className="spinner-border text-info" role="status"&gt;
                  &lt;span className="sr-only"&gt;Loading...&lt;/span&gt;
                &lt;/div&gt;
              &lt;/&gt;
            );
          }}
        &lt;/Query&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p><strong>EDIT 1:</strong>
  Added relevant code in the problem. I checked the component and no one of this make a recursive call, and no make a infinite <em>setState</em> call. The <em>setState</em> problem is the consecuence to another problem.</p>
  
  <pre><code>        &lt;AnimatedSwitch
            atEnter={bounceTransition.atEnter}
            atLeave={bounceTransition.atLeave}
            atActive={bounceTransition.atActive}
            mapStyles={mapStyles}
            className="route-wrapper"
          &gt;
            &lt;Route exact path="/" component={NoCredentials} /&gt;
            &lt;Route exact path="/token/:token" component={Auth} /&gt;
            &lt;Route path="/list-session" component={Home} /&gt;
          &lt;/AnimatedSwitch&gt;
  </code></pre>
  
  <p>and this is the code in Home component:</p>
  
  <pre><code>const Home = () =&gt; {
    const [activeTab, setActiveTab] = useState("activeSessions");
  
    return (
      &lt;ValidateToken&gt;
        &lt;Container className="bg-light"&gt;
          &lt;div className="Home"&gt;
            &lt;CreateSessionComponent /&gt;
            &lt;Nav tabs&gt;
              &lt;NavItem&gt;
                &lt;NavLink
                  className={classnames({
                    active: activeTab === "activeSessions"
                  })}
                  onClick={() =&gt; setActiveTab("activeSessions")}
                &gt;
                  Active Sessions
                &lt;/NavLink&gt;
              &lt;/NavItem&gt;
            &lt;/Nav&gt;
            &lt;TabContent activeTab={activeTab}&gt;
              &lt;TabPane tabId="activeSessions"&gt;
                {activeTab === "activeSessions" &amp;&amp; (
                  &lt;div&gt;
                    &lt;SessionsListComponent status="ACTIVE" /&gt;
                  &lt;/div&gt;
                )}
              &lt;/TabPane&gt;
            &lt;/TabPane&gt;
            &lt;/TabContent&gt;
          &lt;/div&gt;
        &lt;/Container&gt;
      &lt;/ValidateToken&gt;
    );
  };
  
  export default Home;
  </code></pre>