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().
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:
Contact Us