By default, React re-renders components again and again. Using memo will stop that if props have not changed.

Problem

When we make components like Navbar, Footer, they re-render even if there is no change in them. To test this, you can make a Navbar component and import it. Put a console.log, if it is logging, it means the navbar is re-rendering.

Solution

So what's the solution for this? Because this re-rendering is just a wastage of resources.

memo is a simple solution for this! What memo does is, it just monitors if props have changed. If they have, it re-renders; if they haven't, it doesn't render again.

props is an object, and JavaScript is very fast in comparing objects as it doesn't compare the whole object, it just checks the address!

Importing memo

To use it, first we need to import memo. It can be imported like this:

import { memo } from "react";

Using memo

Everything remains the same, just when you are exporting the Navbar, you have to wrap it in memo, like this:

export default memo(Navbar);