title: Redux - Understanding advanced mapStateToProps returning a function
body: <p>I am trying to understand the mechanics of mapStateToProps when it returns a function.</p>
  
  <p>So I can't find much documentation except a short excerpt from the Redux docs that says in advance cases by returning a function, each instance will get its own memoized mapStateToProps and another user saying that this is an optimisation that prevents mapStateToProps being called for any parent prop changes.</p>
  
  <p>So this seems great for list items, where I would't want to re-render large list of items for any changes that doesn't affect an item.</p>
  
  <p>So the part that confuses me is that mapStateToProps won't be called for any parent prop changes, does that mean in order for an individual list 'Item' to be re-rendered it needs to be a smart connected component for it to pick up changes it cares about and re-render? Or does that mean it will never re-render for this particular Item instance?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Wanted to clarify that I am talking specifically about the factory function version of mapStateProps.</p>
  
  <p>Here is the feature I am talking about, taken from React-Redux docs:</p>
  
  <p><em>Note: in advanced scenarios where you need more control over the rendering performance, mapStateToProps() can also return a function. In this case, that function will be used as mapStateToProps() for a particular component instance. This allows you to do per-instance memoization. You can refer to #279 and the tests it adds for more details. Most apps never need this.</em></p>
  
  <p>And paragraph taken from this article:</p>
  
  <p><a href="https://medium.com/@cvetanov/redux-mapstatetoprops-optimization-5880078a8a7a" rel="noreferrer">https://medium.com/@cvetanov/redux-mapstatetoprops-optimization-5880078a8a7a</a></p>
  
  <p><em>If redux receives an implementation which returns a function it performs a closure for wrapping the own props of the component and therefore bypasses the invocation of the mapStateToProps every time the component changes it’s props received from the parent component. It creates a so called purePropsSelector. How this is done can be seen here.</em></p>
  
  <p><strong>Update 2:</strong></p>
  
  <p>Right I am investigating the article that mentions the skipping, it seems to be when you wrap the own props in a closure and return a function that only uses the state. So it prevents the mapStateToProps being invoked when the parent props changes for each 'connected' child item.</p>
  
  <p>This is taken from that medium article I read above:</p>
  
  <pre><code>function mapStateToPropsFactory(initialState, ownProps) {
    // a closure for ownProps is created
    // this factory is not invoked everytime the component
    // changes it's props
    return function mapStateToProps(state) {
      return {
        blogs:
          state.blogs.filter(blog =&gt; blog.author === ownProps.user)
      };
    };
  }
  export default connect(mapStateToPropsFactory)(MyBlogs);
  </code></pre>