DEV Community: Markus Persson

How to use the useMemo & useCallback React hook

Markus Persson — Sun, 02 Jul 2023 19:54:02 +0000

Introduction

As your React skills grow, you'll start to care more and more about how well your app performs. When it comes to optimizing React applications, caching is as important as any other tool or programming technique. In React, caching is commonly referred to as memoization, and it is used to reduce the number of times a component is rendered due to state or prop changes. This article will explain how to use the useMemo and useCallback hooks in React for caching purposes.

The default caching in React

By default, React uses a technique called "shallow comparison" to decide whether a component should be re-rendered. It compares the previous props and state of the component with the new ones, and if there are no changes, React assumes that the component hasn't changed, and it won't re-render.

However, when dealing with more complex components that have advanced state management, this default mechanism may not be sufficient. In such cases, additional caching techniques are needed to optimize performance. That's where the useMemo and useCallback hooks come in.

useMemo hook

Note: useMemo hook can only return a value.

When a component renders, all the code within it is executed, including any functions defined within the component. If a function performs a complex calculation, it can be inefficient to execute it on every render, especially if the function's arguments hasn't changed.
React re-renders a component if a prop or state has changed.

This is where the useMemo hook comes into play. By wrapping the function in an useMemo hook, React will remember the calculated value from the function between renders. It will only call the function if any of useMemo's dependencies specified in the dependency array (the second argument of useMemo) has changed. If the dependencies remain the same from the previous render, the previously calculated value is returned, and bypassing the need for a Recalculation.

Example without useMemo:

Here you can see that {expensiveCalculation(count)} will re-render no matter if your click incrementCount or incrementCountRender becuase React re-renders a component if a prop or state has changed. Which results in everything inside of the JSX return() will get rendered again.

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const [countRender, setCountRender] = useState(1)

  const incrementCount = () => {
    console.log('Increment count')
    setCount((c) => c + 1);
  };


  const incrementCountRender = () => {
    console.log('Increment count render')
    setCountRender((c) => c + 1)
  }

  return (
    <div>
      <div>
        Count: {count}
        <button onClick={incrementCount}>+</button>
        <br />
        Count render: {countRender}
        <button onClick={incrementCountRender}>+</button>
        <h2>Expensive Calculation</h2>
        {expensiveCalculation(count)}
      </div>
    </div>
  );
};

const expensiveCalculation = (num: number) => {
  console.log("Expensive calculation");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

export default App

Example with useMemo:
I removed {expensiveCalculation(count)} from the JSX return() and added calculatedResult function which is wrapped with useMemo and returns expensiveCalculation(count) with a dependency array that has count inside of it. This useMemo function will only run in the initial render and if count has changed.

import React, { useMemo, useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const [countRender, setCountRender] = useState(1)

  const incrementCount = () => {
    console.log('Increment count')
    setCount((c) => c + 1);
  };


  const incrementCountRender = () => {
    console.log('Increment count render')
    setCountRender((c) => c + 1)
  }

  const calculatedResult = useMemo(() => {
    console.log('useMemo')
    return expensiveCalculation(count)
  }, [count])

  return (
    <div>
      <div>
        Count: {count}
        <button onClick={incrementCount}>+</button>
        <br />
        Count render: {countRender}
        <button onClick={incrementCountRender}>+</button>
        <h2>Expensive Calculation</h2>
        {calculatedResult}
      </div>
    </div>
  );
};

const expensiveCalculation = (num: number) => {
  console.log("Expensive calculation");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

export default App

useCallback hook

Note: useCallback hook returns a function.

The useCallback hook in React allows you to memoize a function, ensuring that the function reference remains the same between renders unless any dependencies specified in the dependency array (the second argument of useCallback) have changed.

When a component renders, all the code within it is executed, including the creation of any functions inside the component. If a function is passed down as a prop to child components, it can lead to unnecessary re-renders of those child components if the function reference changes, even if the logic inside the function hasn't changed.

Example without useCallback

The getTodos function retrieves a single todo from the todos array based on the count state. This function is then passed as a prop to the TodosList component, where it is used in an useEffect hook to update the state by spreading the retrieved todo with the existing todos.

This functionality works correctly when there is no countTwo state or setCountTwo button, as they trigger a re-render of the component. If the button is clicked, it will cause the TodosList component to re-render, resulting in the addition of an old todo to the todos state, which can lead to an error.

import React, { useEffect, useState } from "react";

const todos = [
  {id: 1, title: 'Todo 1'},
  {id: 2, title: 'Todo 2'},
  {id: 3, title: 'Todo 3'},
  {id: 4, title: 'Todo 4'},
  {id: 5, title: 'Todo 5'},
]

const App = () => {
  const [count, setCount] = useState(0);
  const [countTwo, setCountTwo] = useState(100)

  const getTodos = () => {
    return todos[count]
  }

  return (
    <div>
      <div>
        Count: {count}
        <button onClick={() => setCount(count + 1)}>+</button>
        <br />
        Count Two: {countTwo}
        <button onClick={() => setCountTwo(countTwo - 1)}>+</button>
        <br />
        <TodosList getTodos={getTodos}/>
      </div>
    </div>
  );
};

const TodosList = ({getTodos}) => {
  const [todos, setTodos] = useState([])

  useEffect(() => {
    console.log('getTodos function is called.')
    setTodos([...todos, getTodos()])
  }, [getTodos])

  return (
    <>
    {todos.map(todo => <span key={todo.id}>{todo.title} </span>)}
    </>
  )
}

export default App

Example with useCallback:

Here, we have wrapped the getTodos function in a useCallback hook. This ensures that the function will only be executed during the initial render of the component or when the count state has changed. Otherwise, it won't be invoked.

import React, { useCallback, useEffect, useState } from "react";

const todos = [
  {id: 1, title: 'Todo 1'},
  {id: 2, title: 'Todo 2'},
  {id: 3, title: 'Todo 3'},
  {id: 4, title: 'Todo 4'},
  {id: 5, title: 'Todo 5'},
]

const App = () => {
  const [count, setCount] = useState(0);
  const [countTwo, setCountTwo] = useState(100)

  const getTodos = useCallback(() => {
    return todos[count]
  }, [count])

  return (
    <div>
      <div>
        Count: {count}
        <button onClick={() => setCount(count + 1)}>+</button>
        <br />
        Count Two: {countTwo}
        <button onClick={() => setCountTwo(countTwo - 1)}>+</button>
        <br />
        <TodosList getTodos={getTodos}/>
      </div>
    </div>
  );
};

const TodosList = ({getTodos}) => {
  const [todos, setTodos] = useState([])

  useEffect(() => {
    console.log('getTodos function is called.')
    setTodos([...todos, getTodos()])
  }, [getTodos])

  return (
    <>
    {todos.map(todo => <span key={todo.id}>{todo.title} </span>)}
    </>
  )
}

export default App

Conclution

useMemo: allows you to calculate and store a value only when its dependencies have changed. By memoizing the value, Then React can avoid unnecessary recalculations and re-renders of the component, improving overall performance.

useCallback: is used to memoize a function. It returns a memoized version of the function that will only be called if its dependencies has been changed. This is particularly useful when passing callbacks as props to child components.

By using useMemo and useCallback wisely, you can optimize your React application by reducing unnecessary calculations and rendering, leading to improved performance and a smoother user experience.

Step-by-Step Guide: Deploying a NextJS App on a VPS

Markus Persson — Sat, 01 Jul 2023 19:47:32 +0000

Hello, today we will explore how we can deploy a Next.js website on a Ubuntu Virtual Private Server (VPS). A VPS provides the user with the flexibility and control of a dedicated server, allowing them to install and configure their preferred software and applications while sharing the underlying hardware infrastructure with other VPS instances. It offers a cost-effective solution for hosting websites, running applications, and managing online services with improved scalability, security, and customization options.

To begin to deploy your Next.js app on a VPS, you’ll need to fulfill the following prerequisites:

A Next.js project: If you don't already have a Next.js project, you can create one in your terminal using the command npx create next-app@latest.
Git & GitHub: You'll need to create a GitHub repository and push your code to that repository using git.
VPS: Research and select a VPS provider that suits your needs in terms of pricing, features, server location, performance, and customer support. I personally like DigitalOcean's Droplet.
Create an SSH key: Create an SSH key on your local machine and add it to your VPS provider.

Now, let’s dive into the process of deploying your Next.js application to a VPS:

1. Point your domain to the server

Once you have created a VPS, you will be provided with an IP address. Copy this IP address and go to the dashboard of your domain website. In the DNS settings, or if you have changed the nameservers to Cloudflare and are using Cloudflare DNS (which is recommended & free), find the @ record and modify it to point to the IP address of your VPS server. This ensures that your domain is correctly pointed to your VPS, allowing it to be accessible through your domain name.

2. Connect to your server

To access the server via SSH, you can use the command ssh root@your_vps_ip. However, it is important to note that without an SSH key, you won't be able to connect to the server using your terminal. To enable SSH access, you need to create an SSH key on your local machine and add the corresponding public key to your VPS provider's SSH settings.

3. Update the server

Now we can update the Ubuntu server using the command sudo apt update && sudo apt upgrade in your terminal, it will usually take some time. If you see Configuring openssh-server just click ok.

4. Install NGINX & Certbot

We can install NGINX and Certbot using the command sudo apt install nginx certbot python3-certbot-nginx. Certbot will allow you to use let's encrypt which will give your domain an SSL certificate for free.

5. Allow firewall access

Run these commands in order

sudo ufw allow "Nginx Full"
ufw allow OpenSSH
ufw enable

6. Install NPM

apt install npm

7. Install pm2 & check if it's working

pm2 is a process manager for Node.js which basically tells Next.js to start or stop running. Install it using the command npm install -g pm2 and check if it's working by using the following command pm2 status. You should see a table with nothing running.

8. Install NVM & Node.js

Now you need to run the following command cd /var/www and then run these commands in order.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
exec $SHELL
nvm install --lts

9. Create an SSH key in your VPS server and place in GitHub

cd ~/.ssh
Run this command to create an SSH key ssh-keygen -t rsa -b 4096 -C your@github_email.com, replace the email address your@github_email.com with the email address that is associated with your GitHub account.
Run the command ls to see what files exists.
cat id_rsa.pub And copy the text, it will look something like this ssh-rsa long_random_text your@github_email.com.
Go to GitHub and click on your avatar upper right corner then click settings, then on the left sidebar click SSH and GPG keys, then upper right click New SSH key, and paste the key and name it something like vps_key.
Now run this command cd /var/www in your terminal to got back to the root folder.

10. Clone Next.js project inside a new folder & install dependencies

Go to your GitHub's project repository and click the green button Code and select SSH. It should look something like this.

Copy it and edit to look like this git clone git@github.com:your_github_name/your_repository_name.git your_app_name.

Now we can clone it into our VPS. Make sure you have run the command cd /var/www and then run the command git clone git@github.com:your_github_name/your_repository_name.git your_app_name Ensure that you provide a name at the end; otherwise, it will clone into the var/www folder, which is not what we want.

Now we can check if it has created a folder using ls and then cd into the folder using cd your_app_name, and then run the command npm install to install all the required dependencies. Then we can run npm run build to build the application.

11. Create NGINX file and configure it

Run this command cd /etc/nginx/sites-available then run touch your_app_name the name of the folder u cloned your repository to. Then we can run the command nano your_app_name.

Change domainname.com in server_name domainname.com; to your domain name you pointed to the server and keep ; and change the your_app_name in alias /var/www/your_app_name/.next/static/; to folder name you created with git clone. You can use arrow keys to go up and down and to save you can press CTRL + s and to exit press CTRL + X.



server {
        listen 80;
        server_name domainname.com;

        gzip on;
        gzip_proxied any;
        gzip_types application/javascript application/x-javascript text/css text/javascript;
        gzip_comp_level 5;
        gzip_buffers 16 8k;
        gzip_min_length 256;

        location /_next/static/ {
                alias /var/www/your_app_name/.next/static/;
                expires 365d;
                access_log off;
        }

        location / {
                proxy_pass http://127.0.0.1:3000; #change to 3001 for second app, but make sure second nextjs app starts on new port in packages.json "start": "next start -p 3001",
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

Now we need to run nano /etc/nginx/nginx.conf in the terminal and change include /etc/nginx/sites-enabled/*; to include /etc/nginx/sites-available/*;

Then we need to make sure everything is ok, we can run the command nginx -t. Next we need to remove default config files, run these commands.

cd /etc/nginx/sites-available
rm default
cd /etc/nginx/sites-enabled
rm default

Now we can restart NGINX using the command systemctl restart nginx.

12. Launch app and create an SSL with let's encrypt

Now we need to go back to the directory of our project using cd /var/www/name_of_app and then run the command pm2 start npm --name name_of_app -- start but change name_of_app to the name of the directory of your project. Last we need to create an SSL using Certbot sudo certbot --nginx -d domainname.com. Congratulations you have now successfully deployed an Next.js application on a VPS server 🎉.

Helpful commands

Starts the app: pm2 start npm --name name_of_app -- start You need to be inside of the application directory.
Restarts NGINX: systemctl restart nginx.
Adds a SSL using Let's encrypt for a specified domain: sudo certbot --nginx -d domainname.com.

How to Dockerize a Next.js Application Using Docker for Beginners

Markus Persson — Fri, 30 Jun 2023 19:59:52 +0000

Hello, today we will explore how Docker can be used to Dockerize your Next.js application. Docker is an open-source platform that allows you to containerize your applications to develop, ship, and run applications efficiently.

To begin containerizing your Next.js app using Docker, you’ll need to fulfill the following prerequisites:

Docker: Install Docker on your Windows, Mac, or Linux system. You can find the installation on Docker’s website.
Node.js: Download & Install it on your PC.

Now, let’s dive into the process of Dockerizing your Next.js application:

1. Setting up a New Next.js Project

If you already have a Next.js project, you can skip this step. Otherwise, follow the instructions below:

In your terminal, run the command npx create-next-app@latest to create a new Next.js project and follow the instruction provided in the terminal by Next.js.

2. Creating the Dockerfile

In the root directory of your project, create a file called “Dockerfile” (without any file extension). This file serves as a step-by-step script for Docker to build the container image.

Copy and paste the following code into your Dockerfile:

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD npm run dev

Here’s a breakdown of the Dockerfile:

FROM node:18-alpine instructs Docker to use a lightweight Linux distribution with Node.js version 18 installed. You can choose a different OS image from Docker Hub if you prefer.
WORKDIR /app sets the working directory inside the container to /app.
COPY package*.json ./ copies the package.json file into the working directory.
RUN npm install installs all the dependencies for your project.
COPY . . copies all the files from the current directory into the working directory of the container. You can utilize a .dockerignore file to exclude specific files from being copied.
EXPOSE 3000 exposes port 3000 from the container to the local network.
CMD npm run dev starts the development server inside the container.

3. Building Your Docker Container

In your terminal, navigate to the root directory of your project and run the command docker build -t nextjs_docker:dev . This command builds the Docker container with the specified name (nextjs_docker) and tag (dev). Feel free to customize the name and tag as per your preference. The . indicates that the Dockerfile is located in the current directory.

Note: Each time you run this command, a new image of your container will be created. You can view the images on your system by running docker images or docker image ls.

4. Running the Docker Container

There are two ways to run your Docker container image: through the command line or using the Docker Desktop GUI.

To run the container through the command line, open your terminal
and execute the following command:

docker run --publish 3000:3000 nextjs_docker:dev

If you prefer using the Docker Desktop GUI, open Docker Desktop and navigate to the “Images” tab. Select the desired image and click the “Run” button.

Once the container is running, access your Next.js application by visiting http://localhost:3000/. You should be able to see the homepage of your Next.js application.

Please note that this article only covers the process of containerizing your development environment for portability purposes. It is not intended for production use.