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

[naw]

@cristian-sima My experience is redux-devtools can slow things down quite a bit. If you are using redux-devtools, you might want to check how slow your app is without it before you get too far down the optimization road. You should be able to use substantially more than 5 connects.

[cristian-sima]

A significant improvement in performance I've made today by writing some shouldComponentUpdate.

Essentially, redux makes all the components to update. So, telling which to update has helped me

[markerikson]

Hi, @JAndritsch . Wanted to check in and see if you are still planning to work on this. You said you'd started a draft - is it posted anywhere?

[JAndritsch]

Hey @markerikson.

Sorry for the delays here. Admittedly, I've had less time to work on this than originally thought. That being said, I still plan on putting in the effort when I can. I will send you the first draft when it's completed.

[markerikson]

Gotcha. Yeah, I understand the "find time to write" issues :)

I'd actually suggest pushing up your work in progress to a fork repo now. That way we can help contribute as you go.

Thanks for helping with this!

[JAndritsch]

@markerikson Good idea. I created a separate branch and started the optimization recipe. Here's a direct link to it: https://github.com/JAndritsch/redux/blob/optimization-recipe/docs/recipes/Optimization.md.

[JAndritsch]

So I was just discussing Redux optimization today at work and that conversation reminded me about this thread. I'd still like to contribute, assuming the content is accurate. Would anyone here be interested in reviewing the draft above? If all looks well, I'll try to finish out the remaining sections and then submit a PR.

[markerikson]

Yeah, I'll try to take a look at it over the next day or two.

On a related note, I wrote a blog post a couple months ago that discussed some of the major aspects of performance: Practical Redux, Part 6: Connected Lists, Forms, and Performance. Might be helpful to cross-reference some of the ideas in there.