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.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.