A class on various React performance techniques
- React docs on optimizing performance
- Introducing the React Profiler
- Code splitting
- Code splitting + server side rendering with Loadable Components
The avoiding re-renders app demonstrates shouldComponentUpdate, PureComponent, React.memo, useCallback, and immer. The v2 branch has complete code with some comments.
These techniques aren't always necessary, until they are. The following posts offer some thoughts on the costs of optimization:
While some techniques are not always necessary, being disciplined with immutability in React is always a good idea. The following posts and videos were referenced in class:
- The Future of JavaScript MVC Frameworks - David Nolen's post on how using ClojureScript's immutable data structures in Om outperformed vanilla React.
- Lee Byron's introduction to Immutable. This includes great technical descriptions of the underlying data structures.
- Michel Westrate's introduction to immer. This includes a great description of how immer works under the hood.
- Understanding Clojure's Persistent Vectors, pt. 1: This series explains how Clojure's persistent, immutable data structures work. These data structures inspired a lot of the work done in the JS community in this regard. This post includes references if you want to dig even further into the academic work done.
The redux-reselect app demonstrates computing derived data efficiently using reselect's createSelector. The v2 branch has complete code with some comments.
While this app uses redux, the underlying ideas are not specific to it.
The lazy loading images app demonstrates how to use the React render prop/children as a function pattern and the intersection observer API to make a lazy loading component. This only exists on the master branch.