title: Call API Every X Seconds in React Function Component
body: <p>I have the following react class component to call an API every 10 seconds. Its works with no issues.</p>
  
  <pre><code>class Alerts extends Component {
    constructor() {
      this.state = {
        alerts: {},
      }
    }
  
    componentDidMount() {
      this.getAlerts()
      this.timerId = setInterval(() =&gt; this.getAlerts(), 10000)
    }
  
    componentWillUnmount() {
      clearInterval(this.timerId)
    }
  
    getAlerts() {
      fetch(this.getEndpoint('api/alerts/all"))
          .then(result =&gt; result.json())
          .then(result =&gt; this.setState({ alerts: result }))
    }
  
    render() {
      return (
        &lt;&gt;
          &lt;ListAlerts alerts={this.state.alerts} /&gt;
        &lt;/&gt;
      )
    }
  }
  </code></pre>
  
  <p>I am trying covert this to a react functional component. This is my attempt so far.</p>
  
  <pre><code>const Alerts = () =&gt; {
  
      const [alerts, setAlerts] = useState([])
  
      useEffect(() =&gt; {
          getAlerts()
          setInterval(() =&gt; getAlerts(), 10000)
      }, [])
  
      getAlerts() {
          fetch(this.getEndpoint('api/alerts/all"))
              .then(result =&gt; result.json())
              .then(result =&gt; setAlerts(result)
      }
  
      return (
        &lt;&gt;
          &lt;ListAlerts alerts={alerts} /&gt;
        &lt;/&gt;
      )
  }
  </code></pre>
  
  <p>Please can someone help me complete the example? Is useEffect the correct usage or is there a better option?</p>
  
  <p>Any help would be appreciated</p>