Using Callback and useMemo Hooks in ReactJS

In ReactJS, the callback and useMemo hooks are powerful tools that can enhance the performance and functionality of your components. In this article, we will explore how to use these hooks effectively with examples.

Section 1: Callback Hook

The useCallback hook allows you to memoize a function and prevent unnecessary re-renders. It is particularly useful when passing callbacks to child components, as it ensures that the callback reference remains stable unless the dependencies change.

Example:
Let's say we have a parent component that renders a child component and passes a callback function as a prop. Without using useCallback, the callback function would be recreated on every render, potentially causing unnecessary re-renders in the child component.

import React, { useCallback } from 'react';

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

  return <ChildComponent onClick={handleClick} />;
};

const ChildComponent = ({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
};

In the example above, the useCallback hook ensures that the handleClick function is only recreated when the dependencies change (in this case, there are no dependencies). This optimization can significantly improve the performance of your application.

Section 2: useMemo Hook

The useMemo hook allows you to memoize the result of an expensive computation. It is useful when you have a computationally expensive function that is called within your component.

Example:
Let's consider a scenario where we have a component that needs to compute a factorial value based on a given number. Without using useMemo, the factorial computation would occur on every render, even if the input number remains the same.

import React, { useMemo } from 'react';

const FactorialComponent = ({ number }) => {
  const factorial = useMemo(() => {
    const computeFactorial = (n) => {
      if (n === 0 || n === 1) return 1;
      return n * computeFactorial(n - 1);
    };

    return computeFactorial(number);
  }, [number]);

  return <div>Factorial of {number} is {factorial}</div>;
};

In the example above, the useMemo hook memoizes the result of the factorial computation based on the number prop. It ensures that the computation is only performed when the number prop changes, preventing unnecessary calculations and improving performance.

Conclusion:
By utilizing the useCallback and useMemo hooks in ReactJS, you can optimize your components, reduce unnecessary re-renders, and improve the overall performance of your application. These hooks are valuable tools to enhance the efficiency and responsiveness of your ReactJS projects.

Follow me in X/Twitter

Comments

[Ashfiquzzaman Sajal]

Do you have any suggestion about the article?