1 
<BrowserRouter> <App /> </BrowserRouter>

Assuming that App component renders Header(List of Links) and Main(List of Routes) component.Does navigating from one Link to another Link re-render the App component ?

Improve this question

1 Answer 1

Reset to default
1

React only re-renders the components which are changed.

When you use react-router and are routing from page to page react will look at the old DOM, compare it to the version of the new DOM and then update only the parts which have changed.

The (in javascript) copy of the old DOM is also called the virtual DOM. This allows react to render so fast as it does only rerender the DOM elements which have changed. Rerendering the DOM is usually a resource intensive thing to do and react's rendering mechanism allows for the least amount of rendering and thus a relatively high performance.

Does navigating from one Link to another Link re-render the App component ?

Assuming that your <App /> component is the root component this will not rerender this particular component. It will however, change all the components which have been changed during the routing.

For example we have a really simple application with a text section and a header. Suppose that we are now navigating using react router, the text section changes but the header stays the same. Now react will only rerender (alter the DOM) the text section and leave the header section untouched (no DOM changes).

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thank you @Willem. So you are saying it re-renders but react will update only the modified part.
Exactly, react will identify the changed parts and only upgrade them to ensure maximal performance of your application rendering
Usually having more stateless components make your app easier think about since you have less state to manage and this is done more centralized. For performance reasons stateless or statefull components aren't that much differrent. However you should still use stateless components whenever possible
Thanks again. But in order to get the New DOM( react use to compare with the Virtual DOM) react will re-render the App component yes?
The app component is basically a bunch of javascript to React. The <App> </App> is just JSX code which gets transformed to javascript. When navigating certain parts of this JS have changed, React can detect these changes and update them accordingly (simplified still a bit)
|