title: React.useEffect: State not updating after axios request
body: <p>I am in the process of trying to convert a class Component into a functional component to leverage the <a href="https://reactjs.org/docs/hooks-state.html" rel="nofollow noreferrer">React.useState hook</a> and <a href="https://reactjs.org/docs/hooks-effect.html" rel="nofollow noreferrer">React.useEffect hook</a>. The component is making requests to check if a token exists on a server.</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import { Loader, Dimmer, Transition, Message } from 'semantic-ui-react';
  import axios from 'axios';
  
  import { hasBeenVerified } from '../../store/reducers/users/index';
  
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  
  
  function Confirmation({ match, isAccountVerified, hasBeenVerified }) {
    var [token, setToken] = React.useState(null);
    var [duration, setDuration] = React.useState(500);
    var [responseMessage, setResponseMessage] = React.useState({});
    var [error, setError] = React.useState(false);
  
    React.useEffect(() =&gt; {
      console.log('token ', token);
      axios
        .get(`http://localhost:8016/users/confirmation/${setToken(match.params.token)}`)
        .then(response =&gt; {
          if (response.status === 200) {
            hasBeenVerified();
            setResponseMessage(response.data.msg);
            return;
          }
        })
        .catch(function(error) {
          if (error.response.status === 404) {
            setResponseMessage(error.response.data.msg);
            setError(true);
            return;
          }
          if (error.response.status === 400) {
            setResponseMessage(error.response.data.msg);
            setError(true);
            return;
          }
        });
  
        return () =&gt; {
         setToken(null);
         setResponseMessage({});
         setError(false);
      };
    }, [token, isAccountVerified, hasBeenVerified, setResponseMessage, setError]);
    console.log('token ', token);
  
    console.log('isAccountVerified ', isAccountVerified);
    console.log('match', match);
    console.log('responseMessage', responseMessage);
    return (
      &lt;div className="login-form"&gt;
        &lt;Transition
          visible={isAccountVerified}
          unmountOnHide={true}
          animation="scale"
          duration={duration}
        &gt;
          {!isAccountVerified ? (
            &lt;Dimmer active inverted&gt;
              &lt;Loader /&gt;
            &lt;/Dimmer&gt;
          ) : (
            &lt;Message success={!error} error={error} header={responseMessage[0]} /&gt;
          )}
        &lt;/Transition&gt;
      &lt;/div&gt;
    );
  }
  
  function mapStateToProps(state) {
    const { users } = state;
    const { isAccountVerified } = users;
  
    return { isAccountVerified };
  }
  
  const mapDispatchToProps = dispatch =&gt; bindActionCreators({ hasBeenVerified }, dispatch);
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(Confirmation);
  </code></pre>
  
  <p>I have added <a href="https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects" rel="nofollow noreferrer">values to the dependency array because it is an outside value it depends on</a>. I've also added the cleanup function prescribed as well.</p>
  
  <p>Can anyone offer any insight why it doesn't render at all i.e. success, the different error results?</p>