immer

reference checks: `prevProps.a === props.a`. For larger amounts of data, this assumes you've updated that data "immutably", by making copies and modifying the copies instead of the originals. This can be done with plain JS objects and arrays, it just can take a bit more diligence. (Libraries like Immer [0] can help with applying those updates immutably.) For the "skip rendering" part, React has offered several APIs over time, but they all basically boil down to "do shallow comparisons of data, and bail out if they're the same": - The old / deprecated `createClass()` API allowed use of a `PureRenderMixin` - Classes have a `shouldComponentUpdate()` lifecycle method where you can implement whatever custom comparison logic you want, and return `false` if the render should be skipped - Since the typical comparison in `shouldComponentUpdate` is a shallow equality check of both props and state, the `PureComponent` base class was added that does that by default - More recently, the `React.memo(MyComponent)` API was added to allow wrapping any component (class or function) with that same bailout behavior. All of those are actual React APIs, not separate packages. All that said, the React team advises that you should just write the app first, _then_ profile it later (in a production build!) to see where the key bottlenecks are and just optimize those. In most cases, you probably don't even have to do anything - performance will often be sufficient as-is. React's DevTools have a performance profiling tab [1] [2] that helps show which components rendered for a given update, which makes it a lot easier to track down unnecessary renders. The community has also created various "why did you update?" libs that log unnecessary renders. [0] https://github.com/mweststrate/immer [1] https://reactjs.org/blog/2018/09/10/introducing-the-react-pr... [2] https://www.netlify.com/blog/2018/08/29/using-the-react-devt...

static types).