title: React: Remove deduped data from local state from redux state using hooks
body: <p>I have a react component (summarized code below). The react component should show an animation on screen when clicked and dispatches an action to redux server which is then stored remotely. When remote server updates the clients with new events, the local component should remove the matching events from local and only render the number of events that other users had. </p>
  
  <p>However, I do not know how to update component state from redux state. I can get the duplicated events, and I know which ones to remove. However, if I update state using setSelfData it turns into an infinite loop as the memo component is still updating on the old redux state, which isn't being cleared out. Is there a way to update local state from redux state using hooks? Alternatively, would it be better to have the saga that handles button clicks to also update the redux store such that subsequent notifications are filtered out in the reducer, so that mapStateToProps only receives the new events to render?</p>
  
  <pre><code>type OwnProps = {
      className: string;
  }
  
  type ReduxStateProps = {
      widgetData: number[];
  }
  
  const MyPanel = React.memo&lt;OwnProps &amp; ReduxStateProps&gt;(({ className, widgetData } ) =&gt; {
      const initialData = {
          selfWidgetData = [],
          animationsRequired = 0,
      };
      const [selfData, setSelfData] = useState&lt;DataRenders&gt;(initialData);
      const onButtonClick = () =&gt; {
          selfData.selfWidgetData.push(Date.now());
          selfData.animationsRequired = 1;
          setSelfData(selfData);
      };
  
      if(widgetData &amp;&amp; widgetData.length &gt; 0) {
          const {updatedSelfData, updatedAnimationsRequired} = filterDuplicateData(selfData.selfWidgetData, widgetData);
          setSelfData({
              selfWidgetData = updatedSelfData,
              animationsRequired = updatedAnimationsRequired,
          });
      }
      return (
          //render
      );
  });
  
  const mapStateToProps = ({...});
  const mapDispatchToProps = ({...});
  export default connect(mapStateToProps, mapDispatchToProps)(MyPanel);
  </code></pre>