CODEWITHSUNDEEP
javascriptreactjsreact-router
user10025500
user10025500

Reputation:

React navigating between Links

<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 ?

Upvotes: 1

Views: 36

Answers (1)

Willem van der Veen
Willem van der Veen

Reputation: 36580

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).

Upvotes: 1

Related Questions