Add an "Optimization" recipe

[markerikson]

Per discussion in #1751 , it's time we added a recipes page to cover performance and optimization. @JAndritsch has volunteered to help write it, and I can definitely provide feedback and assistance.

Initial potential set of topics to cover per that discussion:

1. Connect components to state at the lowest level possible to prevent cascading renders from parent to children.
2. Normalize your data and pass collections of IDs instead of collections of large objects to components.
3. Use ImmutableJS.
4. Take advantage of "initialProps".
5. Re-define shouldComponentUpdate() when necessary.
6. Use React.addons.Perf to find and eliminate wasted renders.
7. Use Chrome's built-in profiling tools.
8. Memoization with Reselect
9. Per-instance component memoization
10. Performance in general. That subscriptions are O(n), that React Redux shallowly compares props, that memoization helps us avoid recalculations, etc.

Link-dumping a bunch of potential references, docs, and discussions:

• https://github.com/markerikson/react-redux-links/blob/master/react-performance.md
• http://somebody32.github.io/high-performance-redux/
• http://stackoverflow.com/questions/37264415/how-to-optimize-small-updates-to-props-of-nested-component-in-react-redux
• Optimize things a little bit mweststrate/redux-todomvc#1
• http://stackoverflow.com/questions/37285200/react-redux-performance-optimization-with-componentshouldupdate
• https://twitter.com/dan_abramov/status/720219615041859584
• Move frequently changing values out of the page object mozilla/tofino#282
• https://twitter.com/dan_abramov/status/733742952657342464
• https://twitter.com/dan_abramov/status/719723707124604928
• Middleware should be passing EFFECT actions? redux-saga/redux-saga#241 (comment)

[markerikson]

Some relevant issues and docs:

• The "Performance" section in the FAQ: http://redux.js.org/docs/FAQ.html
• Document performance implications of ownProps and a workaround #1603
• Redux Performance with Large Store and frequent updates #1303

[JAndritsch]

Thanks for putting this together, Mark. I should have some free time this week to start combing through those links and gathering info. I'll ping you once I have a rough draft.

[somebody32]

Looks really good! I think that list is not in the final order of topics appearing in the guide?
And my 5 cents for now: I think it will be cool to add a topic about visualizing react component rerenders (with tools like render-visualizer). I know that this is more general to react perf, but for me, it was really helpful to find wrong container/representation hierarchy on lists

[markerikson]

That was just the list of topics that @JAndritsch and @gaearon were proposing over in #1751 . Don't think any specific order was implied. And yeah, render visualization and such would be good to cover too.

[JisuPark]

Why don't we list the helpful tools for optimization?
In my case

• easy to handle shouldComponentUpdate with Recompose
• babel plugin: transform-react-constant-elements, transform-react-inline-elements.
• eslint rule: prefer-stateless-function

also useful.

[JAndritsch]

Update: I've got a good start on this documentation and am continuing to work on it when time is available. I'll hopefully have a draft for review soon.

[markerikson]

Cool, was going to ask if you'd had any time to look at it. I still haven't managed to start in on the "Structuring Reducers" page myself. Maybe this weekend, maybe?

Definitely ping me when you've got something to look at.

[HugoHeneault]

Any updates on this, guys? :)

[cristian-sima]

@markerikson Can you give a code example for each of the 10 points?

Like a : do not do this, do this

[markerikson]

@cristian-sima : I'm fairly busy at the moment, and when I do have time, my current priority is trying to work on the "Structuring Reducers" recipe described in #1784 . I'd suggest reading through the links listed, particularly the set of articles included in the "React Performance" part of my React links list (which is the first link mentioned in this issue).

[cristian-sima]

@markerikson How many connect functions do you think I should use?

My app is going slow, and I am using just 5 connects

[HugoHeneault]

@cristian-sima have you checked memoization?

http://redux.js.org/docs/recipes/ComputingDerivedData.html

[cristian-sima]

I have no idea what is that, but I will look :)

Thanks