The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

useMemo and useCallback Hooks

Next ►
►

In this section, we will explore two powerful hooks in React: useMemo and useCallback. These hooks are essential for optimizing the performance of your React applications by preventing unnecessary re-renders and computations.

What is useMemo?

The useMemo hook is used to memoize the result of a computation. It helps to avoid expensive calculations on every render by caching the result and recomputing it only when one of its dependencies changes.

Syntax

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  • computeExpensiveValue is a function that performs the expensive calculation.
  • [a, b] is the dependency array. The memoized value will only be recomputed if one of these dependencies changes.

Example

Let's look at an example where we use useMemo to optimize a component that performs an expensive calculation.

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

function ExpensiveCalculationComponent({ a, b }) {
  const [count, setCount] = useState(0);

  const expensiveCalculation = (a, b) => {
    console.log('Performing expensive calculation...');
    return a + b;
  };

  const memoizedValue = useMemo(() => expensiveCalculation(a, b), [a, b]);

  return (
    <div>
      <p>Result of expensive calculation: {memoizedValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default ExpensiveCalculationComponent;

Explanation

  • The expensiveCalculation function is called only when a or b changes.
  • The useMemo hook ensures that the expensive calculation is not performed on every render, but only when necessary.
  • Clicking the "Increment Count" button will not trigger the expensive calculation, as it does not affect the dependencies [a, b].

What is useCallback?

The useCallback hook is used to memoize a callback function. It returns a memoized version of the callback that only changes if one of its dependencies has changed. This is useful for passing stable references to child components, preventing unnecessary re-renders.

Syntax

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);
  • doSomething is the function to be memoized.
  • [a, b] is the dependency array. The memoized callback will only be recreated if one of these dependencies changes.

Example

Let's look at an example where we use useCallback to optimize a component that passes a callback to a child component.

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

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Click Me</button>;
}

function ParentComponent() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default ParentComponent;

Explanation

  • The handleClick function is memoized using useCallback.
  • The ChildComponent will not re-render when the "Increment Count" button is clicked, as the handleClick reference remains stable.
  • This prevents unnecessary re-renders of the ChildComponent, improving performance.

Practical Exercise

Task

Create a component that uses both useMemo and useCallback to optimize performance. The component should display a list of items and allow the user to filter the list based on a search input.

Solution

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

function FilterableList({ items }) {
  const [search, setSearch] = useState('');

  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.toLowerCase().includes(search.toLowerCase()));
  }, [items, search]);

  const handleSearchChange = useCallback((event) => {
    setSearch(event.target.value);
  }, []);

  return (
    <div>
      <input type="text" value={search} onChange={handleSearchChange} placeholder="Search items..." />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default FilterableList;

Explanation

  • The filteredItems array is memoized using useMemo, ensuring that the filtering logic is only executed when items or search changes.
  • The handleSearchChange function is memoized using useCallback, providing a stable reference to the input's onChange handler.

Summary

In this section, we learned about the useMemo and useCallback hooks in React. These hooks are essential for optimizing performance by preventing unnecessary re-renders and computations. We explored practical examples and exercises to reinforce the concepts. By using these hooks effectively, you can build more efficient and performant React applications.

◄ Previous
◄
Next ►
►

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved