प्रतिक्रिया ज्ञापन
उपयोग memoकरने से रिएक्ट एक घटक को प्रस्तुत करना छोड़ देगा यदि उसके प्रॉप्स नहीं बदले हैं।
इससे प्रदर्शन में सुधार हो सकता है।
यह खंड रिएक्ट हुक का उपयोग करता है। हुक के बारे में अधिक जानकारी के लिए रिएक्ट हुक अनुभाग देखें ।
मुसीबत
इस उदाहरण में, Todosघटक तब भी फिर से प्रस्तुत करता है जब टोडो नहीं बदले हैं।
उदाहरण:
index.js:
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js:
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default Todos;
जब आप इंक्रीमेंट बटन पर क्लिक करते हैं, तो Todosकंपोनेंट फिर से रेंडर करता है।
यदि यह घटक जटिल था, तो यह प्रदर्शन समस्याओं का कारण बन सकता है।
प्रमाणन हासिल करें!
$95 नामांकन
समाधान
इसे ठीक करने के लिए, हम उपयोग कर सकते हैं memo।
घटक को अनावश्यक रूप से पुन: प्रस्तुत memoकरने से रोकने के लिए उपयोग करें ।Todos
Todosघटक निर्यात को इसमें लपेटें memo:
उदाहरण:
index.js:
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js:
import { memo } from "react";
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default memo(Todos);
अब Todosघटक केवल फिर से प्रस्तुत करता todosहै जब इसे प्रोप के माध्यम से पास किया जाता है अद्यतन किया जाता है।