title: React UseState hook causing infinite loop
body: <p>I am using ReactJs to grab an RSS news feed every 5 seconds to convert it into a JSON string to render it on the webpage. I am using both useEffect and useState hook for this purpose as I am passing the JSON string in the useState hook variable, however. It kind of works but it produces an infinite loop. I have searched through the fixes provided in stack overflow but I couldn't find the exact problem. Here is my code snippet.'</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, {useEffect, useState} from 'react';
  import Carousel from 'react-bootstrap/Carousel';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import {getNews} from "../../actions/news";
  import Parser from 'rss-parser';
  
  const NewsCarousel = ({getNews, news: {news, loading} }) =&gt; {
  
      const [getFeed, setFeed] = useState({
          feed: ''
      });
  
      useEffect(() =&gt; {
          const interval = setInterval(() =&gt; {
              getNews();
          }, 5000);
          return () =&gt; clearInterval(interval);
      }, [getNews]);
  
  
      const { feed } = getFeed;
      const newsFeed = feed =&gt; setFeed({ ...getFeed, feed: feed });
  
      let parser = new Parser();
      parser.parseString(news, function(err, feed){
          if (!err) {
              newsFeed(feed);
          } else {
              console.log(err);
          }
  
      });
  
      console.log(feed);
      return (
          &lt;div className="dark-overlay"&gt;
          &lt;/div&gt;
      );
  };
  
  
  NewsCarousel.propTypes = {
      getNews: PropTypes.func.isRequired,
      news: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state =&gt; ({
      news: state.news
  });
  
  export default connect(mapStateToProps, {getNews}) (NewsCarousel);
  </code></pre>
  
  <p>Its when I console.log my feed variable that's when I see in the console the infinite logs.
  Below is my getNews Action</p>
  
  <pre><code>import axios from 'axios';
  import { GET_NEWS, NEWS_FAIL } from "./types";
  
  export const getNews = () =&gt; async dispatch =&gt; {
    try{
       const res = await axios.get('https://www.cbc.ca/cmlink/rss- 
       topstories');
       dispatch({
          type: GET_NEWS,
          payload: res.data
       })
  } catch(err) {
      dispatch({
          type: NEWS_FAIL,
          payload: { msg: err}
      })
  }
  };
  </code></pre>