Respond to a route without reprocessing

Question

So, I have a simple React / Flux application using Backbone router. I have a case where the user creates an object, and the path is updated from /object/new to /object/:id . However, there is no need to redisplay the page, because the component is the same, and due to the associated store update, after ajax-create call it is updated.

Currently, I just fixed a router to expose a method that simply updates the URL and does not actually affect the route-specific method. This seems to be hacked and does not really affect cases where some components (i.e. the widget) need to be added / removed (at least it eliminates the responsibility for knowing which components should be removed from the router), but the primary User Interface does not need re-visualization.

So this leaves me with three questions:

• What is the React way to handle changes to URLs that do not require component changes?
• What about url changes that add or change specific components?
• Should stores be responsible for triggering routing events?

Answer 1

One of the main suggestions regarding React is that re-rendering is very cheap.

This means that you can overplay it without negative effects. This is the full 180 from Backbone, where rendering is very expensive, which leads to the logic you are looking for, namely how to avoid rendering.

Under the hood, React does this check for you if you remove the Virtual DOM using the DOM. In other words: when you use the open rendering function in React, you really do not render the DOM, but rather just describe the new state of the DOM using Javascript.

In practice, this means that if you do not calculate many values, you can constantly replay at a speed of 60 frames per second without any optimization steps.

This gives you the freedom to completely "re-render" even if there really are very few things on your application.

So my advice is to not really try anything to prevent React, to re-transfer the entire page, even if nothing changes. Such logic will add complexity, and you can avoid this complexity at no cost by unconditionally redefining it when changing the route. This also makes sense from a conceptual point of view, since a route is nothing but the global state of the application.

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

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

For example: I sometimes globally rewrite the entire DOM hierarchy to mouseMove events, and there is no noticeable performance impact.

As a rule, think of rendering as a zero-cost operation. You may now have some expensive operations in your React components. If so, you can use React's lifecycle methods to perform these tasks on demand. Especially take a look at mustComponentUpdate, componentWillReceiveProps and componentWillUpdate.

If you use Flux and adhere to the paradigm of immutability, you can do very cheap reference tests of equality of staff and requisites for work on demand. Thanks to this, you can increase productivity.

Using the shouldComponentUpdate method, you can prevent the rendering call if it requires too much processing power. However, I would only do this if it would give better performance due to the expensive operation that you performed yourself.

In your case, I would enter the state of the route into the root component, inject them as attributes into the children of the root, and implement shouldComponentUpdate to prevent rendering.