Interpreting the Flamegraph

Let's take a look at the flow of the Flamegraph for our bank app.

Components Rendered Needlessly

First, let’s consider what’s likely to be the root of the problem here. By default, whenever a Provider has its value changed, every child component is forced to re-render. That’s how the Consumer gets the latest values from the context object and stays in sync.

The problem here is that every component apart from Root is a child of Provider and they all get re-rendered needlessly!

Get hands-on with 1200+ tech skills courses.