Avoiding Unnecessary Renders in React

You’re probably really tired of me saying this, but fast DOM performance is one of the biggest feathers in React’s cap. That doesn’t mean you get all that great performance for free, though. While React handles a lot of the heavy lifting, you should consciously take certain steps to ensure that your app isn’t doing unnecessary work and slowing things down. One of the biggest steps involves making sure each component’s render method is called only when it absolutely has to be. In the next few sections, we’ll look at why that’s a problem and what you can do about it.

About the render Method

The render method’s official job description is pretty simple. It just needs to show up on each component and help ...

Get Learning React: A Hands-On Guide to Building Web Applications Using React and Redux, Second edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.