You need to parse your news only when there is a change in new props. Add another useEffect with news as a dependency so it will be called when the news changes and then update your state there.

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} }) => {

    const [getFeed, setFeed] = useState({
        feed: ''
    });

    useEffect(() => {
        const interval = setInterval(() => {
            getNews();
        }, 5000);
        return () => clearInterval(interval);
    }, [getNews]);

    useEffect(() => {
      const newsFeed = feed => setFeed({ ...getFeed, feed: feed });

      const parser = new Parser();
      parser.parseString(news, function(err, feed){
        if (!err) {
            newsFeed(feed);
        } else {
            console.log(err);
        }
      });
    }, [news]);

    return (
        <div className="dark-overlay">
        </div>
    );
};


NewsCarousel.propTypes = {
    getNews: PropTypes.func.isRequired,
    news: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    news: state.news
});

export default connect(mapStateToProps, {getNews}) (NewsCarousel);

Passing an empty array as the second argument to useEffect makes it only run on mount and unmount, thus stopping any infinite loops.

useEffect(() => {
  setIngredients({});
}, []);

This was clarified to me in the blog post on React hooks at https://www.robinwieruch.de/react-hooks/

Problem is here updateState({...state, name: 'something'}) , you're updating state the before even it's rendering and that continues the updates the state, which will re-render, it goes on. Use useEffect to update the state.

useEffect(() => {
  updateState({...state, name: 'something'});
}, [])

If Value is calculated based on selected then this useEffect() is the issue:

useEffect(() => {
  setSelected([]);
}, [Value]);

As you said, it will cause an infinite loop as selected changes again and again, causing Value to change as well and the component keeps re-rendering.

Another place to look for error is in your <Select> component callbacks with onSelect and onDeselect. It is not a good idea to pass setSelected as parameter in most circumstances because useState hook has side effects. You don't provide the full code here, but I think it is likely that this also causes state change unstably in your component and causes the re-rendering.

Moreover, you have 2 useEffect() both have [selected] as dependency, so when selected changes it will cause duplicate rendering to the component as well. This is, however, not the cause to your primary issue.

Solution could be using only 1 useEffect() as follow:

Step 1. Regarding your <Select> component callback:

onSelect={handleSelect}
onDeselect={handleDeselect}

const handleSelect = (val) => {
  // think about removing setSelected
  onSelectValueMultiSelect(val, selected, setSelected, options);
  // move this here
  onChangeHandle(selected);
  // reset selected here if wanted
  setSelected([]);
}

const handleDeselect = (val) => {
  // think about removing setSelected
  onDeselectValueMultiSelect(val, selected, setSelected, options);
  // move this here
  onChangeHandle(selected);
  // reset selected here if wanted
  setSelected([]);
}

Step 2. Refactor your useEffect(), using only 1 instead of 3:

useEffect(() => {
  options.forEach(...);
  setChildrenOptions(children);
}, [selected]);

This is not the cleanest code, but this can be the right direction to solve your very particular issue without knowing much about the rest of the code.