How to prevent component from redrawing when passing through routes?

Question

React

how to set the shouldComponentUpdate method to a function component or how not to redraw it when switching routes? In an application, a Header is a function component that is imported every time on any page. As a result, it is re-rendered when passing through the routes. How to solve this issue? so that it does not redraw Thank you all.

Answer 1

It all depends on a number of factors:
1. If the Header is on pages rendered along certain routes, then only by moving the component outside the Route.
2. If it is outside the Route and your application is completely re-rendered when changing routes, then the component can be wrapped in React.memo .