Simple Pattern to use Highchart and React

At the time I am compositing this entry, Highchart doesn’t collaborate naturally in a React project. There is an open source project available but it is not part of the official release. However, using directly the library from Highchart into your TypeScript and React project is not a huge burden. In this article, we will […]

How to Organize Model Type with TypeScript and React/Redux

I will not pretend that there is a universal way organized type in a Redux/React application. Instead, I’ll present what, in the project I am actually working in my day to day job, I found an easy, clean and clear way to organize types. First, let’s establish that other than all the business logic types […]

4 Features to Boost React-Redux Performance

Recently, I’ve been optimizing one of our websites and I’ve seen tremendous improvement by adding or modifying some behaviors of how Redux and React communicate. In this article, we will see four approaches that can work together to avoid propagating a render to React. The fours area we will cover are : Batch your actions […]

Checking all options with one or many Redux action?

Imagine the situation of a UI with many checkboxes and an option to select them all. In the perspective that the feature of checking all checkboxes is new, would it be a good idea to have the “select all” button to just loop the checkbox action with each id one by one? The short answer […]

React Dropdown Mounting Optimization from 400ms to 2ms

I always have the Chrome’s developer tool open without exception when developing websites. I am having this habit since the first FireBug extension was released from FireFox a very while ago! Once in a while, I collect performance and look at the result. It keeps me on my toes if regression occurs or merely to […]

Handling React form with Redux-Form and TypeScript

Most applications require using some kind of form to collect user inputs. So far, I’ve avoided relying on a third-party library when using React and Redux. When we think about it, it’s not hard to send the data to the Redux store, performing some validation and rendering again to React. This loop is done hundred […]

A simple React and Redux Architecture

There are a lot of different ways to have a system built around React and Redux. This is mainly because both frameworks are not opinionated on how developers leverage them. In this article, I’ll present a simple architecture that uses React and Redux. The idea is to not complicate the life cycle by avoiding an […]

TypeScript with a generic React Component that use generic property

React is fairly straightforward for simple scenario and TypeScript integrates very well with the JSX syntax (called TSX for TypeScript). However, like many systems, when we push on the limit a little, it starts to be less obvious. One case is the one that you want to have a component generic. Imagine that you want […]

How to get React Router Route Segment

Using React-Router library is almost the defacto in the industry right now. It handles many scenarios around how to route and handle URL on the client side. One specific case is that you may have some custom parameter that you want to extract to show specific information. For example, if you have a user and […]

Optimizing Redux Store Mapping

Redux is a simple data flow that many React developers are using. Recently, Redux introduced the option to be able to shim a callback function when the Redux store send the notification that its state has changed. This is great because it allows us to perform logic between the store and to connected components. This […]