Reading list Switch to dark mode

    Use of useMemo – Hook | React


    In this post, we will learn the use of useMemo Hook in React JS.

    The purpose of useMemo hook is to memoize the output of a function, It means that it executes some function and remembers the output of that function. The useMemo hook is used to improve performance in our React application.

    Syntax :

    const memoizedValue = useMemo(functionThatReturnsValue, arrayDepencies)

    The React useMemo hook accepts two parameters. These parameters are some functions whose output you want to memorize and an array of dependencies. 

    Start your headless eCommerce
    Read More

    The important part comes when your component re-renders. After re-render, any function in the component would be normally created. If you are also calling the function, it would be also executed again.

    The useMemo hook helps you avoid this. It allows you to execute the memoized function only under specific conditions. When these conditions are not met, the useMemo will not execute the function. Instead, it will return the value from the last execution.

    Let’s take a small example to understand

    We have a component that does two things – Square a number and Increases the counter.

    import React, { useState, useMemo } from "react";
    const index = () => {
      const [number, setNumber] = useState(0);
      // Using useMemo
      const squaredNum = useMemo(() => {
        return squareNum(number);
      }, [number]);
      const [counter, setCounter] = useState(0);
      // Change the state to the input
      const onChangeHandler = (e) => {
      // Increases the counter by 1
      const counterHander = () => {
        setCounter(counter + 1);
      return (
          <div className="App">
            <h1>UseMemo- Hook</h1>
              placeholder="Enter a number"
            <div>OUTPUT: {squaredNum}</div>
            <button onClick={counterHander}>Counter ++</button>
            <div>Counter : {counter}</div>
      // function to square the value
        function squareNum(number) {
            console.log("Squaring will be done!");
            return Math.pow(number, 2);
    export default index;

    In the above example, useMemo runs only after the initial render. Here the function that returns the value i.e squareNum is passed inside the useMemo and inside the array dependencies, we have used the number as the squareNum will run only when the number changes.

    If we increase the counter and the number remains the same in the input field the squareNum doesn’t run again.

    Let’s see the output below.


    This is a small example to understand the useMemo Hook in React.

    Check out our blog How to Create Next App

    Happy Coding !!

    . . .
    Add a comment

    Leave a Comment

    Your email address will not be published.

    Be the first to comment.

    Back to Top
    Very helpful and super fast support from Abhishek. Much appreciated for your help. He is very helpful and keen to resolve the issue.
    Emma Nguyen
    Talk to Sales


    Live Chat

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home