From the course: React: Advanced Code Challenges
Unlock this course with a free trial
Join today to access over 25,200 courses taught by industry experts.
Avoiding unnecessary rerenders - React.js Tutorial
From the course: React: Advanced Code Challenges
Avoiding unnecessary rerenders
- [Instructor] Another common issue is when sometimes components re-render even when the data they use hasn't changed, causing slower UI performance in your React applications. In this video, we're going to see and learn how to avoid unnecessary re-renders in your React applications. And to understand how it works, we're going to look at one example. We're going to look at one bad example, so the same as we have seen before. So we have the app components with nested components, so the dashboard and the counter. The app component holds the state, which is passed down using props to the counter. Let's see, inside the counter components. So where we can read the state inside the button, but we can also increment the state by clicking on the button. And for every component we log the renders event. So we're going to be able to see what components renders and how often. So let's go here to see what renders. So whenever we click on the button, but also when we type a message, hello world…