- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
ReactJS – useMemo hook
In this article, we are going to see how to optimize a React application by passing a memoized value.
This hook is used to optimize the React application by returning a memoized value which helps to prevent doing the complex calculations on every re-rendering. This hook stores the cached value and only updates the function on certain defined conditions.
Note: Don’t call side-effects in useMemo hooks; use useEffect hook instead.
Syntax
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Here, the returned value of computeExpensiveValue() function will only be changed on the next re-render if the values of a or b change.
Without useMemo Hook
Example
In this example, we will build a React application that has 3 input fields and will display the sum of two numbers returned by the function add.
App.jsx
import React, { useState } from 'react'; import './App.css'; const App = () => { const [name, setName] = useState(''); const [val1, setVal1] = useState(0); const [val2, setVal2] = useState(0); const answer = add(val1, val2); return ( <div> <input placeholder="name" value={name} onChange={(e) => setName(e.target.value)} /> <input placeholder="Value 1" value={val1} onChange={(e) => setVal1(e.target.value)} /> <input placeholder="Value 2" value={val2} onChange={(e) => setVal2(e.target.value)} /> {answer} </div> ); }; const add = (num1, num2) => { console.log('Adding numbers'); return parseInt(num1) + parseInt(num2); }; export default App;
In the above example, even when the user types a name, the add function is also called on every re-render which makes the React application not optimized. Add function is getting called on every re-render as when the user types, the state changes which re-renders the app.
Output
This will produce the following result.
With useMemo Hook
Example
App.jsx
import React, { useMemo, useState } from 'react'; import './App.css'; const App = () => { const [name, setName] = useState(''); const [val1, setVal1] = useState(0); const [val2, setVal2] = useState(0); const answer = useMemo(() => { return add(val1, val2); }, [val1, val2]); return ( <div> <input placeholder="name" value={name} onChange={(e) => setName(e.target.value)} /> <input placeholder="Value 1" value={val1} onChange={(e) => setVal1(e.target.value)} /> <input placeholder="Value 2" value={val2} onChange={(e) => setVal2(e.target.value)} /> {answer} </div> ); }; const add = (num1, num2) => { console.log('Adding numbers'); return parseInt(num1) + parseInt(num2); }; export default App;
In the above example, even if the user types the name, the add function is not called because it is called only if the values of val1 and val2 change.
Output
This will produce the following result.