Optimize React Performance

Good advice every React dev should be aware of:

React is known to be blazingly fast with its Virtual DOM implementation. However, even with React’s built-in performance, there are instances when the UI can begin to feel sluggish. The primary culprit for poor performance is generating too many renders and reconciliations. We’ll cover 4 techniques to help ensure that your app is optimized and offers a snappy user experience.

  1. Use key correctly
  2. Manage shouldComponentUpdate
  3. Extend PureComponent instead of Component
  4. Build for production

Luckily, when not using keys (item #1), React will give you a console warning. To check if you’ve built for production or not (item #4), you can use the visual indicator contained in the React Dev Tools.

Optimize React Performance →

🚀 Want to take it to the next level? The Twitter folks have a nice writeup on the performance tweaks they’ve done on Twitter Lite. The DeferredRenderWrapper HOC especially is a nice one.

Elsewhere , ,

Leave a Reply

Your email address will not be published. Required fields are marked *