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

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…

A great article popped up recently, To Designers With Love (A Letter From a Front-end Developer), explaining why it is important that designers should design in a way that helps front end developers getting sense of their design. But sometimes, designers simply don’t have the skills (I hear you say…

In React/Redux, to connect a component to the state, a wrapper component, often called a container, wraps another component, often referred to as a dumb component : Redux’s connect returns a container wrapping our component. It subscribes to a store which is set in React context, calls our mapStateToProps()…

react-async-child is a simple yet nice React component: It allows to pass a promise as its child, and waits for the promise to be resolved to render : Using async/await promise, you can fill props as if they were usual props. Magic ! A use case: React router v4 React router v4 is on the…

Sometimes, you need some dependency injection in React. For example, when using redux containers inside dumb components, it is sometimes useful to be able to inject your own component instead of the container. You may pass the component through props, or through children. Using children is generally a good idea, but there are cases where you do not want to do that. So the simple implementation is to export a function taking the component as an argument. Here is how :

We do not need to bind callbacks in React classes, just use the “transform-class-properties” babel plugin and set class properties directly on the instance. Using arrow function, the scope remains the instance, so you do not need to bind anything.