react-performance.md

React/Redux Performance and Optimization

My Redux Ecosystem Links list includes a number of useful tools for visualizing React component updates, in the Devtools > Component Update Monitoring section.

React Components

• React Docs: Performance
  https://facebook.github.io/react/docs/advanced-performance.html
  https://facebook.github.io/react/docs/perf.html
  The React doc pages on performance. Describes the core concepts, including shouldComponentUpdate, using immutable data, and the Performance API for benchmarking.

• Performance Engineering with React
  http://benchling.engineering/performance-engineering-with-react/
  http://benchling.engineering/deep-dive-react-perf-debugging/
  https://news.ycombinator.com/item?id=11036007
  A 2-part series on React performance. Excellent information. Goes in-depth on use of the Perf API, shouldComponentUpdate, shallow equality, and how to properly profile components. Highly recommended. Further useful discussion in the HN comment thread.

• Respectable React Components
  http://kelle.co/react-perf-slides/
  A slideshow that walks through the core concepts of managing good React performance.

• Optimizing React Performance using keys, component lifecycle, and performance tools
  http://jaero.space/blog/react-performance-1
  http://jaero.space/blog/react-performance-2
  Another pretty good in-depth look at performance, with a number of useful illustrations. Only downside is that some of the examples follow bad practice by directly mutating state, but the performance information is solid.

• shouldComponentUpdate Will Short-Circuit an Entire Subtree of Components in React
  http://www.bennadel.com/blog/2904-shouldcomponentupdate-will-short-circuit-an-entire-subtree-of-components-in-reactjs.htm
  A reminder that SCU skips a component's children as well as that component, with a demo.

• Index as a Key is an Anti-Pattern
  https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
  A reminder that unique keys are the best idea for arrays of components.

• React.js pure render performance anti-pattern
  https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f
  Looks at common ways that you might accidentally stop pure rendering from doing its job, such as passing in new object references or creating new functions as props.

• How to Make Your React Apps 15x Faster
  https://reactjsnews.com/how-to-make-your-react-apps-10x-faster
  A couple quick tips: using NODE_ENV=production, and Babel's React constant/inline transformations

• Optimising React rendering
  https://medium.com/@lavrton/how-to-optimise-rendering-of-a-set-of-elements-in-react-ad01f5b161ae
  Another couple quick tips: only updating changed elements, and making children smarter

• Performance optimisations for React applications
  https://medium.com/@alexandereardon/performance-optimisations-for-react-applications-b453c597b191
  Covers ways to make update checks fast and easy. (NOTE: the advice given to "denormalize" data may not be the best approach - see discussion with Dan Abramov in the comments.)

Immutable Data

• Building Efficient UI with React and Redux
  https://www.toptal.com/react/react-redux-and-immutablejs
  Builds a simple app using React, Redux, and Immutable.js, and looks at some of the most common misuses of React and how to avoid them.

• "Comparing React to Vue for dynamic tabular data"
  https://news.ycombinator.com/item?id=11765477
  Good comments from an HN thread discussing a React vs Vue benchmark. A Discord developer talks about several lessons learned, including pros and cons of using Immutable.js, and only rendering elements that are visible.

• Immutable.js: worth the cost?
  https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4 Looks at several pros and cons of using Immutable.js, such as enforced immutability (pro), and major performance problems from calling toJS() frequently (con).

• React + Redux performance optimization with shouldComponentUpdate
  http://stackoverflow.com/questions/37285200/react-redux-performance-optimization-with-componentshouldupdate
  Discussion of proper Redux connection structure and use of Immutable's toJS(), with links to further articles and discussions.

Redux Performance

• High Performance Redux
  http://somebody32.github.io/high-performance-redux/
  A detailed HTML slideshow that digs down into React Redux to show how connect()'s optimizations work, and has interactive demos to show various approaches. (Note: the code-related slides advance using the down arrow to step through different lines of code - don't miss that info!)

• How to optimize small updates to props of nested component?
  http://stackoverflow.com/questions/37264415/how-to-optimize-small-updates-to-props-of-nested-component-in-react-redux
  Looks at how a normalized Redux state structure combined with multiple connected components can improve performance

• Redux TodoMVC Pull #1: Optimization
  mweststrate/redux-todomvc#1
  An optimization pass for a Redux vs MobX benchmark, demonstrating several techniques

• Redux Issue #1751: Performance issues with large collections
  reduxjs/redux#1751
  Discussion of several factors that affect Redux performance