DEV Community: Nikhil Kumaran S

You probably don't need Redux: Use React Context + useReducer hook

Nikhil Kumaran S — Tue, 01 Sep 2020 05:57:16 +0000

I would like to amend this: don't use Redux until you have problems with vanilla React. - Dan Abramov

Dan said this way back in 2016, and now that we have React Context and useReducer hook, the use cases of redux is very minimal. In this post, we will create a good old todo list example using Context and useReducer hook.

First, let's set up our initial state and actions. Let our todo app have three actions - add, remove, and toggle completed.

const initialState = {
  todoList: []
};

const actions = {
  ADD_TODO_ITEM: "ADD_TODO_ITEM",
  REMOVE_TODO_ITEM: "REMOVE_TODO_ITEM",
  TOGGLE_COMPLETED: "TOGGLE_COMPLETED"
};

Now let's add a reducer function to handle our actions.

const reducer = (state, action) => {
  switch (action.type) {
    case actions.ADD_TODO_ITEM:
      return {
        todoList: [
          ...state.todoList,
          {
            id: new Date().valueOf(),
            label: action.todoItemLabel,
            completed: false
          }
        ]
      };
    case actions.REMOVE_TODO_ITEM: {
      const filteredTodoItem = state.todoList.filter(
        (todoItem) => todoItem.id !== action.todoItemId
      );
      return { todoList: filteredTodoItem };
    }
    case actions.TOGGLE_COMPLETED: {
      const updatedTodoList = state.todoList.map((todoItem) =>
        todoItem.id === action.todoItemId
          ? { ...todoItem, completed: !todoItem.completed }
          : todoItem
      );
      return { todoList: updatedTodoList };
    }
    default:
      return state;
  }
};

Let's break it down.

In the ADD_TODO_ITEM action, I'm spreading the existing list and adding a new todo item to the list with id(unique-ish), label(user-entered value), and completed flag.
In the REMOVE_TODO_ITEM action, I'm filtering out the todo item that needs to be removed based on the id.
In the TOGGLE_COMPLETED action, I'm looping through all the todo items and toggling the completed flag based on the id.

Now, let's wire these up with Context and useReducer. Let's create a TodoListContext.

const TodoListContext = React.createContext();

Let's create a Provider function that returns our TodoListContext's Provider.

const Provider = ({ children }) => {
  const [state, dispatch] = React.useReducer(reducer, initialState);

  const value = {
    todoList: state.todoList,
    addTodoItem: (todoItemLabel) => {
      dispatch({ type: actions.ADD_TODO_ITEM, todoItemLabel });
    },
    removeTodoItem: (todoItemId) => {
      dispatch({ type: actions.REMOVE_TODO_ITEM, todoItemId });
    },
    markAsCompleted: (todoItemId) => {
      dispatch({ type: actions.TOGGLE_COMPLETED, todoItemId });
    }
  };

  return (
    <TodoListContext.Provider value={value}>
      {children}
    </TodoListContext.Provider>
  );
};

Let's break it down.

We are passing our reducer function and our initialState to the useReducer hook. This will return state and dispatch. The state will have our initialState and the dispatch is used to trigger our actions, just like in redux.
In the value object, we have todoList state, and three functions addTodoItem, removeTodoItem, and markAsCompleted which trigger ADD_TODO_ITEM, REMOVE_TODO_ITEM, and TOGGLE_COMPLETED actions respectively.
We are passing our value object as prop to the TodoListContext's Provider, so that we can access it using useContext.

Great, now our global store and reducers are setup. Let's now create two components AddTodo and TodoList which will consume our store.

const AddTodo = () => {
  const [inputValue, setInputValue] = React.useState("");
  const { addTodoItem } = React.useContext(TodoListContext);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        placeholder={"Type and add todo item"}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button
        onClick={() => {
          addTodoItem(inputValue);
          setInputValue("");
        }}
      >
        Add
      </button>
    </>
  );
};

In AddTodo, we are using useContext to subscribe to our TodoListContext and getting addTodoItem dispatch function. This component has an input field where the user enters the todo item and an add button to add the todo item to the list.

const TodoList = () => {
  const { todoList, removeTodoItem, markAsCompleted } = React.useContext(
    TodoListContext
  );
  return (
    <ul>
      {todoList.map((todoItem) => (
        <li
          className={todoItem.completed ? "completed" : ""}
          key={todoItem.id}
          onClick={() => markAsCompleted(todoItem.id)}
        >
          {todoItem.label}
          <button
            className="delete"
            onClick={() => removeTodoItem(todoItem.id)}
          >
            X
          </button>
        </li>
      ))}
    </ul>
  );
};

In TodoList component, we are using useContext to subscribe to our TodoListContext and getting todoList state, removeTodoItem, and andmarkAsCompleted dispatch functions. We are mapping through the todoList and rendering the todo items and a remove(X) button next to it. On clicking on an item we are marking it as complete and when clicking on X button we are removing it from the list.

Finally, let's wrap our two components with our Provider.

export default function App() {
  return (
    <Provider>
      <AddTodo />
      <TodoList />
    </Provider>
  );
}

Great. We used Context and useReducer hook to manage our state as an alternative to redux. You can check the working code in codesandbox.

That's it, folks, Thanks for reading this blog post. Hope it's been useful for you. Please do comment your questions and suggestions.

Building your own React Hooks.

Nikhil Kumaran S — Sat, 22 Aug 2020 14:03:59 +0000

Hooks

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

React has various build-in hooks,

useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

Custom Hooks

When we want to share stateful logic among react components, we can go for custom hooks. A custom Hook is just a JavaScript function whose name starts with use and that may call other react Hooks.

Let's create a useClipboard hook which copies a given text to the clipboard. We'll use the Clipboard API to achieve this.

Unfortunately, Firefox doesn't fully support Clipboard API so make sure you use Chrome or Safari.

You can view the end result here - https://7lyrf.csb.app/
When you click on copy button, the code will be copied to your clipboard and you can paste it anywhere. Note that when you try to click the copy button within the codesandbox you will get permission denied, so open the output link in the new tab and interact with it.

Let's first look at the Clipboard.js file. Clipboard API does asynchronous read from and write to the system clipboard. So I'm setting isCopied state to true when our text is copied successfully and setting it to false when there is an error.

setClipboard is where we define the logic for copying to clipboard. First I'm checking if I have clipboard-write permission. If the permission is granted or if it is prompted to the user, we can use navigator.clipboard.writeText to set our text to the system clipboard. I'm returning [isCopied, setClipboard] similar to how useState returns two variables. You can return any number of values though.

Next, I'm using useEffect to reset the isCopied state after a specified time interval. Finally exporting our useClipboard hook.

Now let's look at how we use our custom hook. In the App.js file, I'm importing our useClipboard hook and calling it with a time interval. As we defined, it will return isCopied bool and setClipboard function which we can use to set our text to the clipboard.

I have a code tag with console.log('Hello world') text and a button copy which when clicked will copy the content of the code to our system clipboard. When the text is copied I'm changing the button label to copied based on the isCopied state and resetting back to copy after our specified interval.
Great. Now we implemented our own custom hook which we can share among our components.

That's it, folks, thanks for reading this blog post. Hope it's been useful for you. Please do comment your questions and suggestions

References

Web Workers: For non-blocking User Interface

Nikhil Kumaran S — Sat, 15 Aug 2020 13:31:24 +0000

In this post, I'll explain how you can use web workers to perform CPU intensive tasks without blocking the User Interface.

What is a Web Worker?

A web worker is a JavaScript code that runs on a background thread, separate from the main execution thread of a web application.

The advantage of this is that CPU intensive tasks can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.

Web workers run in another global context that is different from the current window. You can run whatever JS code you like inside the worker thread, with some exceptions. For example, you can't directly manipulate the DOM from inside a worker, or use some default methods and properties of the window object.

Examples

First, let's see a laborious task(calculating prime numbers) implemented without web workers.

Here we have an animation running smoothly at 60fps in the main thread. If you click on the CPU intensive task button, it prints the last prime number generated within a random range.
This calculation is also done on the same main thread without using web workers. So when you click the button, the animation freezes for a second(depends on your system specs).
The animation I used is just for our easy visualization. All the user interactions will also be blocked because of our laborious operation.

To avoid this we can move our CPU intensive task to the separate background thread using web workers. Since web workers cannot modify the DOM and print the result, we'll communicate with it by passing messages.

index.js file - Main thread

const iterations = 200;
const multiplier = 1000000000;

if (!window.Worker) {
  console.log("Worker not supported in your browser");
} else {
  const worker = new Worker("src/worker.js");

  worker.onmessage = function (message) {
    console.log("Message received from worker");
    document.querySelector(".result").innerText =
      message.data.primes[message.data.primes.length - 1];
  };

  function doPointlessComputationsInWorker() {
    worker.postMessage({
      multiplier: multiplier,
      iterations: iterations,
    });
  }
  document.querySelector("button").onclick = doPointlessComputationsInWorker;
}

Here in index.js file, we are posting the input values(iterations and multiplier) using worker.postMessage to our web worker and waiting for the result via worker.onmessage

worker.js - Background thread.

function calculatePrimes(iterations, multiplier) {
  var primes = [];
  for (var i = 0; i < iterations; i++) {
    var candidate = i * (multiplier * Math.random());
    var isPrime = true;
    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
      if (candidate % c === 0) {
        // not prime
        isPrime = false;
        break;
      }
    }
    if (isPrime) {
      primes.push(candidate);
    }
  }
  return primes;
}

onmessage = function (e) {
  console.log("Worker: Message received from main script");
  var iterations = e.data.iterations;
  var multiplier = e.data.multiplier;
  var primes = calculatePrimes(iterations, multiplier);

  postMessage({
    command: "done",
    primes: primes,
  });
};

Here in worker.js file, we are receiving the input(sent from index.js) using onmessage and calculating the primes and sending the data back to the main thread using postMessage

Result

Now if I click the button, the animation runs smoothly without any issues as our laborious task now runs separately on a background thread.
You can check the result here

I tried doing web worker example in codesandbox, but for some reason, I couldn't import the worker file(const worker = new Worker("src/worker.js")). Also, I couldn't embed the codepen example as DEV only allows embedding pens and not projects

That's it, folks, Thanks for reading this blog post. Hope it's been useful for you. Please do comment your questions and suggestions.

References

React Performance Improvements: Make your React app Performant.

Nikhil Kumaran S — Sat, 08 Aug 2020 14:59:15 +0000

Introduction

In this blog post, I'll explain some methods which you can use to improve the performance of your ReactJS application. By performance, I mean the user interactivity performance, like reducing sluggishness, slowness or freeze issue, and not the page load performance like reducing bundle size.

Premature optimization is the root of all evil

I agree with this quote but at the same time knowing what could go wrong and preventing it, is always a plus.

Causes for sluggishness in UI

Unnecessary re-rendering of components.
Too much data being rendered on the UI. - Will write about this in the next blog post.

Preventing unnecessary re-renders

Use Memoized/Pure components

Components should re-render only when its state or props changes. React by default doesn't do this. When a component is updated(state/props changes) all of its child components are re-rendered. To avoid this we wrap the child component with React.memo

Eg:

In the above example, we have an App component which has an input field that changes the input state and we have a Counter component(click on the hamburger menu in the top left to jump to the Counter.js file) which has a button that increments the count state. We also have a console.log which prints on every re-render of the Counter component.

When you click the button the count is incremented and the console.log is triggered(bottom of the right pane). This is fine because our component state(count) changes so our component re-renders.
Now, when you type on the input field you will again see that the console.log is triggered. This shouldn't happen because the Counter's state(count) and props(label) both are not changed.
So to avoid this unnecessary re-render we wrap the Counter component with React.memo By doing this we memorized our component which means when there is no change in the input(state/props) the output won't change(re-render).

If you use a Class component you can prevent the re-render by extending the Counter component with React.PureComponent instead of React.Component(Refer below)

Use React.useCallback for function props

When you send a callback function as a prop, whenever your component updates new reference of the function will be created and passed to the child which makes the child re-render. To avoid this we use React.useCallback.

Eg:

I've changed the previous example by adding an extra prop clearInput(callback function).
This function clears the input field. In the Counter component I'm calling this on even values of count. Now, when you type in the input field, the Counter component is re-rendered because the function reference changes each time you type(input state changes).
To avoid this, we create the callback function with React.useCallback and setInput as its dependency.
Now if you type, the Counter component doesn't re-render.

In the case of class component, you should define a function as a class method and bind the method in the constructor or use arrow functions(Refer code below).

Use React.useMemo for object props.

Similar to functions, when you send an object as a prop, whenever your component updates new object reference will be created(even though the value of the object is the same) and passed to the child which makes the child re-render. To avoid this we use React.useMemo.

Eg:

I've changed the previous example by adding another input field and an extra prop data(object).
This data prop depends on input2 state, so it changes whenever when we type on the second input field. But it shouldn't change when we type on the first input field.
To fix this we create the data object using React.useMemo and input2 as its dependency.
Now if you type on the first input field the Counter component doesn't re-render.

In the case of class component, you should have the data object in the state and use componentDidUpdate lifecycle method to check for state/props change, and based on that update the data object(Refer code below).

Great. Now our React App is performant. If you have a simple app, these optimizations don't make much difference. But if your app is already showing signs of sluggishness, these changes definitely will make a difference. Also, before you start optimizing your app, use React dev tools(profiler) to easily identify which components are causing issues.

Recap

The main cause of sluggishness is the unnecessary re-rendering of components.
Memoize your functional component with React.memo
Make your class component pure by extending React.PureComponent
Use React.useCallback when sending functions as props
Use class methods and bind them in the constructor when necessary(in case of class components)
Use React.useMemo when sending objects as props
Have your objects in state and update them by comparing, using componentDidUpdate(in case of class components)

That's it, folks, Thanks for reading this blog post. Hope it's been useful for you. Please do comment your questions and suggestions. As mentioned in the beginning, I'll cover the "Too much data being rendered on the UI" case in the next blog post. Stay tuned.

Don't use create-react-app: How you can set up your own reactjs boilerplate.

Nikhil Kumaran S — Sat, 01 Aug 2020 20:00:36 +0000

What is CRA?

Create React App is a toolchain built and maintained by developers at Facebook for bootstrapping React applications. You simply run one command and Create React App sets up the tools you need to start your React project.

Advantages of CRA

Get started with a single command

npx create-react-app my-app

Less to Learn. You can just focus on React alone and don't have to worry about webpack, babel, and other such build dependencies.
Only one build dependency react-scripts. This maintains all your build dependencies, so it's easy to maintain and upgrade with just one command.

npm install react-scripts@latest

Disadvantages of CRA

Difficult to add custom build configs. One way to add custom configs is to eject the app, but then it overrides the Only one build dependency advantage. The other way is you can use packages like customize-cra or react-app-rewired but then they have limited capabilities.
Abstracts everything. It's important to understand the things that need to run a React app. But due to it's Only one build dependency advantage, a beginner might think that react-scripts is the only dependency needed to run react apps and might not know that transpiler(babel), bundler(webpack) are the key dependencies which are used under the hood by react-scripts. This happened to me until I read this awesome article.
CRA is bloated - IMO. For example, CRA comes with SASS support, if you are using plain CSS or Less it's an extra dependency that you will never use. Here is a package.json of an ejected CRA app.

The alternative for CRA is to set up your own boilerplate. The only advantage that we can take from CRA is Get started with a single command and we can eliminate all of its disadvantages by setting up dependencies and configs by ourselves. We cannot take the other two advantages because it introduces two disadvantages(Abstracts everything and Difficult to add custom build configs).

This repo has all the code used in this blog post.

First, initialize your project with npm and git

npm init
git init

Let's quickly create a .gitignore file to ignore the following folders

node_modules
build

Now, let's look at what are the basic dependencies that are needed to run a React app.

react and react-dom

These are the only two runtime dependencies you need.

npm install react react-dom --save

Transpiler(Babel)

Transpiler converts ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers. We also use this to transpile JSX by adding presets.

npm install @babel/core @babel/preset-env @babel/preset-react --save-dev

A simple babel config for a React app looks like this. You can add this config in .babelrc file or as a property in package.json.

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

You can add various presets and plugins based on your need.

Bundler(Webpack)

Bundler bundles your code and all its dependencies together in one bundle file(or more if you use code splitting).

npm install webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin --save-dev

A simple webpack.config.js for React application looks like this.

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  resolve: {
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    alias: {
      react: path.join(__dirname, 'node_modules', 'react'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
    }),
  ],
};

You can add various loaders based on your need. Check out my blog post on webpack optimizations where I talk about various webpack configs that you can add to make your React app production-ready.

That is all the dependencies we need. Now let's add an HTML template file and a react component.

Let's create src folder and add index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Boilerplate</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Let's create a HelloWorld.js react component in the src folder

import React from 'react';

const HelloWorld = () => {
  return (
      <h3>Hello World</h3>
  );
};

export default HelloWorld;

Let's add index.js file to the src folder

import React from 'react';
import { render } from 'react-dom';

import HelloWorld from './HelloWorld';

render(<HelloWorld />, document.getElementById('root'));

Finally, let's add the start and build scripts in package.json

"scripts": {
    "start": "webpack-dev-server --mode=development --open --hot",
    "build": "webpack --mode=production"
  }

That is it. Now our react app is ready to run. Try the commands npm start and npm run build.

Now, let's implement the Get started with a single command advantage from CRA. Basically, we are going to use an executable JS file that runs when we type a specific command(your boilerplate name) in the command line. Eg. reactjs-boilerplate new-project For this, we are going to use bin property in package.json.

Let's first create the executable JS file. Install fs-extra

npm i fs-extra

Create bin/start.js file on your project root with the following content.

#!/usr/bin/env node
const fs = require("fs-extra");
const path = require("path");
const https = require("https");
const { exec } = require("child_process");

const packageJson = require("../package.json");

const scripts = `"start": "webpack-dev-server --mode=development --open --hot",
"build": "webpack --mode=production"`;

const babel = `"babel": ${JSON.stringify(packageJson.babel)}`;

const getDeps = (deps) =>
  Object.entries(deps)
    .map((dep) => `${dep[0]}@${dep[1]}`)
    .toString()
    .replace(/,/g, " ")
    .replace(/^/g, "")
    // exclude the dependency only used in this file, nor relevant to the boilerplate
    .replace(/fs-extra[^\s]+/g, "");

console.log("Initializing project..");

// create folder and initialize npm
exec(
  `mkdir ${process.argv[2]} && cd ${process.argv[2]} && npm init -f`,
  (initErr, initStdout, initStderr) => {
    if (initErr) {
      console.error(`Everything was fine, then it wasn't:
    ${initErr}`);
      return;
    }
    const packageJSON = `${process.argv[2]}/package.json`;
    // replace the default scripts
    fs.readFile(packageJSON, (err, file) => {
      if (err) throw err;
      const data = file
        .toString()
        .replace(
          '"test": "echo \\"Error: no test specified\\" && exit 1"',
          scripts
        )
        .replace('"keywords": []', babel);
      fs.writeFile(packageJSON, data, (err2) => err2 || true);
    });

    const filesToCopy = ["webpack.config.js"];

    for (let i = 0; i < filesToCopy.length; i += 1) {
      fs.createReadStream(path.join(__dirname, `../${filesToCopy[i]}`)).pipe(
        fs.createWriteStream(`${process.argv[2]}/${filesToCopy[i]}`)
      );
    }

    // npm will remove the .gitignore file when the package is installed, therefore it cannot be copied, locally and needs to be downloaded. Use your raw .gitignore once you pushed your code to GitHub.
    https.get(
      "https://raw.githubusercontent.com/Nikhil-Kumaran/reactjs-boilerplate/master/.gitignore",
      (res) => {
        res.setEncoding("utf8");
        let body = "";
        res.on("data", (data) => {
          body += data;
        });
        res.on("end", () => {
          fs.writeFile(
            `${process.argv[2]}/.gitignore`,
            body,
            { encoding: "utf-8" },
            (err) => {
              if (err) throw err;
            }
          );
        });
      }
    );

    console.log("npm init -- done\n");

    // installing dependencies
    console.log("Installing deps -- it might take a few minutes..");
    const devDeps = getDeps(packageJson.devDependencies);
    const deps = getDeps(packageJson.dependencies);
    exec(
      `cd ${process.argv[2]} && git init && node -v && npm -v && npm i -D ${devDeps} && npm i -S ${deps}`,
      (npmErr, npmStdout, npmStderr) => {
        if (npmErr) {
          console.error(`Some error while installing dependencies
      ${npmErr}`);
          return;
        }
        console.log(npmStdout);
        console.log("Dependencies installed");

        console.log("Copying additional files..");
        // copy additional source files
        fs.copy(path.join(__dirname, "../src"), `${process.argv[2]}/src`)
          .then(() =>
            console.log(
              `All done!\n\nYour project is now ready\n\nUse the below command to run the app.\n\ncd ${process.argv[2]}\nnpm start`
            )
          )
          .catch((err) => console.error(err));
      }
    );
  }
);

Now let's map the executable JS file with a command. Paste this in your package.json

"bin": {
    "your-boilerplate-name": "./bin/start.js"
  }

Now let's link the package(boilerplate) locally by running

npm link

Now, when this command is typed in the terminal(command prompt), your-boilerplate-name my-app, our start.js executable is invoked and it creates a new folder named my-app, copies package.json, webpack.config.js, gitignore, src/ and installs the dependencies inside my-app project.

Great, now this works in your local. You can bootstrap React projects(with your own build configs) with just a single command.

You can also go one step further and publish your boilerplate to npm registry. First, commit and push your code to GitHub and follow these instructions.

Hurray! We created our alternative to create-react-app within a few minutes, which is not bloated(you can add dependencies as per your requirement) and easier to add/modify build configs.

Of course, our set up is very minimal, and it's certainly not ready for production. You have to add a few more webpack configs to optimize your build.

I've created a reactjs-boilerplate with the production-ready build set up, with linters and pre-commit hooks. Give it a try. Suggestions and contributions are welcome.

Recap

We saw the advantages and disadvantages of CRA.
We decided to take Get started with a single command advantage from CRA and implement it in our project and eliminate all of its drawbacks.
We added minimal webpack and babel configs required to run a react application
We created a HelloWorld.js react component, ran it using dev server, and build it.
We created an executable JS file and mapped it with a command name via bin property in the package.json.
We used npm link to link our boilerplate and made our boilerplate to bootstrap new react projects with a single command.

That's it, folks, Thanks for reading this blog post. Hope it's been useful for you. Please do comment your questions and suggestions.

References

Webpack Optimizations - Production-ready React App

Nikhil Kumaran S — Sun, 26 Jul 2020 09:53:51 +0000

Webpack is a static module bundler for modern JavaScript applications(Eg. React). When webpack processes our application, it internally builds a dependency graph that maps every module our project needs and generates one or more bundles.

The code/configs used in this blog are available in this repo.

A simple webpack.config.js for React application looks like this.

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  resolve: {
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    alias: {
      react: path.join(__dirname, 'node_modules', 'react'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
        ],
      },
      { // If you are not using less ignore this rule
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './index.html',
    }),
  ],
};

Out of the box, with this above config, the webpack generates one JS bundle file. For large projects/applications, this bundle size becomes very large(in MiBs). So it is essential to split the single bundle into multiple chunks and load them only when needed.

Here's where lazy loading in React comes in. It's basically importing the component only when needed. Lazy loading components on the route level is a good start.

When we lazy load components, webpack creates multiple bundle files based on our routes, without needing any extra configuration.

We can use hash file names for our bundles, which changes only when we build our app after doing modifications in that particular chunk. So when there is no change, the same hash will be retained and the browser serves those bundle files from the cache. Refer this for other hash options

output: {
  path: path.resolve(__dirname, 'build'),
  filename: '[name].[chunkhash].bundle.js',
}

It's great that we split our bundles based on routes without any additional configuration in webpack, but still, our main bundle contains all the vendor codes(node_modules). We can add a few configs to tell webpack how we want to further spit the bundles.

optimization: {
  splitChunks: {
    cacheGroups: {
      vendors: {
        test: /node_modules\/(?!antd\/).*/,
        name: "vendors",
        chunks: "all",
      },
      // This can be your own design library.
      antd: {
        test: /node_modules\/(antd\/).*/,
        name: "antd",
        chunks: "all",
      },
    },
  },
  runtimeChunk: {
    name: "manifest",
  },
}

Let's go through the config. optimization.splitChunks.cacheGroups is where we define our chunks. Here I used the chunk name vendors for all the dependencies in node_modules except antd(Ant Design is a UI component library) and I used the chunk name antd for the Ant design dependency alone.

The reason why we are making the vendors separate is that, once our project gets matured, we won't be frequently adding any new dependencies, so our chunk filename hash won't be changing for every build and the browser can serve this vendor chunk from the cache.
I separated antd from the vendor chunk because this can be our own design library where we frequently add/update components, so any change in this chunk should not affect our vendor chunk hash.
I also extracted out the manifest which webpack maintains, containing information needed to run our application.

If you noticed the build output, our vendor chunk is highlighted in yellow and marked as [big]. Webpack is configured to warn us if the bundle size is more than 244KiB. We can safely ignore this warning because anyway our bundles should be gzipped and transferred over the network. This gzip encoding is done by default in some of the static file servers like netlify, serve and it is easy to configure in others AWS CloudFront
Anyways, if we want to gzip and tell webpack to use gzipped files for calculation, we can add the below config.

const CompressionPlugin = require('compression-webpack-plugin');

plugins: [
  new CompressionPlugin({
    test: /\.js(\?.*)?$/i,
  }),
],
performance: {
  hints: "warning",
  // Calculates sizes of gziped bundles.
  assetFilter: function (assetFilename) {
    return assetFilename.endsWith(".js.gz");
  },
}

To sum up,

We set up a minimum webpack config to run our react app.
We used lazy loading to split our single bundle into multiple chunks.
We used hash filenames to version our bundle files.
We spit our main bundle further creating vendor and antd chunks.
We used gzip to compress our bundles(also need to be done in our static hosting server) to avoid webpack bundle size warnings.

You can see the full webpack configuration here

That's it, folks, Thanks for reading this blog. Hope it's been useful for you. Please do comment on your questions and suggestions.

DEV Community: Nikhil Kumaran S

You probably don't need Redux: Use React Context + useReducer hook

Building your own React Hooks.

Hooks

Custom Hooks

References

Web Workers: For non-blocking User Interface

What is a Web Worker?

Examples

References

React Performance Improvements: Make your React app Performant.

Introduction

Causes for sluggishness in UI

Preventing unnecessary re-renders

Use Memoized/Pure components

Use React.useCallback for function props

Use React.useMemo for object props.

Recap

Don't use create-react-app: How you can set up your own reactjs boilerplate.

What is CRA?

Advantages of CRA

Disadvantages of CRA

react and react-dom

Transpiler(Babel)

Bundler(Webpack)

Recap

References

Webpack Optimizations - Production-ready React App

References: