Regarding optimizing redux, there are some well known techniques: memoizing, using reselect for example.

But there is one that remains unknown to many, although it’s simple and very efficient: The connect’s areStatesEqual option.

When state changes, all connect functions will be called, props mapped from state and component rendered. Imagine something like this :

Considering action addTodo adds a todo item in the todo reducer, when this action will be called, both connect will then be called and mapStateToProps computed.

Using areStatesEqual option, you can tell when not to bother to call mapStateToProps at all.

The docs say :

  • [areStatesEqual] (Function): When pure, compares incoming store state to its previous value. …


JSPM is not as mature as webpack, and its ecosystem is not as rich. But it has some cool features, such as being able to load a module from a remote url, which is not possible with webpack, even webpack 2 — at least yet.

This can be useful when you have scenarios where you need to load an arbitrary module, without bundle it inside your app first, while playing nice with dependencies.

If you come from webpack, it can have some pain points that I hit, so I thought I could share these here.

Installation

The installation instructions can be found here. …


Edit: I published react-css-variables, which makes defining CSS variables easy using a React component.

CSS variables are a game changer, they allow easy and cleanly separated JS-CSS communication (among other things !).

It’s really easy to use them in combination with styled-components, and opens some great possibilities, like controlling variables using react-motion :

You can see the result live here.

About

Julien De Luca

javascript, javascript and javascript. Ah, and React of course.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store