DEV Community: Vedansh Mehra

Virtual Scrolling in React: Implementation from scratch and using react-window

Vedansh Mehra — Sun, 05 Nov 2023 19:53:49 +0000

How many times you've been in a situation where you have to render a list of items in your web application? It is a very common thing when building modern web apps these days. Well, the problem comes when you have to render very huge datasets let's say 100,000 or more data all at once, and that too without any pagination. This will pollute the DOM and occupy so much of the browser's memory leading to a lot of performance issues and degraded user experience.

Virtual scrolling is one of the techniques that can save your back in this situation by only rendering the items that the user actually wants to see while the rest of the items will be loaded virtually as the user scrolls towards them instead of rendering everything at once.

In this article, we'll see what virtual scrolling is and how can we implement virtual scroll in a React application to render a list of 100,000 items with no pagination.

What is Virtual Scrolling? 🧐

As we have already discussed, rendering a huge list of data on the DOM with no pagination can make the application slower by polluting the DOM, consuming too much of the browser's memory, and on top of that the end user is not going to consume all the data at once, they'll only see a subset of that data and then scroll through the list to see more data.

Virtual scroll or Windowing is a technique in web app development that will only render items that are visible in the viewport while the rest of the items will be virtualized by top and bottom padding. As we scroll through the list, the older items will be destroyed and new items will be displayed based on the position of the scrollbar. This way we won't put too much load on the DOM by rendering everything at once. Using this technique in the correct scenario can greatly improve the performance of the application.

Do we need Virtualization? 💭

Now that we know what virtual scrolling is, the question comes - "Do we always need virtual scroll?"

The answer to this question should be quite obvious, If you are building a web app where you have to render a huge list of items without any pagination and you truly care about the performance then definitely virtual scrolling is what you can use.

While it is a good way to improve performance there are a few scenarios in which you might not need to implement virtual scrolling:

If you are rendering a list of less than 50 or 100 data- If you are rendering a list with a very items say 50 or 100 items, virtual scrolling might just be an overhead and would not make any huge difference on the performance of the app.
When rendering a paginated list- When rendering a list with some sort of pagination, then obviously virtual scrolling might not be of any use because the whole point of virtual scrolling is to render list items efficiently when there is no pagination implemented.

Virtualization in React app from scratch

Now when we have some idea about virtual scrolling and when to use it, we'll see how can we implement virtual scrolling in a react application without using any third-party tools.

To get started with this approach, we'll make a few assumptions:

the height of each row in the list will be fixed.
total number of items to be rendered in the list is known upfront.

If we meet the above condition, let's create a new React app and build a VirtualScroll component.

import { useState } from "react";

const VirtualScroll = ({
  rowHeight,
  totalItems,
  items,
  visibleItemsLength,
  containerHeight,
}) => {
  // Calculate the total height of the container
  const totalHeight = rowHeight * totalItems;
  //   Current scroll position of the container
  const [scrollTop, setScrollTop] = useState(0);
  // Get the first element to be displayed
  const startNodeElem = Math.ceil(scrollTop / rowHeight);
  // Get the items to be displayed
  const visibleItems = items?.slice(
    startNodeElem,
    startNodeElem + visibleItemsLength
  );
  //  Add padding to the empty space
  const offsetY = startNodeElem * rowHeight;

  const handleScroll = (e) => {
    // set scrollTop to the current scroll position of the container.
    setScrollTop(e?.currentTarget?.scrollTop);
  };

  return (
    <div
      style={{
        height: containerHeight,
        overflow: "auto",
        border: "5px solid black",
      }}
      onScroll={handleScroll}
    >
      <div style={{ height: totalHeight }}>
        <div style={{ transform: `translateY(${offsetY}px)` }}>
          {visibleItems}
        </div>
      </div>
    </div>
  );
};

export default VirtualScroll;

In the code above, we are doing very basic maths, we first calculate the total height of the container totalHeight by multiplying a single row's height rowHeight with total items to be rendered totalItems.

Then we divide the container's scroll position from the top scrollTop with a single row's height rowHeight to get the starting node element startNodeElem which will be rendered on the list, we are also using Math.ceil to round up the value.

Then we slice totalItems to only show items starting from the startNodeElem till startNodeElem + visibleItemsLength. So, let's say our startNodeElem = 5, then we'll show items from the 5th position till 5 + visibleItemsLength considering visibleItemsLength to be 20 in this case. So our component will render items starting from the 5th position till 5 + 20 = 25 position.

Now every time the user scrolls the container, the value of scrollTop will be re-calculated and startNodeElem will be updated based on the scroll position and we'll shift the nodes down using transform: translateY property.

We can now use our VirtualScroll component to render a list of items.

import React from "react";
import VirtualScroll from "./virtual-scroll";
// Total items to be rendered
const totalItems = 100000;

const items = new Array(totalItems).fill(null).map((_, index) => {
  return (
    // Height of the div should be the same as what we are sending in rowHeight
    <div style={{ height: "70px" }} key={index}>
      <p>Row Number - {index}</p>
    </div>
  );
});

function App() {
  return (
    <>
      <h1>Virtual Scroll From Scratch</h1>
      <VirtualScroll
        rowHeight={70}
        totalItems={totalItems}
        containerHeight="500px"
        items={items}
        visibleItemsLength={20}
      />
    </>
  );
}
export default App;

Here, we are rendering a list of 100000 items and we have set containerHeight to 500px and the height of each row or the rowHeight to 70px.

Now start your application to see virtual scrolling in action.

As you can see, when we are scrolling through the list we are not piling up extra nodes but instead, the previous nodes are destroyed and we are rendering new nodes based on the container's scroll position.

Here's the sandbox output with the above implementation:

You might be noticing some white space while scrolling and that is because every time the container is scrolled the entire DOM is manipulated and we are re-calculating everything.

So this was a very naive implementation of virtual scrolling from scratch in a react application that can of course be more optimized for better results.

Virtual Scrolling in React using react-window

As we have seen in the previous section we can implement virtual scrolling from scratch. In this section, we'll discuss a third-party tool called react-window that allows us to implement virtual scrolling in a much easier way.

react-window is a very lightweight React package that lets you render a virtualized list while removing all the extra work that you might have to put in when implementing a solution from scratch.

To get started with react-window, we first need to install it into our react application.

# Yarn
yarn add react-window

# NPM
npm install --save react-window

With react-window, we can basically render lists with fixed row height and also the lists with dynamic row height, we'll go off by each of them one at a time.

react-window with fixed size list

If you have to render list items with fixed row height you can use the FixedSizeList component from react-window:

import { FixedSizeList } from "react-window";

const Row = ({ index, style }) => (
  /* Adding style attribute is very important here
    it supplies the row height to the elements. */
  <div style={style}>Row {index}</div>
);

// Create a component with Fixed Size example
const ReactWindowFixedSizeEx = () => (
  <FixedSizeList height={150} itemCount={100000} itemSize={35} width={300}>
    {Row}
  </FixedSizeList>
);

export { ReactWindowFixedSizeEx };

In the above example, we have set the container's height to 150px and each of the row's height will be 35px.

react-window with variable size list

If you have to render list items with dynamic row height, you can use the VariableSizeList component from react-window:

import { VariableSizeList } from "react-window";
import "./App.css";
const totalItemsCount = 100000;

// Set random row heights
const rowHeights = new Array(totalItemsCount)
  .fill(true)
  .map(() => 12 + Math.round(Math.random() * 50));

const getItemSize = (index) => rowHeights[index];

const Row = ({ index, style }) => (
  <div style={style} className={index % 2 ? "odd" : "even"}>
    Row {index}
  </div>
);

// Create a component with Fixed Size example
const ReactWindowVariableSizeEx = () => (
  <VariableSizeList
    height={500}
    itemCount={totalItemsCount}
    itemSize={getItemSize} 
    width={300}
  >
    {Row}
  </VariableSizeList>
);

export default ReactWindowVariableSizeEx;

In the above example, the container's height will be 500px while the row's height will be arbitrary and we are making use of the itemSize prop to provide the height of a particular row.

In the above code, we are setting arbitrary row height for each of the rows but in real application there should be some actual logic to calculate the heights of the rows.

Awesome! So we now have seen different ways to implement virtual scrolling in a react application, here is the GitHub repo link with each of these implementations if you want to check - https://github.com/imvedanshmehra/virtual-scroll-react.

Final Words 🗣️

Virtualization is a very good technique to improve the performance of the application when rendering a large set of data without pagination, you can either implement it from scratch or use packages like react-window.

You can take a step further and make it more optimized by lazy loading the data to be rendered by using infinite scroll which is yet another very good technique to render a large set of data.

With this, I hope you enjoyed reading this article as much as I enjoyed writing it and I am hoping that you could get to learn something from it.

If you like the blog, please show your love by clicking on the ❤️ icon below and leave your thoughts in the comments.

If you'd like to read more such articles you can give me a follow. Also connect with me on Twitter or LinkedIn where I regularly share content related to web development, Javascript, & software engineering best practices.

Deploy Node-Express-MySQL app on Railway for free (no credit card required)

Vedansh Mehra — Mon, 03 Jul 2023 19:33:26 +0000

Heroku was one of the go-to hosting providers for most of our backend projects, but since they have phased out their free tier in 2022 most of the people are looking for alternate ways to deploy their backend project. While there are a lot of free hosting providers available out there, I recently came across Railway when I had to deploy one of my Node-Express-MySQL-based app. One thing, I liked about Railway (and I am sure most of you will like it too) is that you don't even need to save your credit/debit card details when you are starting with their free tier. Of course, you will have to use some payment methods when your app grows and your trial period ends but for most of us, we don't want to save our cards for our hobby projects that we are not very serious about.

With that said, in this article, we will be talking about how can we deploy a Node-Express-MySQL based application on Railway for free without a credit card.

Most of the deployment steps should remain the same irrespective of which tech stack you choose.

Project Overview

Before we get down to the setup, let's understand what exactly we are going to build. We will create a very basic Node-based API for our shopping list, where the API will return an id for the item, item name, and item quantity.

This article is not about creating APIs using NodeJS and therefore I will not go very deep into it but I'll still try to explain most of the steps for you to follow along.

Prerequisites

To get along you must have git installed and a GitHub account setup as Railway uses your Github account for continuous deployment.

If you want to follow along with the development, I am assuming that you already have node-js installed.

Create a basic Node server

The first step towards our project is to create a very minimalist node server that we can run on our local machine.

Let's start by creating a new directory:

mkdir node-mysql-app

Move inside of the project now to initialize a basic package.json file and install a few dependencies and dev-dependencies required to create our application.

npm init -y


npm install express mysql2 cors


npm install -D nodemon

For any Node application to run, we generally need an entry point file which is the root file that gets served to the server, in our case the entry point file will be named as app.js (a very common entry point file name for most of the node apps).

Open the package.json file and create a start script, this script will be used to start our development server and serve our entry point file.

// node-mysql-app/package.json

{
  "name": "mysql-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // Create a start script
    "start": "nodemon app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "mysql2": "^3.4.3"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}

Now, we have everything set up to create our basic node server, let's create a new file called app.js with the following code:

// node-mysql-app/app.js

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  res.send("Hello world");
});

// Server will listen to port 8080
app.listen(8080, 
    () => console.log(`Server is listening on port ${8080}`)
);

Run npm start to start the dev server.

We now have a very basic node server that returns "Hello world" when you navigate to localhost:8080 .

Hosting MySQL DB on Railway

If everything went well and you can see the desired response on your localhost then navigate to https://railway.app/ to create a new Railway account (log in if you already have one).

Once you have logged in to your Railway account, you should see a dashboard like this:

Click on the "New Project" option to create a new project and choose "MySQL" from the given options.

In a couple of seconds, a new instance of a MySQL database should be hosted on your dashboard.

Open your newly created instance of MySQL database and you should see a panel like the following:

Here, as you can see we have two options to create a new table inside our database. You can either use their GUI to create a new table by clicking on the "Create table" button or you can run your own SQL query to create a table. I'll go with running the custom query but feel free to use GUI if you want to.

So, to create a new table I'll run the following SQL query under the "Query" tab:

CREATE TABLE shopping_list (
    id INT UNSIGNED NOT NULL AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,
    quantity VARCHAR(255),
    PRIMARY KEY (id)
);

This will create a new table named shopping_list which will have an id, name, and quantity columns in it.

Let's now add some mock data to our newly created table so that we can test that everything is working fine when we will complete our project. To add some data to the table we will run the following query:

INSERT INTO shopping_list (name, quantity)
VALUES
    ('Bananas', '3'),
    ('Milk', '1 liter'),
    ('Eggs', '1 dozen');

Once we have added some dummy data to our table, we are now ready to connect our Node app with our MySQL database which is hosted on Railway.

Connecting Node app to MySQL database

To connect our Node app with the MySQL database, go back to your code editor and create a new file - db.js and add the following code:

// node-mysql-app/db.js

const mysql = require("mysql2");

connection = mysql.createConnection({
  host: // <MYSQL host>,
  port: // <MYSQL port>,
  user: // <MYSQL username>,
  password: // <MYSQL password>,
  database: // <MYSQL database name>,
});
connection.connect((err) => {
  if (err) {
    console.error("CONNECT FAILED", err.code);
  } else console.log("CONNECTED");
});

module.exports = { connection };

Replace the comments with your actual MySQL config variables.

From the above code, you need to replace the commented values with your MySQL config variables that you can find under the "Connection" tab on the Railway app inside your MySQL DB instance. For me, the config looks like this:

While this is enough to connect to the MySQL database there is one problem with the current setup though.

Exposing secret values like DB username and password is not a good practice. To avoid this we generally create an .env file and store the variables there and then read the values from the .env file instead of hard-coding them.

So, let's create a .env file at the root of our app with the following environment variables in it and replace the commented code with your actual DB config values:

MYSQL_HOST=// <MYSQL host>
MYSQL_PORT=// <MYSQL port>
MYSQL_USER=// <MYSQL user>
MYSQL_PASSWORD=// <MYSQL password>
MYSQL_DB=// <MYSQL DB name>

Now to read the environment variables from our Javascript we need to install a package dotenv.

npm install dotenv

Finally, go back to the db.js file and do the following changes:

const mysql = require("mysql2");
// Config dotnev
require("dotenv").config();

// Replace the hard-coded values with the env variables
connection = mysql.createConnection({
  host: process.env.MYSQL_HOST,
  port: process.env.MYSQL_PORT,
  user: process.env.MYSQL_USER,
  password: process.env.MYSQL_PASSWORD,
  database: process.env.MYSQL_DB,
});
connection.connect((err) => {
  if (err) {
    console.error("CONNECT FAILED", err.code);
  } else console.log("CONNECTED");
});

module.exports = { connection };

Now we should be able to successfully connect to our MySQL database. Let's go to the app.js file and create a GET request which will take all the items from the shopping_list table and return a JSON with those values.

// node-mysql-app/app.js

const express = require("express");
const { connection } = require("./db");

const app = express();

app.get("/api/shopping-list", (req, res) => {
  connection.query("SELECT * FROM shopping_list", (err, data) => {
    if (err) return callback(err, null);
    res.status(200).json({
      status: "success",
      length: data.length,
      data,
    });
  });
});

app.listen(8080, () => console.log(`Server is listening on port ${8080}`));

Now, start the server again using npm start and navigate to localhost:8080/api/shopping-list and you should see a JSON returned with the items from the shopping_list table.

Hooray! 🎉

Now as our app is working perfectly fine locally, it's time to deploy our Node server on Railway.

Deploying Node server on Railway

To deploy the application on Railway, we first need to push the code to GitHub. I am assuming that you already know how to push the code to GitHub so I am not going to cover that in this article but make sure that you add .env file and node_modules to .gitignore so that you don't accidentally push these two files on GitHub.

You can read more about the .gitignore file here.

Once you have pushed the code on GitHub, let's go back to the Railway dashboard and create a new project and this time choose "Deploy from Github repo" from the given options.

You will have to connect your GitHub account to the Railway app for continuous deployment of the project.

Choose the project that you want to deploy from all the projects in your GitHub account and then click on Deploy Now.

That's it! Your app is all set for the deployment and now all you need to do is add the environment variables that are needed to run the application.

Go to the "Variables" tab to add the environment variables where you will get two options. You can either add the variables 1 at a time or you can add multiple variables at once using the Raw editor.

Make sure to replace the commented values with your actual MySQL config variable values.

We are done with all the steps needed to deploy the application on Railway. Finally, we will have to either generate a random domain name which is provided by Railway, or select a custom domain if you already have one.

Go to the Settings tab and under Domains you should see the two options, I don't want to use a custom domain so I'll go with Generate Domain to generate a random domain name.

We are all done. 😮💨

Now navigate to your <domain-name/api/shopping-list> and you should see your application live running on the Railway server.

Final Notes

Though Railway was a very good fit for my requirement and it might fit with your requirements as well yet I am quite new to it and I might not be very well aware of its trade-offs or how compatible it is for large-scale applications. I will keep this blog updated in case I find anything about it.

Also if you liked this article please show some love to it and follow me on Twitter where I share more content about software engineering and web development.

Thank you for reading along, see you in the next article. 👋

Monorepo setup with Npm Workspaces & Lerna

Vedansh Mehra — Sun, 30 Apr 2023 09:59:25 +0000

Monorepos lets you manage multiple repositories into one single repository but managing and publishing them can be very tedious as the repositories grow.

Lerna is a powerful tool that can be used to manage and publish monorepos in Javascript/Typescript projects.

Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository.

In this article, we will see how we can set up a monorepo with Lerna and Npm workspaces.

If you are interested in setting up a monorepo with Vite, Pnpm, and Typescript you can check out my previous blog here.

Why use Lerna?

To use monorepos well, you need a good monorepo tool, and Lerna is exactly that. Lerna is fast, widely used, and battle tested.

Monorepos can have tens if not hundreds of packages, and managing all of them together can become very difficult. Lerna can rescue us in this situation by doing the heavy lifting of managing the tasks in different packages, versioning, code deployment, etc.

Lerna has some great in-built features which make managing monorepos surprisingly easier.

Running tasks within multiple packages : Lerna gives us an out-of-the-box solution to run tasks inside multiple packages together using lerna run command. For example, Let's say you have 3 packages inside your monorepo and you want to run the test script for all of them, with Lerna all you have to do is just run npx lerna run test command from the root of your project and it will run the test script inside each of your packages (You must have defined the test script in package.json for all the projects respectively in order to make this work properly).
Visualize the workspace : When the workspace becomes very huge it is common for a new developer to face difficulty in understanding the hierarchy of the workspace and understand how different packages are linked together. Lerna uses Nx to help visualize the workspace graph. Simply run npx nx graph and it will launch a project visualization graph on your browser.

You can check the complete list of Lerna features here.

Who uses Lerna?

Lerna is being used by many different teams including but not limited to:

Jest
Create React App
Nx
NestJS

Project Setup

Prerequisites

To follow along, you must have Node installed in your system which I am assuming that you would already have. Other than that, some basic knowledge of Javascript/Typescript and React will help in understanding the code that we are going to write.

Project Overview

For the sake of this article, our monorepo will have two packages:

common : A shared library that can be used by multiple packages.
client : A basic React app that will consume the common package and will render the components on UI.

Getting Started

Let's start off by creating a new directory at your desired location.

mkdir npm-lerna-monorepo

Then, move inside your newly created directory and initialize a Lerna workspace.

# npm-lerna-monorepo
npx lerna init

This command will do the following things:

Create a package.json file if it is not already present and add lerna as a dev dependency.
Create and configure a new lerna.json file.
Configure npm workspaces inside package.json.
Create a packages directory that will contain all our monorepo packages.

 lerna.json
 .gitignore
 package.json
 packages

Now, in order to use Typescript in our project, we need to install a few dependencies at the root level.

npm i typescript @types/node -D

Once the above dependencies are installed, create a common tsconfig.json file that will be extended by all the other packages of our app.

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "lib": ["es6"]
  },
  "exclude": ["node_modules"]
}

Now we can start creating our packages, to do that let's go inside the packages directory and create the common package first.

npm create vite@latest common --template react-ts

We should now have a common package inside our packages directory, now let's move inside the common directory and run npm install to install all the required dependencies.

# npm-lerna-monorepo/packages/common
npm install

In order to use the base Typescript configuration that we've defined at the root level, we need to add the following snippet at the beginning of our tsconfig.json inside the common package.

// npm-lerna-monorepo/packages/common/tsconfig.json
{
  "extends": "../../tsconfig.json",
  ...
}

We will now go ahead and create a Button component and will export it so that it can be used by the other packages in our monorepo.

// npm-lerna-monorepo/packages/common/src/components/Button.tsx

interface ButtonProps {
    buttonText: string;
}

const Button = ({ buttonText }: ButtonProps) => {
    return (
        <button>{buttonText}</button>
    )
}

export default Button;

Now export this Button component from main.tsx file which will be our entry point.

// npm-lerna-monorepo/packages/common/src/main.tsx
import Button from "./components/Button"

export { Button }

We will set main.tsx as our entry point by setting the main property in package.json

Also, as per the common workspace naming convention of monorepos we'll change the name of the common package to @npm-lerna-monorepo/common

// npm-lerna-monorepo/packages/common/package.json
{
  "name": "@npm-lerna-monorepo/common", // Change the package name
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "./src/main.tsx", // Define the entrypoint file
  ...
}

We should now be able to import components from the common package very easily after linking it with the client package.

Let's now create our client package, for that we'll move inside the packages directory and run the following command:

# npm-lerna-monorepo/packages
npm create vite@latest client --template react-ts

Our project structure after running the above command should look somewhat like this:

Let's update the tsconfig.json of the client package now to extend the base Typescript configuration that we've defined at the root level.

To do that add the following line of code at the beginning of client/tsconfig.json :

// npm-lerna-monorepo/packages/client/tsconfig.json
{
  "extends": "../../tsconfig.json",
  ...
}

Now add the common package as one of the dependencies for the client package, we can add the common package using the name that we've defined in its package.json file.

// npm-lerna-monorepo/packages/client/package.json
{
  "name": "@npm-lerna-monorepo/client", // Updated the name
  ...
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@npm-lerna-monorepo/common": "*" // Added common package
    ...
  },

We've also changed the name of the client package according to the monorepos workspace naming convention.

Let's link both of our packages together by running npm install from the root level.

# npm-lerna-monorepo
npm install

This will link both packages together and now we can easily import the Button component from the common package and use it in our client package.

// npm-lerna-monorepo/packages/client/src/App.tsx
import { Button } from "@npm-lerna-monorepo/common"

const App = () => {
  return <Button buttonText="Hello world" />
}

export default App;

Run the dev server for client package now.

# npm-lerna-monorepo/packages/client
npm run dev

Open localhost:5173 on your favorite web browser and you should see a button rendered on the UI.

So we have successfully setup up our monorepo using Npm workspaces and Lerna and while you are in our local environment, any changes you will make to the common package will immediately reflect on the client.

Hooray 🎉

You can find the complete code of the setup here.

Conclusion

In this article, we have seen how we can set up and manage a monorepo with Lerna and Npm workspaces.

Though Lerna is a great tool, you don't need to include it in all of your monorepos it's mainly suitable for large applications where you have multiple packages that you need to manage simultaneously.

While this article was majorly focused on the setup part, if you are interested in reading more about how we can use Lerna to build and publish our monorepos please let me know in the comments.

I hope this blog could a little value to you. If you liked it please share it with those who might find it helpful and show some to the article.

You can also follow me on Twitter where I post more content on Javascript, React, Software Engineering, and other stuff.

Package React Applications using Docker

Vedansh Mehra — Sat, 25 Mar 2023 10:09:16 +0000

As React developers, we all have gone through the pain of deploying our apps on different environments or setting them up on different machines which indeed is no fun at all. Docker helps us containerize our React applications with all the packages and dependencies which are needed to run the app on different servers with ease. In this article, we will talk about the step-by-step process to containerize React applications using Docker for easier and quick deployments.

What is Docker?

This blog post is not a complete Docker guide so I will not dive very deep into this topic. But just to get some gist, Docker is a containerization tool that packages your application along with all of its dependencies into containers which help in faster shipping, testing, and deployment.

When you create a docker image it shares a part of your machine's kernel and gives you an independent and isolated environment to run your application.

Advantages of using Docker with your React app

Using Docker with React applications can be useful in many ways, a few of them are:

Consistent environment: Docker helps in creating a consistent environment to run your application irrespective of the operating system that you are using on your host machine. This can help in avoiding many underlying issues which might occur due to the inconsistency between the environments where you are running your application.
Bundling of dependencies together: Docker helps in bundling all the dependencies which are required to run the application together to avoid the chance of conflicts or versioning related issues.
Faster deployments: Docker can significantly simplify the deployment process but building the app into a container that can easily be deployed to different environments. Additionally, Docker has a very powerful caching mechanism which makes the deployment process even faster.

Setting up Docker for React application

Now that you are convinced that Docker can be a useful tool when working with React applications, let's see how we can set it up together with a React application.

To get started, we need a React application. We can use an existing application or create a new one.

Setting up Dockerfile

Once we have a React application set up, the next step is to create an Dockerfile at the root of the project.

🗒 Note : The file name should be Dockerfile (with no extensions).

Dockerfile is a text document that has all the instructions required to build an image.

Every Dockerfile should start with FROM instruction, which specifies a base image that can be used to build the subsequent image.

FROM node:alpine

In our case, we are using node:alpine as our base image which is a significantly lighter version of node and makes the download and deployment a lot faster.

Let's now copy all the files from our React application to our Docker image using the COPY instruction.

COPY instruction copies all the files and directories from the source path to the destination path inside our image.

FROM node:alpine

COPY . .

Using the above instruction we copied all the files from the root of our app to our image.

Now that we have all the files and directories copied, we can now run npm install inside our image to install all the required dependencies for our application. To do so, we can use RUN instruction which is used to run commands inside the container.

FROM node:alpine

COPY . .

RUN npm install

This will now install all the required dependencies inside our container and we should now have everything we need to start our React application.

We can start our application using the CMD instruction which is used to assign default executables to the container which will be executed when we run the image.

FROM node:alpine

COPY . .

RUN npm install

CMD ["npm", "start"]

We are using ["npm", "start"] as our default command which is used to spin up our React server.

It's time now to build our image, we can run docker build . command from our terminal to build the image.

docker build .

Once the image is built successfully it returns an image ID that can be used to run the image.

Tagging an image in Docker

Using the image ID to run the image might not be the most convenient thing to do, to avoid that docker has a way to tag our images to a specific name and then run the images using that name instead of using the image ID.

docker build -t react-docker .

We can use -t flag with the docker build command to tag an image to a specific name, in our case I am using " react-docker" for our image name, but we can use any other name that we want.

Running images in Docker

Once the image is successfully tagged to a specific name, we can run the image using docker run command.

docker run react-docker

This command will execute the default command that we have given to CMD instruction in our Dockerfile. In our case, that command was npm start which will start the React server.

Once the image starts running, we should see similar to the following message in our terminal:

This tells us that our app is running successfully on localhost:3000.

Port mapping in Docker

After running the docker run command shown above, if you will try to visit localhost:3000 you will notice a very weird thing. You will see that nothing is showing up on localhost even though the above message says that our app is up and running🤔.

This is because when we executed the default command it started the server inside our container and we are trying to access that server on our host machine but there is no actual connection between these two different environments.

To solve this issue Docker has a technique called " port mapping", also known as " port forwarding" which is used to export the Docker containers port on our host machine and allow accessing services running inside our containers from our host machine itself.

The easiest way to map ports in Docker is by using -p flag along with the docker run command.

docker run -p 3000:3000 react-docker

This will expose all the services running on port 3000 on our container to our host machine.

If we will try to visit localhost:3000 on our browser now, we should have our app running successfully.

Fixing a few gotchas with the current setup

So far, so good! Our app is running properly and everything else seems to be working fine but let me tell you, there are a few gotchas in the current configuration that needs our attention.

The first thing is we are copying every file and directory from our React application to the root of our container, which is generally not a good practice.

It is recommended to organize all our files inside a working directory in the container for better maintainability and to avoid conflicts with the default files. To do that, we can use WORKDIR instruction to create a working directory inside our container and all the subsequent instructions will run inside the working directory only.

FROM node:alpine

WORKDIR /app

COPY . .

RUN npm install

CMD ["npm", "start"]

This will now create a working directory called app inside the container and all the instructions after that will run inside the same working directory.

The other big gotcha with the current setup is whenever we make any changes to any of the files and rebuild our image, all the instructions are re-running including the npm install command.

This is fine as far as we have a small application with only a few dependencies but as the project grows and we add multiple dependencies running npm install after every change can be very time-consuming and is not something that we want.

Docker has a very useful cache mechanism, which caches each layer of the image when we run the image and during the next build it checks the cache to see if it has the cached version and re-uses it instead of rebuilding the image.

To take advantage of this cached mechanism it's important to structure our Docker configuration in such a way that the frequently changing instructions are placed at the end of the file.

In our case, we want to run npm install only when we have made any changes to the package.json.

FROM node:alpine

WORKDIR /app

COPY ./package.json /app/package.json
RUN npm install

COPY . .
RUN npm install

CMD ["npm", "start"]

This will now only run npm install only when there is some change to the package.json file otherwise it will use the cached version and only re-run the instructions which have changed.

Conclusion

In this article, we have learned how to containerize React applications using Docker and some of the recommended configurations to speed up the build process.

Overall, we can use Docker with our React application to ensure consistent build across different environments which will result in faster deployment and testing of our application.

That's it for this article, I hope you liked it. Please feel free to add your thoughts in the comments.

If you liked this article, there is a huge possibility that you will like my tweets too. Please check out my Twitter account for more content about web development, Javascript, React, and a lot more.

Setting up a monorepo with Vite, Typescript, and pnpm workspaces

Vedansh Mehra — Tue, 28 Feb 2023 12:48:30 +0000

Monorepos are hot these days and it can significantly improve the development workflow and productivity among teams. In this article, we will talk about how to set up a monorepo with Vite, Typescript, and pnpm workspaces.

What is a monorepo?

Before we jump into the setup, we first need to understand what is a monorepo and why should we care about it.

Monorepo is a repository that contains many distinct projects which are somewhat dependent on each other but they are logically independent and different teams can work on them in isolation.

Let's consider an example where we are building an application and we have two projects inside of it:

Shared: This will have all our shared components that can be used by different projects.
Main: This is going to be our main project which will be the consumer of our Shared package.

One way to work with this type of project is a multi-repo approach where we create two separate repositories and host them at the npm registry. Then the consumer app can install it from the npm registry and use it how we import and use React, Tailwind, Material-UI and other packages.

The problem with this type of workflow is every time we will make any new changes to the shared package, we will have to publish the app again to the npm registry for the consumer app to get the latest changes and use them.

Monorepos can significantly improve this workflow by packaging both of these projects into a single repository and importing components directly from the workspace instead of importing them from the cloud.

Setup with pnpm workspaces

Now that we have an idea about what monorepos are and what problems they solve, let's dive right into the setup and see how we can set up a basic monorepo with pnpm workspaces.

To follow along you must have pnpm and node installed in your machine.

Scaffold a new project

The first thing that we need to do for our setup is, create a new project which we will call "pnpm-monorepo" you can of course name it whatever you want to.

mkdir pnpm-monorepo

Then let's go inside the root of our project and initialize a package.json file.

# pnpm monorepo
pnpm init

At this point, you should have a basic package.json at the root of your project with somewhat similar code as follows:

// pnpm-monorepo/package.json
{
  "name": "pnpm-monorepo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now, let's install some of our root-level dependencies that we are going to use across the project.

# pnpm-monorepo
pnpm add -D typescript typescript-node

Once the common dependencies are installed let's create our base Typescript configuration with the following code:

// pnpm-monorepo/tsconfig.base.json
{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "jsx": "react-jsx",
    "moduleResolution": "node"
  }
}

This is the default Typescript configuration that I have written for my project you can customize it based on your project's requirements.

Next, we will create our tsconfig.json file which will extend our tsconfig.base.json

// pnpm-monorepo/tsconfig.json
{
  "extends": "./tsconfig.base.json"
}

That's all we need for our Typescript configuration.

Now let's create a pnpm-workspace.yaml file at the root of our project that will tell pnpm what packages we will have inside our monorepo.

pnpm-workspace makes it surprisingly easier to add and manage multiple packages in a project.

# pnpm-monrepo/pnpm-workspace.yaml
packages:
  - "./packages/**"

We can add as many packages as we want to pnpm-workspace.yaml by adding the relative path of the packages in this file, for our project we are adding our packages directory and all of its child directories to the workspace.

Now we will create both of our main and shared packages that we discussed above inside the packages directory. Our main project will be a Vite application and the shared project will have some shared code that we will use inside our main app.

Create a Vite application

Let's first create the packages directory at the root level.

# pnpm-monorepo
mkdir packages

Now we will create our main app inside of the packages directory which will be a Vite application. To do that navigate inside pnpm-monorepo/packages and run:

# pnpm-monorepo/packages
pnpm create vite

I am using React & Typescript but the following steps should work irrespective of which framework/library you select.

Now let's create our second package in the packages directory, we will call it shared.

# pnpm-monorepo/packages
mkdir shared

At this point, your project's structure should look somewhat similar to this:

We have our packages directory and inside it, we have our main and shared packages.

Let's now go inside our main package and change the following in package.json

// pnpm-monorepo/packages/main/package.json
{
"name": "@pnpm-monorepo/main"
...
}

For pnpm to properly identify that this package is part of our workspace, we need to change the name property of the package to @root-name/package-name . In this case, our root name is pnpm-monorepo .

Now let's go inside our shared package and do the same but first, we need to create a package.json file inside of it.

# pnpm-monorepo/packages/shared
pnpm init

This will create a package.json file inside our shared package, now let's change the following:

// pnpm-monorepo/packages/second/package.json
{
    "name": "@pnpm-monorepo/shared"
}

That's it for the configuration part, now we should be able to import packages from the workspace similar to how we do for other npm packages.

Let's create a index.ts file inside our shared package with the following code:

// pnpm-monorepo/packages/shared/index.ts
export const sayHi = (userName: string) => console.log(`Hi ${userName}`)

We have a basic sayHi function which takes a userName as parameter and console log a message saying "Hi" to them.

Now let's go inside our main package and import our shared package by running this command:

# pnpm-monorepo/packages/main
pnpm add @pnpm-monorepo/shared

According to pnpm docs, if we do pnpm add within a workspace, it first tries to find that package within the workspace, and only if it is unable to find the package within the workspace it goes to the npm registry to install it.

As we already have @pnpm-monorepo/shared within our workspace, it will install it from the workspace itself.

At this point your package.json inside you main app should look something like this:

// pnpm-monorepo/packages/main/package.json
{
...
"dependencies": {
    "@pnpm-monorepo/shared": "workspace:^1.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
...
}

That's it, now we should be able to import variables/functions from our shared package.

Let's go inside our main/App.tsx and add the following code:

// pnpm-monorepo/packages/main/App.tsx
import { sayHi } from "@pnpm-monorepo/shared";

const App = () => {
  sayHi("Vedansh");
  return <h1>Main app</h1>;
};
export default App;

Run pnpm install and pnpm dev inside main app, a new dev server should spin up and you should see the following output at your http://localhost:5173:

So that's it, this was our very basic monorepo setup with pnpm-workspaces, Vite, and Typescript. Monorepos is a great solution for large-scale applications where you don't want to manage multiple repositories for multiple packages and instead you want to package all of them together into one repository.

If you want the complete code of this project you can find it here.

Thank you for reading, if you are still here consider following me for more blogs. You can also connect with me on Twitter and LinkedIn where I keep sharing regular content related to web development and Javascript.

Difference between useMemo and useCallback

Vedansh Mehra — Sat, 25 Feb 2023 08:11:04 +0000

Re-render is at the heart of React applications, Re-render happens when React components need to update the UI with new data. But there are times when some unnecessary re-renders can decrease the overall performance of the application. React has some in-built tools to prevent these unnecessary rerenders - useMemo and useCallback. Both of these hooks are used to reduce the re-render of a react app.

In this article, we are going to talk about what is the actual difference between these two hooks and when to use one over another.

When does react component re-renders?

In general, React components re-render due to one of the following reasons:

When state of the component changes.
When the parent component re-renders.
When the value of context provider changes, all the components using the context would re-render.

When is re-rendering a problem?

Re-rendering itself is not a problem. React is so fast in performing these re-renders that most of the time it can handle them without users noticing anything. However, there are cases when these re-renders can slow down the application, especially when unnecessary re-render happens on heavy components that compute complex values.

An example showing unnecessary re-render of a component

To illustrate this with an example, we will create a Parent and a Child component.

const Parent = () => {
  const [num, setNum] = useState(0);

  return (
    <>
      <p>{num}</p>
      <button onClick={() => setNum(num + 1)}>+</button>
      <Child />
    </>
  )
}

const Child = () => {
  console.log("Child component re-rendered...");

  return (
    <h1>I am Child Component</h1>
  )
}

We created a Parent component which has a button element and a state num and every time we click on the button element the state updates and as a result, we see the updated value of num on the UI.

However, you might notice that every time we click on the button element the Child component also re-renders, we know that because every time we click on the button we see Child component re-rendered... printed on the console.

How to prevent unnecessary re-render using useMemo?

React has a built-in hook that can help us solve this problem - useMemo.

useMemo(() => function, [])

useMemo takes a function and dependency array and it returns a memoized value.

In the above example, we have seen how Child component is re-rendering unnecessarily whenever we click on the button element in the Parent component. Let's see how we can prevent this re-render using useMemo.

const Parent = () => {
  const [num, setNum] = useState(0);
  const getChild = useMemo(() => <Child />, []) // Wrap the Child component inside useMemo hook.

  return (
    <>
      <p>{num}</p>
      <button onClick={() => setNum(num + 1)}>+</button>
      {getChild}
    </>
  )
}

This should now prevent Child component from re-rendering whenever the state updates in the Parent component.

A tricky catch with useMemo

We have seen how useMemo can solve the problem of unnecessary re-render but there is a catch. Let's find it out with the example below:

const Parent = () => {
  const [num, setNum] = useState(0);

  const clickHandler = () => {
    // Do something...
  }

  const getChild = useMemo(() => <Child handleClick={clickHandler}/>, [clickHandler])

  return (
    <>
      <p>{num}</p>
      <button onClick={() => setNum(num + 1)}>+</button>
      {getChild}
    </>
  )
}

const Child = ({handleClick}) => {
  console.log("Child component re-rendered...");

  return (
    <>
      <h1>I am Child Component</h1>
      <button onClick={handleClick}>Button inside child</button> 
    </>
  )
}

We added a button inside the Child component which will call a callback function whenever it is clicked. It will get that callback function from its props.

Then, we create a clickHandler function inside the Parent component and passed that function as a dependency to useMemo and then we passed that function as a prop to the Child component.

This will again cause the same problem that we faced earlier. Every time the state changes in the Parent component our Child component will re-render.

This is happening because whenever a component re-renders in react, the functions inside that component are also created again. So in this case, whenever the Parent component is re-rendering due to a change in its state the clickHandler function is created again which rerenders the Child component.

useCallback to Rescue

React has another built-in hook that can help us solve this problem - useCallback.

useCallback(() => function, [])

useCallback is very similar to useMemo, the main difference is that the useMemo returns a memoized value whereas useCallback returns a memoized function.

Let's see how we can solve this problem using useCallback.

const Parent = () => {
  const [num, setNum] = useState(0);

  // Wrap the clickHandler function with useCallback
  const clickHandler = useCallback(() => {
    // Do something...
  }, []);

  const getChild = useMemo(() => <Child handleClick={clickHandler} />, [
    clickHandler
  ]);

  return (
    <>
      <p>{num}</p>
      <button onClick={() => setNum(num + 1)}>+</button>
      {getChild}
    </>
  );
};

We just need to wrap the clickHandler function with useCallback hook to solve this problem. Thereafter, whenver the Parent component re-renders clickHandler will return the memoized function until one or more of its dependencies has not changed and due to this the Child component will not re-render unnecessarily.

Here is the complete code:

const Parent = () => {
  const [num, setNum] = useState(0);

  const clickHandler = useCallback(() => {
    // Do something...
  }, []);

  const getChild = useMemo(() => <Child handleClick={clickHandler} />, [
    clickHandler
  ]);

  return (
    <>
      <p>{num}</p>
      <button onClick={() => setNum(num + 1)}>+</button>
      {getChild}
    </>
  );
};

const Child = ({ handleClick }) => {
  console.log("Child component re-rendered...");

  return (
    <>
      <h1>I am Child Component</h1>
      <button onClick={handleClick}>Button inside child</button>
    </>
  );
};

Summary

Both useMemo and useCallback can be used to improve the performance of the React app by reducing unnecessary re-renders. At this point, most of us might be thinking that we should use these hooks for every function and component to improve performance but that is far from the truth. It's important to remember that useMemo and useCallback comes with a cost of creating a memoized value or function and if the values that we are computing are not very expensive and don't change very often they cannot outweigh that cost.

If the app is not performant, we should first try to find the underlying problem and fix it and then only use these hooks to improve the performance.

If you liked this article, you might like my tweets too - Follow me on Twitter.

Show your support by giving a thumbs up to this article and share your thoughts in the comments.