How I automated the React + Redux development process.

Orsunmigbare — Sun, 29 Mar 2020 02:40:20 +0000

I worked on a medium-scale React.js project, which used Redux.js as it's state management tool sometimes last year. I got really bored having to repeat the process of declaring and importing "types" when I need to use a new "type", it got worse when I had to set up the project, repeating the process of creating actions, types, and reducers folders, I got bored. "There has to be an alternative," I thought.

So I embarked on a search on GitHub and NPM for an alternative solution. Although I found options like davezuko/react-redux-starter-kit on Github and @reduxjs/toolkit on NPM, these didn't solve the exact problem I had - repeating the same processes over and over again. So I had to create a solution by myself.

The Problem

Coming from a problem definition to problem solution perspective, I defined my problems as below :

The process of setting up react-redux is boring and repetitive.
Having to create a "type" file and create it's "action" and "reducer" file equivalent is stress.
Having to create and export a new type in a "type file", then importing the type in the use destination drains focus.
Every "reducer" file has the same template, so creating a new reducer file is repetitive in a way (unless doing a copy-and-paste).
Creating a new "reducer" file, importing in the rootReducer file and adding it to the "combineReducer" function is repetitive.

The solution

So I created a shell script with Node.js that handles all these problems.

The script is divided into modules, a "setup" module, and a "watch" module

the "setup" module SETS UP Redux in a basic React.js project by running the command "redux-helper setup" (The Project has to be structured like it was created with Create React App) as seen below.

The "watch" module WATCHES the project after REDUX has been setup and automates basic tasks like :

Synchronizes files across the actions, type and reducer folders respectively (If a type file, a reducer file, or an action file is created, it creates it's equivalent. )

Exports newly created files in the respective index files, and in the case of a reducer file, it imports It in the index file, and add the import to the combine reducer function.

A new redux “type” can be created anywhere from the corresponding action to the corresponding reducer file by using the shortcut !NT “type name” (and the newly created type is exported from the corresponding type file )

A "reducer" and "type" file is created with a basic template,

Phew! something that finally suits my needs..

The code is hosted here on Github if you care 😇.

Orsunmigbare / react-redux-helper

A CLI tool that helps Set-Up redux , and automate repetitive react-redux processes

Kindly share your thoughts and let me know what you think about this project. Happy coding and stay at home guys ☺️.

Boosting your React App’s performance with React.memo.

Orsunmigbare — Wed, 22 Jan 2020 01:57:35 +0000

There are some basic techniques which when followed can improve a React app's performance in terms of speed and memory management.

In this example, I will be creating a basic react app that fetches Bitcoin data from an API every 30 seconds and displays it to the user. We will compare the performance in terms of speed before and after the use of the React.Memo Higher-Order Component.

The React app has three main segments which are :

The function that calls the API and updates the state of the app

const fetchBitcoinData = () => {
    return fetch("https://api.cryptonator.com/api/ticker/btc-usd")
      .then(res => res.json())
      .then(res => {
        setBtcPrice(res.ticker.price)
        btcArray.push({ price: res.ticker.price, time: Date.now() });
        setBtcArray([...btcArray]);
      })
      .catch(e => {
        console.log("err ------->", e);
      });
  };

The Main App component

return (
    <div className="App">
      <h1>
        Current BTC Price -{" "}
        {btcArray[btcArray.length - 1]
          ? format(btcArray[btcArray.length - 1].price, { code: "USD" })
          : 0}
      </h1>
      {btcArray.map((price, i) => (
        <BtcItem key={i + "0-"} btcArray={price.price} time={price.time} />
      ))}
    </div>
  );
};

A group of list items that displays the price history of bitcoin with time

const BtcItem = ({ btcArray, time }) => {
  return (
    <div className="bitcoin-item">
      {format(btcArray, { code: "USD" })} at{" "}
      {new Date(time).toLocaleTimeString()}
    </div>
  );
};

When we run this react app we see in the performance monitor that on every call of API two things happen.

on every re-render our app (BTC) takes an average of 3.6ms to re-render (check the "Rendered at" section at the right)
Every BtcItem Component on the list is re-rendered which on average takes 3.9 ms.

If we introduce React.Memo to memoize and skip re-rendering components with static props. in this case, the BtcItem Component as seen below.

const BtcItem = React.memo(({ btcArray, time }) => {
  return (
    <div className="bitcoin-item">
      {format(btcArray, { code: "USD" })} at{" "}
      {new Date(time).toLocaleTimeString()}
    </div>
  );
});

we see after running the that :

Our app(BTC) takes only about an average of 1.03ms to re-render. (check the "Rendered at" section at the right)
On every re-render, the BtcItem Components that have been rendered are no longer re-rendered and only new items are re-rendered and take only an average of 0.9ms.

We see that applying this little technique for every 10 calls we optimized our application's performance by in terms of speed by about 120%. Although this post was intended to show the benefits of using React.memo in a React application, you should not memoize all the time, a guide on when to use memoization techniques can be found in this article by Kent. https://kentcdodds.com/blog/usememo-and-usecallback