Let’s take a look at an App component that renders a list of suggested Gym club nearby and an input form that allows users to search for workout routine.
The problem with this code is that every time a user searches for a workout, SuggestedGymClub re-renders.
If SuggestedGymClub is a big and expensive component to render, it can cause bad performance for the app. So why does it re-render anyway ?
Because App component re-renders whenever search or workoutList change. When a parent component re-renders, all of its children re-renders as well, no matter what.
The solution to prevent re-renders
In our simple case, the solution is pretty simple. If we want SuggestedGymClub component not to re-render, we have to prevent App from re-rendering.
For that, we can extract all the logic of workout searching into its own component.
For experienced React developers, this seems pretty obvious. But it can be easily overlooked when you write big component and you loose track of what state is shared or not.
So next time you notice performance issue in your app, I think looking for this simple state location issue first can save you a lot of debugging.