प्रतिक्रिया useMemoहुक
रिएक्ट useMemoहुक एक याद किया हुआ मान लौटाता है।
संस्मरण को एक मूल्य के रूप में कैशिंग के रूप में सोचें ताकि इसे पुनर्गणना करने की आवश्यकता न हो।
हुक केवल तभी चलता है जब उसकी कोई useMemoएक निर्भरता अद्यतन होती है।
इससे प्रदर्शन में सुधार हो सकता है।
और हुक समान हैं useMemo। useCallbackमुख्य अंतर यह है कि useMemoएक मेमोइज्ड वैल्यू
useCallbackलौटाता है और एक मेमोइज्ड फंक्शन देता है। आप कॉलबैक अध्याय के उपयोग के बारे useCallbackमें अधिक जान सकते हैं ।
प्रदर्शन
हुक का useMemoउपयोग महंगे, संसाधन गहन कार्यों को अनावश्यक रूप से चलने से रोकने के लिए किया जा सकता है।
इस उदाहरण में, हमारे पास एक महंगा फ़ंक्शन है जो प्रत्येक रेंडर पर चलता है।
गिनती बदलते समय या टूडू जोड़ते समय, आप निष्पादन में देरी देखेंगे।
उदाहरण:
खराब प्रदर्शन करने वाला कार्य। फ़ंक्शन प्रत्येक expensiveCalculationरेंडर पर चलता है:
import { useState } from "react";
import ReactDOM from "react-dom";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const calculation = expensiveCalculation(count);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
};
const expensiveCalculation = (num) => {
console.log("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};
ReactDOM.render(<App />, document.getElementById('root'));
प्रमाणन हासिल करें!
$95 नामांकन
उपयोग useMemo
इस प्रदर्शन समस्या को ठीक करने के लिए, हम फ़ंक्शन useMemoको याद रखने के लिए हुक का उपयोग कर सकते हैं expensiveCalculation। यह फ़ंक्शन को केवल आवश्यकता होने पर ही चलने का कारण बनेगा।
हम महंगे फंक्शन कॉल को useMemo.
निर्भरता घोषित करने के useMemoलिए हुक दूसरा पैरामीटर स्वीकार करता है। महंगा फ़ंक्शन तभी चलेगा जब उसकी निर्भरताएँ बदल गई हों।
निम्नलिखित उदाहरण में, महँगा फ़ंक्शन केवल तभी चलेगा जब count
बदल दिया जाए और न कि जब टूडू को जोड़ा जाए।
उदाहरण:
useMemoहुक का उपयोग करके प्रदर्शन उदाहरण :
import { useState, useMemo } from "react";
import ReactDOM from "react-dom";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const calculation = useMemo(() => expensiveCalculation(count), [count]);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
};
const expensiveCalculation = (num) => {
console.log("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};
ReactDOM.render(<App />, document.getElementById('root'));