title: Update state from axios call in useEffect hook
body: <p>I'm new to react and I've just started learning about hooks and context.</p>
  
  <p>I am getting some data from an API with the following code:</p>
  
  <pre class="lang-js prettyprint-override"><code>const getScreen = async uuid =&gt; {
  
      const res = await axios.get(
        `${url}/api/screen/${uuid}`
      );
  
      dispatch({
        type: GET_SCREEN,
        payload: res.data
      });
    };
  </code></pre>
  
  <p>Which goes on to use a reducer.</p>
  
  <pre class="lang-js prettyprint-override"><code>case GET_SCREEN:
        return {
          ...state,
          screen: action.payload,
        };
  </code></pre>
  
  <p>In Screen.js, I am calling <code>getScreen</code> and sending the <code>UUID</code> to show the exact screen. Works great. The issue I am having is when I am trying to fetch the API (every 3 seconds for testing) and update the state of <code>nodeupdated</code> based on what it retrieves from the API. The issue is, <code>screen.data</code> is always undefined (due to it being asynchronous?)</p>
  
  <pre><code>import React, {
    useState,
    useEffect,
    useContext,
  } from 'react';
  import SignageContext from '../../context/signage/signageContext';
  
  const Screen = ({ match }) =&gt; {
    const signageContext = useContext(SignageContext);
  
    const { getScreen, screen } = signageContext;
  
    const [nodeupdated, setNodeupdated] = useState('null');
  
    const foo = async () =&gt; {
      getScreen(match.params.id);
  
      setTimeout(foo, 3000);
    };
  
    useEffect(() =&gt; {
      foo();
      setNodeupdated(screen.data)
    }, []);
  </code></pre>
  
  <p>If I remove the [] is does actually get the data from the api ... but in an infinate loop.</p>
  
  <p>The thing is this seemed to work perfectly before I converted it to hooks:</p>
  
  <pre class="lang-js prettyprint-override"><code>  componentDidMount() {
      // Get screen from UUID in url
      this.props.getScreen(this.props.match.params.id);
  
      // Get screen every 30.5 seconds
      setInterval(() =&gt; {
        this.props.getScreen(this.props.match.params.id);
  
        this.setState({
          nodeUpdated: this.props.screen.data.changed
        });
      }, 3000);
    }
  </code></pre>