title: Reducing waste in Redux + React
body: <p>I want to get rid of any getState in actions, as it makes them harder to test, also having all required items passed as arguments is much safer and clean approach. Problem comes with passing some, lets say environmental variables into actions.</p>
  
  <p>I have a component that needs to show a single item, it also triggers an action. An action requires not only an item, but also, for example a full list of items.</p>
  
  <p>We do not need to rerender the stateless item list component just because some other item changed, yet again, to pass newest version of the list we have to...make waste and render again.</p>
  
  <p><strong>Waste approach:</strong></p>
  
  <pre><code>const ListItem = ({name, list, onClickHandler}) =&gt; 
    &lt;li onClick={() =&gt; onClickHandler(name, list)}&gt;{{name}&lt;/li&gt;
  
  /////////////////////////////
  
  class ListItemContainer extends React.Component {
    (...)
  
    shouldComponentUpdate(newProps) {
      //first red flag is the fact that I need to compare comples objects, in that 
      //case an array of objects, instead of simple values that should be rendered or not
  
      return !_.isEqual(newProps.list, this.props.list) //...and so on
    }
  
    render() {
       return &lt;ListItem {...this.props} /&gt;
    }
  
    (...)
  }
  </code></pre>
  
  <p><strong>No waste approach</strong></p>
  
  <pre><code>//fist difference is that we do not pass list into item renderer
  
  const ListItem = ({name, onClickHandler}) =&gt; 
    &lt;li onClick={() =&gt; onClickHandler(name)}&gt;{{name}&lt;/li&gt;
  
  /////////////////////////////
  
  class ListItemContainer extends React.Component {
    (...)
  
    shouldComponentUpdate(newProps) {
      // comparing only the simple values that are about to be shown
      return newProps.name !== this.props.name
    }
  
    onClickHandler(name) {
      //I can make it much more flexible, with dynamic number of arguments but that's not the point here
  
      // the container does not need to rerender to pick the newest version of 'list' from the reducer, it just lies in props
  
      return this.props.onClickHandler(name, this.props.list)
    }
  
    render() {
       return &lt;ListItem name={this.props.name} onClickHandler={onClickHandler.bind(this)} /&gt;
    }
  
    (...)
  }
  </code></pre>
  
  <p>Second solution is not only working, but it is also very efficient in matters of rendering only what has changed and complexity of calculating changes. </p>
  
  <p>What worries me it the clean code matter of that approach, as I feel that container gets sort of very coupled with that methods, arguments and the stateless component. </p>
  
  <p>What do you think about this approach and what is your solution for avoiding 'getState' and waste?</p>