React useCallback Common Mistakes Aur Solutions (in Hindi)

✨ Quick Answer: React useCallback use karte waqt ye common mistakes na karein! Janein inke best solutions aur apne React app ki performance ko maximize karein.

क्या आपका React app भी बिना किसी वजह के बार-बार re-render हो रहा है? आपने performance सुधारने के लिए useCallback Hook तो लगा दिया, लेकिन फिर भी performance बेहतर होने के बजाय और खराब हो गई? घबराइए मत, आप अकेले नहीं हैं! ReactJS ecosystem में नए और यहाँ तक कि अनुभवी डेवलपर्स भी इस Hook का गलत इस्तेमाल कर बैठते हैं। आज हम और आप, दो पुराने दोस्तों की तरह बैठकर, इस Hook के सारे राज़ खोलेंगे और जानेंगे कि आखिर सही तरीका क्या है।

React useCallback क्या है और यह कैसे काम करता है?

दोस्तों, इस बात को गहराई से समझते हैं। जब भी आपका ReactJS component re-render होता है, तो उसके अंदर लिखे गए सारे functions फिर से नए सिरे से (re-created) बनते हैं। JavaScript में, functions ऑब्जेक्ट्स होते हैं, और दो ऑब्जेक्ट्स कभी भी आपस में बराबर नहीं होते, भले ही उनका कोड बिल्कुल एक जैसा हो। इसे हम Referential Equality कहते हैं।

जब आप एक Parent Component में कोई function बनाते हैं और उसे Prop के रूप में Child Component में भेजते हैं, तो हर render पर उस function का एक नया reference बनता है। React को लगता है कि Prop बदल गया है, और वह Child Component को दोबारा render कर देता है। इसी समस्या को हल करने के लिए हम useCallback का इस्तेमाल करते हैं। यह Hook हमारे function को memory में cache (memoize) कर लेता है और जब तक dependencies नहीं बदलतीं, तब तक पुराना reference ही वापस करता है।

React useCallback Common Mistakes और उनके Solutions क्या हैं?

चलिए, अब सीधे मुद्दे पर आते हैं और देखते हैं कि डेवलपर्स अक्सर कहाँ गलती करते हैं और उन्हें कैसे सही किया जाए। इन गलतियों को समझकर आप अपने App की performance को आसमान पर ले जा सकते हैं।

Mistake 1: React.memo के बिना useCallback का इस्तेमाल करना

यह सबसे बड़ी और सबसे आम गलती है। डेवलपर्स को लगता है कि सिर्फ useCallback का उपयोग कर लेने से उनका App super-fast हो जाएगा। ध्यान देने वाली बात ये है कि अगर आपका Child Component React.memo से wrapped नहीं है, तो Parent Component के render होने पर Child Component भी दोबारा render होगा, चाहे आपने Prop में भेजा गया function memoize किया हो या नहीं!

गलत तरीका (The Incorrect Way):

import React, { useState, useCallback } from 'react';

// Child Component जो memoized नहीं है
const EasyButton = ({ onClick, children }) => {
  console.log(`${children} render ho raha hai!`);
  return (
    <button onClick={onClick} style={{ padding: '10px 20px', margin: '10px' }}>
      {children}
    </button>
  );
};

export const ParentComponentOne = () => {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);

  // function memoize तो है, लेकिन इसका कोई फायदा नहीं होगा
  const incrementCount = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc' }}>
      <h3>Count: {count}</h3>
      <EasyButton onClick={incrementCount}>Increment</EasyButton>
      <button onClick={() => setOtherState(!otherState)}>
        Toggle State ({String(otherState)})
      </button>
    </div>
  );
};

समस्या: जब आप 'Toggle State' बटन पर क्लिक करेंगे, तो EasyButton भी फिर से render होगा, भले ही उसका onClick prop बदला न हो। ऐसा इसलिए क्योंकि EasyButton एक साधारण functional component है जो हर parent render पर re-evaluate होता है।

सही तरीका (The Solution):

इस error को fix करने के लिए आपको Child Component को React.memo के अंदर wrap करना होगा। चलिए देखते हैं कैसे:

import React, { useState, useCallback } from 'react';

// Child Component को React.memo से wrap किया गया है
const MemoizedButton = React.memo(({ onClick, children }) => {
  console.log(`${children} render ho raha hai! (Optimized)`);
  return (
    <button onClick={onClick} style={{ padding: '10px 20px', margin: '10px', background: '#06b6d4', color: '#fff', border: 'none', borderRadius: '5px' }}>
      {children}
    </button>
  );
});

MemoizedButton.displayName = 'MemoizedButton';

export const CorrectParentComponentOne = () => {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);

  // अब यह सही तरीके से काम करेगा
  const incrementCount = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return (
    <div style={{ padding: '20px', border: '1px solid #06b6d4', borderRadius: '10px' }}>
      <h3>Count: {count}</h3>
      <MemoizedButton onClick={incrementCount}>Increment</MemoizedButton>
      <button onClick={() => setOtherState(!otherState)} style={{ padding: '10px 20px' }}>
        Toggle State ({String(otherState)})
      </button>
    </div>
  );
};

अब जब आप 'Toggle State' पर क्लिक करेंगे, तो MemoizedButton का console.log प्रिंट नहीं होगा, क्योंकि उसका props dynamic रूप से समान (referentially identical) है।

Mistake 2: Stale Closures और Empty Dependency Array की गलती

यह गलती सबसे खतरनाक है क्योंकि इससे performance की समस्या नहीं, बल्कि functional logical bugs पैदा होते हैं। जब आप dependency array को खाली ([]) छोड़ देते हैं, तो React में चलने वाला Closure पुरानी state values को 'lock' कर लेता है। इसे 'Stale Closure' कहते हैं।

गलत तरीका (The Incorrect Way):

import React, { useState, useCallback } from 'react';

export const StaleClosureComponent = () => {
  const [text, setText] = useState('');
  const [messages, setMessages] = useState([]);

  // Empty dependency array के कारण text हमेशा empty string ही रहेगा
  const addMessage = useCallback(() => {
    setMessages((prevMessages) => [...prevMessages, text]);
  }, []); // यहाँ [text] होना चाहिए था!

  return (
    <div style={{ padding: '20px' }}>
      <h3>Stale Closure Example</h3>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
        placeholder="Type something..."
        style={{ padding: '8px', marginRight: '10px' }}
      />
      <button onClick={addMessage} style={{ padding: '8px 16px' }}>Add Message</button>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>Message: "{msg}"</li>
        ))}
      </ul>
    </div>
  );
};

समस्या: आप इनपुट बॉक्स में चाहे जो भी लिखें, 'Add Message' दबाने पर हमेशा एक खाली स्ट्रिंग (empty string) ही लिस्ट में जोड़ी जाएगी। ऐसा इसलिए हुआ क्योंकि useCallback ने पहले render के समय की text की value (जो कि '' थी) को cache कर लिया था।

सही तरीका (The Solution):

इसे सुधारने के दो तरीके हैं। पहला यह कि dependency array में उस variable को डालें, या फिर functional updates का सही इस्तेमाल करें।

import React, { useState, useCallback } from 'react';

export const CorrectClosureComponent = () => {
  const [text, setText] = useState('');
  const [messages, setMessages] = useState([]);

  // Solution: Dependency Array में 'text' को शामिल किया
  const addMessage = useCallback(() => {
    if (text.trim() === '') return;
    setMessages((prevMessages) => [...prevMessages, text]);
    setText(''); // input clear करने के लिए
  }, [text]); // 'text' बदलने पर function re-create होगा

  return (
    <div style={{ padding: '20px', border: '1px solid #10b981', borderRadius: '10px' }}>
      <h3>Correct Closure Example</h3>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
        placeholder="Type something..."
        style={{ padding: '8px', marginRight: '10px' }}
      />
      <button onClick={addMessage} style={{ padding: '8px 16px', backgroundColor: '#10b981', color: '#fff', border: 'none', borderRadius: '4px' }}>
        Add Message
      </button>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>Message: "{msg}"</li>
        ))}
      </ul>
    </div>
  );
};

Mistake 3: useCallback का हर जगह (Over-optimization) इस्तेमाल करना

कुछ डेवलपर्स सोचते हैं कि "चलो सुरक्षित रहते हैं, हर function को ही useCallback से wrap कर देते हैं!" दोस्तों, यह एक बहुत बड़ी भूल है।

useCallback मुफ्त में नहीं आता। इसके अपने overheads हैं:

• हर render पर dependency array की तुलना (Shallow Comparison) की जाती है।
• React को memory में function और उसके dependency references को बनाए रखना पड़ता है।
• यदि आप साधारण inline calculations या click handlers को wrap कर रहे हैं जो किसी child component में prop बनकर नहीं जा रहे, तो आप performance बढ़ाने के बजाय उसे धीमा कर रहे हैं।

useCallback vs useMemo में क्या अंतर है?

अक्सर नए डेवलपर्स इन दोनों Hooks के बीच भ्रमित हो जाते हैं। चलिए इस तालिका (Table) के माध्यम से दोनों का अंतर साफ़ और स्पष्ट रूप से समझते हैं:

React App Performance Optimize करने के Step-by-Step Best Practices

यदि आप अपने React components की performance को बेहतरीन बनाना चाहते हैं, तो इन स्टेप्स का पालन करें:

1. First Measure, Then Optimize: पहले React Profiler का उपयोग करके यह जांचें कि क्या वास्तव में कोई component बेवजह re-render होकर Performance bottleneck बना रहा है। बिना मापे optimization करना समय की बर्बादी है।
2. Use React.memo with Care: सिर्फ उन्हीं components को memoize करें जो बहुत बड़े हैं या जो बहुत बार re-render होते हैं। छोटे-मोटे components को render होने देना ही बेहतर होता है।
3. Correct Dependencies: ESLint React Hooks plugin का इस्तेमाल करें। यह आपको खुद ब खुद चेतावनी देगा कि आपकी dependency array में कौन सी value गायब है।
4. Functional State Updates: जब भी संभव हो, useState के functional updater pattern (जैसे setCount(prev => prev + 1)) का इस्तेमाल करें ताकि dependency array में state variable को डालने से बचा जा सके।

तो दोस्तों, हमने आज विस्तार से सीखा कि useCallback का सही इस्तेमाल कैसे किया जाता है और किन सामान्य गलतियों से बचना चाहिए। आशा है कि अब आप अपने प्रोजेक्ट्स में इन गलतियों को नहीं दोहराएंगे। कोडिंग करते रहिए, सीखते रहिए और कोई भी सवाल हो तो बेझिझक पूछिए!