React way to route without re-rendering

One of the main value propositions of React is that re-rendering is very very cheap.

This means that you can rerender excessively without negative effects. This is a complete 180 from Backbone, where rendering is very expensive, which leads to logic you are seeking, namely how to avoid renders.

Under the hood, React does this check for you by diffing the Virtual DOM with the DOM. In other words: When you use the exposed render function in React, you don't really render the DOM, rather, you just describe the new state of the DOM with Javascript.

In practice, this means that if you don't compute many values, you can constantly rerender at 60 frames per second without any optimization steps.

This gives you the freedom to fully "re-render", even if only very few things on your app actually change.

So my advice is to actually not try anything to prevent React to rerender the whole page, even if nothing changes. This kind of logic will add complexity, and you can avoid this complexity at no cost by unconditionally rerendering on a route change. This makes sense from a conceptional point of view too, since the route is nothing but global app state.

The freedom to be able to do this is one of the main reasons that makes React awesome.

It is a classic case of "premature optimization is the root of all evil".

For example: I sometimes globally rerender the whole DOM hierarchy on mouseMove events, and there is no performance impact observable.

As a general rule, think of a rerender as a zero-cost operation. Now you might have some expensive operations in your React components going. If this is the case, you can use the lifecycle methods of React to do these on demand. Especially have a look at shouldComponentUpdate, componentWillReceiveProps and componentWillUpdate .

If you are using Flux and you adhere to the immutability paradigm, you can make very cheap referencial equality checks of state and props to do work on demand. With this, you can improve performance.

With the shouldComponentUpdate method, you can prevent a render call if it requires too much computational power. However, I would only do this if it yields in an improved performance because of an expensive operation you implemented yourself.

In your case, I would inject the route state in the root component, inject them as props into the children of the root and implement shouldComponentUpdate on them to prevent a render.