Implementation of React.memo() and useMemo() in React

React.memo allows functional component to have same optimization as Pure Component provides for class-based components. useMemo is for memoizing function’s calls inside functional component.

What is React.memo() ?

React.memo() is a higher-order component (HOC) provided by React that memoizes functional components. It means that it caches the result of the component’s rendering based on its props, and re-renders only when the props have changed.

Syntax of React.memo():

const MemoizedComponent = React.memo(FunctionalComponent);

What is useMemo() ?

useMemo() is a React Hook used to memoize the result of expensive computations within functional components. It memorizes the value returned by a provided function and re-calculates it only when the dependencies change.

Syntax of useMemo():

const memoizedValue = useMemo(() => computeExpensiveValue(dep1, dep2), [dep1, dep2]);

Features:

• Efficient Rendering: Utilize React.memo() to prevent unnecessary re-renders of components, ensuring optimal performance, especially with complex UIs.
• Memoization of Filtered Data: Employ useMemo() to memoize the filtered data based on user input, reducing redundant computations and enhancing responsiveness.
• Dynamic Filtering: Implement dynamic filtering functionality, allowing users to search and filter through large datasets with minimal performance impact.
• Real-time Updates: Ensure that the list component updates in real-time as users interact with the filter input, providing a seamless and responsive user experience.
• Scalability: Design the solution to handle large datasets efficiently, ensuring that performance remains consistent even as the volume of data grows.
• Easy Integration: The optimized list component can be easily integrated into various React applications, providing developers with a reusable and performant solution for managing lists.

Steps to Create a React App:

Step 1: Create a new React.js project and install the required dependencies:-

npx create-react-app my-react-app.

Step 2: Navigate to the root directory of your project using the following command.

cd my-react-app

Exaplanation:

• main.jsx: This will be the main component. It manages the state of the todo list and renders TodoList.
• App.jsx: This component receives the list of todos as props and renders individual TodoItem components.
• TodoItem.jsx: This component renders a single todo item and handles deletion.
• In a Todo List application, React.memo() can be applied to functional components like TodoItem to memoize their rendering process, preventing unnecessary re-renders when their props haven’t changed.
• useMemo() can be used to memoize the filtered list of todos based on a filter input, recalculating it only when the todos list or filter input changes.

Example: Below is an example of both React.memo() and useMemo().

JavaScript

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

const TodoList = React.memo(({ todos, onDelete }) => {
    console.log('Rendering TodoList');

    if (todos.length === 0) {
        return <p className="message">
            Todo list is empty.
        </p>;
    }

    return (
        <ul className="todo-list">
            {todos.map((todo, index) => (
                <li key={index}>
                    {todo}
                    <button className="buttons"
                        onClick={() => onDelete(index)}>
                        Delete
                    </button>
                </li>
            ))}
        </ul>
    );
});

const TodoApp = () => {
    const [filter, setFilter] = useState('');
    const [newTodo, setNewTodo] = useState('');
    const [todos, setTodos] = useState([]);

    // Memoize the filtered todos based on the filter value
    const filteredTodos = useMemo(() => {
        console.log('Filtering todos');
        return todos.filter(todo =>
            todo.toLowerCase().includes(filter.toLowerCase()));
    }, [todos, filter]);

    const handleAddTodo = () => {
        if (newTodo !== '') {
            setTodos(prevTodos =>
                [...prevTodos, newTodo]);
            setNewTodo('');
        }
    };

    const handleDeleteTodo = (index) => {
        setTodos(prevTodos =>
            prevTodos.filter((_, i) => i !== index));
    };

    return (
        <div className="container">
            <div className="input-container">
                <h1 className="heading">TODO-LIST</h1>
                <input
                    type="text"
                    placeholder="Add a todo"
                    value={newTodo}
                    onChange={(e) => setNewTodo(e.target.value)}
                />
                <button className="buttons"
                    onClick={handleAddTodo}>
                    Add
                </button>
            </div>
            <div className="input-container">
                <input
                    type="text"
                    placeholder="Filter todos"
                    value={filter}
                    onChange={(e) => setFilter(e.target.value)}
                />
            </div>
            {
                filteredTodos.length === 0 &&
                todos.length !== 0 && (
                    <p className="message">
                        No matching todos found.
                    </p>
                )}
            <TodoList todos={filteredTodos}
                onDelete={handleDeleteTodo} />
        </div>
    );
};

export default TodoApp;

Output:

Output