By Guillaume Claret

To optimize the rendering of React components, we often use the PureRenderMixin. The PureRenderMixin mixin only re-renders the components when the props or the state changed according to the shallow equality. This suppose that:

• we use immutable objects (so that the shallow equality always implies the deep equality);
• we rarely create fresh but identical objects (so that the deep equality often implies the shallow equality).

In order to enforce this workflow, we propose some runtime checks to assert that the shallow equality is indeed equivalent to the deep equality over the props. This helped us to remove some useless re-renderings, and protects us against mutation bugs.

read more

By Guillaume Claret

Popularized in JavaScript by some libraries like Redux, the sum types are a data structure representing values with different cases. Native in most functional languages, sum types are unfortunately not a builtin feature in JavaScript. We will recall what are the sum types and show how to use them in JavaScript.

Sum types

A sum type represents an “or” of values. Anytime we write a function which can have different kinds of arguments or results, we are using a sum type. For example, a function which returns either a number or a string message (in case of error) returns a sum type. The sum types complement the product types such as Array which are “and” of values. In JavaScript, one way to encode a sum type is to use an object with a type field. For example, the following function attempts to parse a string and returns either an error message or a number:

read more

By Guillaume Claret

In order to minimize the number of DOM updates, React uses a reconciliation algorithm. To optimize the rendering even further, we can use pure components which are re-rendered only if their props change. All of that seems to work well, but in practice we can encounter terrible slowdowns making the interface unusable. This is generally due to components which are needlessly re-rendered.

We will see how to measure the performance of a React application, to understand which components are re-rendered too much, and present some common pitfalls.

read more

By Guillaume Claret

At OuiCar, we are migrating to the React/Redux stack to develop our web front-end. While these are great libraries, they do not tell you how to shape your code in the large. We present our way to organize the Redux store and actions.

Reducers

As with the combineReducers() helper, we split our Redux store into a flat list of independent sub-stores. However, our sub-reducers have the following shape:

read more