Can I optimise my React App reconciliation for performance?

Question

I am optimising the performance of my React app. Most state changes seem to result in the following "Timings" in the chrome devtools performance tab:

As you can see, a fair chunk of time is spent on the reconciliation (completed root) step. This always seems to start at the root of the application (BrowserRouter)

Is this the expected behaviour or should I ideally be seeing only a subtree of the component in which state is changing being reconciliated.

Thanks!

Answer 1

After further research, its seems that reconciliation may always start from the root and thus the main performance improvement that could be made is to simplify the component tree

Answer 2

Maybe you can try to use the Rendering-Paint flashing to checkout which componets have changed