title: Deep Compare in Redux Reducer or in Component's ShouldComponentUpdate?
body: <p>In my React Redux app, a <code>setInterval()</code> continuously calls an action creater <code>this.props.getLatestNews()</code> which queries a REST API endpoint. On getting the API response (an array of objects), it will dispatch an action with the response array as the payload.</p>
  
  <p><strong>React Component</strong></p>
  
  <pre><code>class Newsfeed extends Component {
      constructor(props) {
          super(props);
          this.state = { ... }
      }
  
      componentWillMount() {
          this.updateTimer = setInterval(() =&gt; { this.props.getLatestNews() }, 1000);
      }
  
      componentWillUnmount() {
          clearInterval( this.updateTimer );
      }
  
      shouldComponentUpdate(nextProps, nextState) {
          // Should we do a deep compare of nextProps &amp; this.props, 
          // shallow compare of nextState &amp; thisState?
      }
  
      render() {
          return ( ... )
      }
  }
  
  const mapStateToProps = (state) =&gt; ({
      newsfeed: state.newsfeed
  });
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          getLatestNews: () =&gt; dispatch(getLatestNews())
      }
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Newsfeed);
  </code></pre>
  
  <p>In the reducer, it currently always update part of the state, whether or not there is any changes</p>
  
  <p><strong>Reducer</strong></p>
  
  <pre><code>export default function newsfeedReducer(state=initialState, action) {
      switch (action.type) {
          case NEWSFEED_RECEIVED:
              // Or should we do the deep compare of `action.payload` with `state.items` here?
              return { ...state, items: action.payload }
  
          default:
              return state
      }
  }
  </code></pre>
  
  <p><strong>Root Reducer</strong></p>
  
  <pre><code>...
  
  const rootReducer = combineReducers({
      newsfeed: newsfeedReducer
  });
  
  ...
  </code></pre>
  
  <p>Most of the time, when the API results are received, there are no new items that do not already exist in the Redux store. If the reducer still replaces this part of the store with the API results, the connected component will re-render due to the new object reference to <code>props</code> unless we do a deep comparison inside <code>shouldComponentUpdate()</code>.</p>
  
  <p>In order to avoid unnecessary re-rendering of the React Components, I was thinking of either performing a deep compare of the current and next props in the <code>shouldComponentMount()</code> function, or doing the deep compare of the <code>action.payload</code> with <code>state.items</code> that it should replace.</p>
  
  <p>Where is the recommended location to perform the deep comparison? Or is this unnecessary at all?</p>
  
  <p>Thank you!</p>