Implementation of useMemo Hook in React JS | Updated 2024

65

We’ll guide you through the steps to create a simple memoization example in React using a memoized component. Memoization is a useful technique in React to optimize performance by caching and reusing the results of expensive function calls.

Step by Step Guide useMemo Hook in React JS

Step 1: Setup Your React Environment

If you haven’t already, create a new React app:

npx create-react-app memo-example
cd memo-example

Step 2: Create a Memoized Component

We’ll create a simple component that accepts a number and calculates its factorial. This calculation will be memoized to prevent re-computation for the same inputs.

1. Create a new component: Inside your src folder, create a new file named Factorial.js.
2. Implement the factorial function: This function will compute the factorial of a number, which we will later memoize.

function factorial(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
}

3. Use React’s memo for memoization: Wrap your component with React’s memo to prevent it from re-rendering if the props have not changed.

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

const Factorial = ({ num }) => {
  const memoizedFactorial = useMemo(() => factorial(num), [num]);

  return (
    <div>
      <h1>Factorial of {num} is {memoizedFactorial}</h1>
    </div>
  );
}

export default React.memo(Factorial);

Step 3: Use the Memoized Component in Your App

Now, integrate the Factorial component into your main application component, typically App.js.

Modify App.js:Import the Factorial component and use it inside your App component. You can also add input handling to change the number dynamically.

import React, { useState } from 'react';
import Factorial from './Factorial';

function App() {
  const [number, setNumber] = useState(5);

  return (
    <div className="App">
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value))}
      />
      <Factorial num={number} />
    </div>
  );
}

export default App;

Step 4: Run Your Application

Now, everything is set up. Start your application to see the memoization in action:

npm start

Conclusion

This setup demonstrates how React’s memo and useMemo can be used to optimize performance by memoizing calculations or components that require heavy computation or rely on unchanging props. This technique prevents unnecessary re-renders and function executions, thereby enhancing the performance of your React applications.

useMemo Hook in React JS – FAQs