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 :
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.
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 !).
You can see the result live here.
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, “well they should !”) or the time to do so, or simply you have this PSD coming from nowhere and you have no choice but to deal with it.
Having used Photoshop for a long time myself, I have acquired some techniques to go from a random PSD to code…
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() function, sets its state and pass it as prop to the dumb component. When store updates, state is updated and the component is rendered again.
In the end, the React tree consists of containers wrapping dumb components, like this :
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 !
React router v4 is on the way, and it’s a huge step forward compared to its predecessors.
If you’ve ever tried to make a route that transitions to another with animation, with data fetching in the middle, you know how painful this can be. React async child to the rescue !
Here we return an…
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 :
This way you can still import default while still being able to override the component if you need to :