React is usually pretty fast, but it’s easy to make small mistakes that lead to performance issues. Slow component mounts, deep component trees, and unnecessary render cycles can quickly add up to an app that feels slow. Luckily there are lots of tools, some even built in to React, that help with diagnosing performance issues. In this series we’ll highlight tools and techniques for making React apps fast. Each post will also have an interactive, and (hopefully) fun demo! The Problem: Unnecessary Render Cycles One of the most common issues that affects performance in React is unnecessary render cycles. By default, React components will re-render whenever their parent renders, even if their props didn’t change. For example, if I have a simple component like this: class DumbComponent extends Component {render() {return <div> {this.props.value} </div>;}} With a parent component like this: class Parent extends Component {render() {return <div><DumbComponent value={3} /></div>;}} Whenever the parent component renders, will re-render, despite its props not changing. DumbComponent Generally, if runs, and there were no changes to the virtual DOM, it is a wasted render cycle since the method should be pure and not have any side effects. In a large-scale React app, it can be tricky to detect places where this happens, but luckily, there’s a tool that can help! render render Why did you update? is a library that hooks into React and detects potentially unnecessary component renders. It detects when a component’s method is called despite its props not having changed. why-did-you-update render Setup Install with npm: npm i --save-dev why-did-you-update Add this snippet anywhere in your app: import React from 'react' if (process.env.NODE_ENV !== 'production') {const {whyDidYouUpdate} = require('why-did-you-update')whyDidYouUpdate(React)} that this tool is great in local development but make sure it’s disabled in production since it will slow down your app. Note Understanding the output monitors your app as it runs and logs components that may have changed unnecessarily. It lets you see the props before and after a render cycle it determined may have been unnecessary. why-did-you-update Fixing unnecessary renders Once you’ve identified components in your app that are re-rendering unnecessarily, there are a few easy fixes. Use PureComponent In the above example, is a pure function of its props. That is, the component only needs to re-render when its props change. React has a special type of component built-in called that is meant for exactly this use case. DumbComponent PureComponent Instead of inheriting from React.Component, use React.PureComponent like this: class DumbComponent extends PureComponent {render() {return <div> {this.props.value} </div>;}} Then, the component will only re-render when its props actually change. That’s it! Note that does a shallow comparison of props, so if you use complex data structures, it may miss some prop changes and not update your components. PureComponent Implement shouldComponentUpdate is a component method called before when either or has changed. If returns true, will be called, if it returns false, nothing happens. shouldComponentUpdate render props state shouldComponentUpdate render By implementing this method, you can instruct React to avoid re-rendering a given component if its props don’t change. For example, we could implement in our dumb component from above like this: shouldComponentUpdate class DumbComponent extends Component {shouldComponentUpdate(nextProps) {if (this.props.value !== nextProps.value) {return true;} else {return false;}} render() {return <div>foo</div>;}} Demo! To demonstrate , I installed the library in the TodoMVC app on Code Sandbox, an online React playground. Open the browser console and add some TODOs to see the output. why-did-you-update https://codesandbox.io/s/xGJP4QExn Notice that a few components in the app are rendering unnecessarily. Try implementing the techniques described above to prevent unnecessary renders. If done correctly, there should be no output from in the console. why-did-you-update Debugging Performance Issues in Production only works in local development. If you’re interested in understanding performance issues in your production app, try . why-did-you-update LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. LogRocket LogRocket instruments your app to record performance timings, Redux actions/state, logs, errors, network requests/responses with headers + bodies, and browser metadata. It also records the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps. _LogRocket helps you understand problems affecting your users, so that you can get back to building great software._logrocket.com LogRocket | Logging and Session Replay for JavaScript Apps Conclusion is a handy tool for detecting potentially unnecessary component re-renders, helping you make your app perform better. why-did-you-update Since only works in development, check out , for diagnosing bugs and performance issues in production. why-did-you-update LogRocket For more React performance tips, check out parts 1 and 3 of this series: _React is usually pretty fast, but it’s easy to make small mistakes that lead to performance issues. Slow component…_blog.logrocket.com Make React Fast Again [Part 1]: Performance Timeline _React is usually pretty fast, but it’s easy to make small mistakes that lead to performance issues. Slow component…_blog.logrocket.com Make React Fast Again [Part 3]: Highlighting Component Updates It’s tough to keep up-to-date on front-end dev. Join our weekly mailing list to learn about new tools, libraries and best practices that will help you build better apps:
![featured image - Make React Fast Again [Part 2]: why-did-you-update](https://hackernoon.imgix.net/hn-images/1*mJFYp7LKVzZM3PPjFb0QXQ.png?auto=format&fit=max&w=3840)
