React में API memo

इससे पहले कि हम अगले हुक पर विचार करें, उपयोगी API memo का उल्लेख करना आवश्यक है, जो हमें कंपोनेंट के बार-बार रेंडर होने से बचाने में मदद करता है, यदि उसके प्रॉप्स अपरिवर्तित रहते हैं।

आइए इसे एक उदाहरण से समझते हैं। आइए एक कंपोनेंट App बनाएं, जिसमें दो इनपुट होंगे, जिनमें, मान लीजिए, नाम और उपनाम दर्ज किए जाते हैं:

return (
	<div>
		<label>
			नाम:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			उपनाम:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

आइए कंपोनेंट की शुरुआत में उनके लिए स्टेट जोड़ें:

const [name, setName] = useState('');
const [surn, setSurn] = useState('');

आइए एक चाइल्ड कंपोनेंट भी बनाएं Child.js, मान लीजिए कि यह एक अभिवादन प्रदर्शित करता है, जिसमें दर्ज किया गया नाम प्रदर्शित होगा। साथ ही, कंसोल में स्ट्रिंग 'child render' प्रिंट होगी इस कंपोनेंट के हर रेंडर पर:

function Child({ name }) {
	console.log('child render');
	return <h3>नमस्ते {name}!</h3>;
}

आइए Child को मुख्य कंपोनेंट की वर्स्टी में अंतिम इनपुट के बाद जोड़ें और प्रॉप के रूप में इसे नाम पास करें:

<Child name={name} />

इसे मुख्य कंपोनेंट में इम्पोर्ट करें:

import Child from './Child';

और अब कंसोल खोलें और इनपुट फ़ील्ड में नाम और उपनाम टाइप करें। यहां हम देखेंगे कि उपनाम वाले फ़ील्ड में वर्ण दर्ज करने पर भी, हमारा चाइल्ड कंपोनेंट हर बार पुनः रेंडर होगा। कोई समस्या नहीं है, क्योंकि हमारा कंपोनेंट छोटा है। लेकिन कल्पना कीजिए, यदि यह कंपोनेंट बड़ी मात्रा में डेटा प्रदर्शित कर रहा होता और साथ ही, हर बार पुनः रेंडर हो रहा होता।

और अब आइए चाइल्ड कंपोनेंट को memo में लपेटें, और देखें, कि रेंडरिंग कैसे बदलती है। सबसे पहले इसमें memo इम्पोर्ट करें:

import { memo } from 'react';

फिर एक नया वेरिएबल बनाएं और इसमें हमारा Child असाइन करें, जिसे memo में लपेटा गया है। हमारे पास निम्नलिखित फंक्शनल एक्सप्रेशन बनेगा:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>नमस्ते {name}!</h3>;
});

कंसोल खोलें और फिर से नाम और उपनाम फ़ील्ड में टाइप करें। अब हम देखते हैं कि उपनाम दर्ज करते समय, हमारा चाइल्ड कंपोनेंट पुनः रेंडर नहीं होता है।

यह याद रखना जरूरी है कि यह काम नहीं करेगा, यदि अपरिवर्तित प्रॉप्स के साथ कोई स्टेट बदलती है, जिसका उपयोग कंपोनेंट द्वारा किया जा रहा हो या कोई कॉन्टेक्स्ट बदल रहा हो, जिसका उपयोग किया जा रहा हो।

कंपोनेंट App का कोड लें, जो हमने इस पाठ में बनाया था, इसमें से केवल पहला इनपुट छोड़ दें। एक React कंपोनेंट Text बनाएं, जिसमें टेक्स्ट 'long text' वाला एक पैराग्राफ हो, और इसे App में इनपुट के बाद रखें।

कंपोनेंट Text में लाइन console.log('text render'); जोड़ें। सुनिश्चित करें कि इनपुट में वर्ण दर्ज करते समय कंपोनेंट Text हर बार पुनः रेंडर होता है।

और अब कंपोनेंट Text को memo में लपेटें। सुनिश्चित करें, कि इनपुट में वर्ण दर्ज करते समय कंपोनेंट Text बार-बार पुनः रेंडर नहीं होता है।