useMemo Hook in React
Function components can access state and other React capabilities using hooks.
Deepak Talwar
0
18
This Article helps to understand the concept of useMemo Hook in React
useMemo in React is essential react hook for improving the performance and speed of your application by caching the output in the computer memory.
Whenever the React memo hooks are asked to perform another operation with the same value/output, the old result will be returned without needing to waste computer resources calculating all over again.
import { useState, useMemo } from "react";
export default function Salary() {
const [salaryperHr, setRate] = useState(900);
const [employees, setEmployees] = useState(0);
const computeDailySalary = ((salary) => {
return salary * 9;
});
const memoizedSalary = useMemo(() => computeDailySalary(salaryperHr), [salaryperHr]);
return (
<div className="App">
<p>No of Employees: {employees}p>
<p>Rate Per Hr: {salaryperHr}p>
<p>Daily Salary: {memoizedSalary}p>
<button
onClick={
() => setRate(oldRate => oldRate += 50)
}>Increase Rate</button>
<button
onClick={
() => setEmployees(nos => nos += 1)
}>Add Employee</button>
</div>
);
}
Daily Salary will not increase, eventhough new employees keeps adding on, until we increase the Rate prop,
