useCallback — کلیدی تصورات، React میں فنکشن میموائزیشن ہک

React میں useCallback کیا ہے

useCallback React 16.8 میں شامل کردہ ایک ہک ہے جو فنکشن کو میموائز کرتا ہے: انحصار تبدیل ہونے تک وہی ریفرنس لوٹاتا ہے۔ useCallback کے بغیر، کمپونینٹ کے اندر ہر فنکشن اعلان ہر رینڈر پر ایک نیا فنکشن آبجیکٹ بناتا ہے۔ پریمیٹیو کے لیے یہ غیر محسوس ہے، لیکن React.memo کے ذریعے بہتر بنائے گئے چائلڈ کمپونینٹس کو یہ کال بیک پاس کرتے وقت، ہر نیا ریفرنس چائلڈ کمپونینٹ کے دوبارہ رینڈر کا سبب بنتا ہے۔

نحوی طور پر، useCallback فنکشن کے لیے useMemo کے برابر ہے: useCallback(fn, deps) useMemo(() => fn, deps) کے لیے شارٹ ہینڈ ہے۔ React میموائزڈ فنکشن کو فائبر نوڈ کے اندرونی ذخیرہ میں رکھتا ہے اور ہر رینڈر پر انحصار کا موازنہ کرتا ہے۔ اگر انحصار تبدیل نہیں ہوئے (ہر آئٹم کے لیے Object.is)، تو پچھلا فنکشن لوٹایا جاتا ہے۔

React Documentation — useCallback (2025) کے مطابق، ہر فنکشن کو useCallback میں لپیٹنا نہیں چاہیے۔ ہک کی اپنی قیمت ہے: ہک کو کال کرنا، انحصار کا موازنہ کرنا اور انحصار کی صف کے لیے میموری مختص کرنا۔ اگر کمپونینٹ سادہ ہے اور اس میں React.memo کے ساتھ گہرے درخت نہیں ہیں، تو useCallback صرف ایپلیکیشن کو سست کرے گا۔ بہتر کاری قابل پیمائش ہونی چاہیے، وجدانی نہیں۔

import { useCallback } from 'react';

function Parent() {
    const [count, setCount] = useState(0);

    // مستحکم ریفرنس — deps تبدیل ہونے تک وہی فنکشن
    const handleClick = useCallback(() => {
        setCount(prev => prev + 1);
    }, []);

    return <Child onClick={handleClick} />;
}

فنکشن میموائزیشن کیسے کام کرتی ہے

useCallback میں میموائزیشن فنکشن کال کے نتیجے کو کیش کرنے پر مبنی ہے۔ React پہلے رینڈر کے وقت بنائے گئے بندش (closure) کو محفوظ رکھتا ہے اور بعد کے رینڈرز میں اسے لوٹاتا ہے جب تک انحصار تبدیل نہ ہوں۔ فائبر نوڈ کے اندر، ہر useCallback کال ہکس کی منسلک فہرست میں ایک نوڈ بناتی ہے، جہاں پچھلے انحصار اور میموائزڈ قدر محفوظ ہوتی ہے۔

انحصار کا موازنہ سختی سے Object.is کے ذریعے کیا جاتا ہے — اشیاء یا صفوں کی گہری جانچ کے بغیر ایک سطحی موازنہ۔ اگر انحصار کوئی شے یا صف ہے، تو ہر رینڈر پر نیا ریفرنس تبدیلی سمجھا جائے گا۔ لہٰذا، انحصار کی صف میں پریمیٹیو قدریں یا مستحکم ریفرنس (مثلاً useRef یا useMemo سے) ہونی چاہئیں۔

React Core Team — Optimization Guide (2024) کے مطابق، میموائزیشن کی لاگت میں تین اجزاء شامل ہیں: ہر رینڈر پر انحصار کی صف مختص کرنا، Object.is کے ذریعے عناصر کو دہرانا اور موازنہ کرنا، اور دوبارہ تخلیق پر کوڑا کرکٹ جمع کرنے کا ممکنہ اضافی بوجھ۔ سینکڑوں useCallback ریپر والے کمپونینٹ کے لیے، یہ نمایاں ہو سکتا ہے — لہٰذا ہک کے استعمال میں انتخابیت اہم ہے۔

useCallback اور کارکردگی

ایک وسیع پیمانے پر پھیلی ہوئی غلط فہمی ہے کہ useCallback خود بخود کارکردگی کو بہتر بناتا ہے۔ حقیقت میں، تنہائی میں (React.memo کے بغیر)، useCallback انحصار موازنہ کی لاگت کی وجہ سے ایپلیکیشن کو تھوڑا سست بھی کر دیتا ہے۔ ہک صرف تین مناظر میں حقیقی فائدہ پہنچاتا ہے: React.memo کمپونینٹس کے دوبارہ رینڈر کو روکنا، useEffect میں کال بیک کو مستحکم کرنا اور ریفرنس برابری پر منحصر کسٹم ہکس میں کال بیک پاس کرنا۔

قاعدہ سادہ ہے: جب تک آپ React DevTools Profiler کے ذریعے کارکردگی کا مسئلہ دریافت نہیں کرتے — useCallback استعمال نہ کریں۔ React ٹیم نے بارہا زور دیا ہے کہ قبل از وقت بہتر کاری تمام برائیوں کی جڑ ہے۔ پہلے میموائزیشن کے بغیر صاف کوڈ لکھیں، پیمائش کریں، پروفائلر میں رکاوٹ تلاش کریں اور اس کے بعد ہی useCallback وہاں شامل کریں جہاں واقعی ضرورت ہو۔

// قابل پیمائش بہتر کاری: Child کو React.memo میں لپٹا گیا
const Child = React.memo(({ onClick }) => {
    console.log('Child دوبارہ رینڈر ہوا');
    return <button onClick={onClick}>Click</button>;
});

function Parent() {
    const handleClick = useCallback(() => {
        console.log('کلک کیا گیا');
    }, []);
    return <Child onClick={handleClick} />;
}

Dan Abramov — Before You memo() (2024) کے مطابق، اوپن سورس پروجیکٹس میں useCallback کے 90% سے زیادہ استعمال بے کار ہیں۔ ڈویلپر اثر کو ناپے بغیر "ممکنہ طور پر" ہر فنکشن کو لپیٹتے ہیں۔ متبادل: اگر چائلڈ کمپونینٹ بھاری ہے اور اس کا دوبارہ رینڈر مہنگا ہے — React.memo + useCallback جائز ہے۔ اگر چائلڈ کمپونینٹ ہلکا ہے — دوبارہ رینڈر انحصار موازنہ سے سستا ہے۔

useCallback کب استعمال کریں

پہلا منظر React.memo ہے۔ اگر چائلڈ کمپونینٹ React.memo میں لپٹا ہے اور ایک prop کے طور پر کال بیک فنکشن وصول کرتا ہے، تو useCallback کے بغیر چائلڈ کمپونینٹ ہر پیرنٹ رینڈر پر دوبارہ رینڈر کرے گا، چاہے اس کا اپنا ڈیٹا تبدیل نہ ہوا ہو۔ useCallback ریفرنس کو مستحکم کرتا ہے، جس سے React.memo دوبارہ رینڈر کو صحیح طریقے سے چھوڑ سکتا ہے۔

دوسرا منظر انحصار میں کال بیک کے ساتھ useEffect ہے۔ اگر کوئی فنکشن useEffect انحصار کی صف میں پاس کیا جاتا ہے، تو ہر نیا ریفرنس اثر کو دوبارہ شروع کرے گا۔ useCallback یقینی بناتا ہے کہ ریفرنس مستحکم ہے، اور اثر صرف اس وقت چلتا ہے جب اصل ڈیٹا تبدیل ہوتا ہے، ہر رینڈر پر نہیں۔ یہ خاص طور پر سبسکرپشنز اور درخواستوں کے لیے اہم ہے۔

• React.memo بچے — کال بیک پاس کرتے وقت میموائزڈ چائلڈ کمپونینٹس کے دوبارہ رینڈر کو روکتا ہے۔
• useEffect انحصار — اثر کے انحصار کی صف میں فنکشن کو مستحکم کرتا ہے، غیر ضروری دوبارہ شروع ہونے سے روکتا ہے۔
• کسٹم ہکس — اگر ہک کال بیک قبول کرتا ہے اور اس کی ریفرنس برابری پر منحصر ہے، تو useCallback لازمی ہے۔
• سیاق و سباق کی قدر — اگر سیاق و سباق کی قدر میں کوئی فنکشن پاس کیا جاتا ہے، تو useCallback ریفرنس کو مستحکم کرتا ہے۔

// مستحکم useEffect انحصار کے لیے useCallback
const fetchData = useCallback(async (id) => {
    const res = await fetch(`/api/${id}`);
    setData(res.data);
}, []); // مستحکم ریفرنس، کبھی دوبارہ نہیں بنتا

useEffect(() => {
    fetchData(props.id);
}, [props.id, fetchData]); // اثر صرف اس وقت چلتا ہے جب props.id تبدیل ہو

useCallback بمقابلہ useMemo

useCallback اور useMemo کے درمیان بنیادی فرق یہ ہے کہ ہر ایک کیا میموائز کرتا ہے۔ useCallback ایک فنکشن کو میموائز کرتا ہے: useCallback(fn, deps) fn لوٹاتا ہے (وہی یا پچھلا ورژن)۔ useMemo فنکشن کال کے نتیجے کو میموائز کرتا ہے: useMemo(() => computeExpensive(a, b), [a, b]) حساب شدہ قدر لوٹاتا ہے، فنکشن نہیں۔

تکنیکی طور پر، useCallback useMemo پر نحوی شکر ہے: useCallback(fn, deps) useMemo(() => fn, deps) کے برابر ہے۔ یہ نحو صرف پڑھنے کی اہلیت کے لیے موجود ہے — تاکہ ڈویلپر واضح طور پر دیکھ سکے کہ ایک فنکشن میموائز کیا جا رہا ہے، قدر نہیں۔ useCallback اور فنکشن کے ساتھ useMemo کے درمیان کارکردگی میں کوئی فرق نہیں ہے — وہ ایک جیسا کوڈ تیار کرتے ہیں۔

// یہ برابر ہیں:
const handleClick = useCallback(() => doSomething(a, b), [a, b]);
const handleClick = useMemo(() => () => doSomething(a, b), [a, b]);

useCallback کے ساتھ عام غلطیاں

سب سے عام غلطی چائلڈ کمپونینٹس پر React.memo کے بغیر تمام فنکشنز کو useCallback میں بے معنی لپیٹنا ہے۔ اگر چائلڈ کمپونینٹ React.memo میں لپٹا نہیں ہے، تو یہ ہر پیرنٹ رینڈر پر پھر بھی دوبارہ رینڈر کرے گا، خواہ کال بیک ریفرنس تبدیل ہو یا نہ ہو۔ React.memo کے بغیر useCallback — فائدہ کے بغیر لاگت ہے۔

• React.memo کے بغیر useCallback — چائلڈ کمپونینٹ پھر بھی دوبارہ رینڈر کرتا ہے؛ بہتر کاری بے معنی ہے۔
• بھولے ہوئے انحصار — اگر کال بیک کے اندر استعمال کردہ متغیر deps میں نہیں ہے، تو کال بیک میں پرانا بندش (stale closure) ہے۔
• ضرورت سے زیادہ میموائزیشن — console.log کے ساتھ معمولی onClick سمیت ہر فنکشن کو لپیٹنا۔
• انحصار میں اشیاء اور صفیں — ہر رینڈر پر نیا ریفرنس تبدیلی سمجھا جاتا ہے، میموائزیشن بیکار ہے۔

// ❌ بیکار: بچے پر React.memo نہیں
const handle = useCallback(() => doStuff(), []);
<Child onClick={handle} />; // Child React.memo کے بغیر پھر بھی دوبارہ رینڈر کرتا ہے

// ❌ پرانا بندش: انحصار غائب
const handle = useCallback(() => {
    console.log(count); // count ہمیشہ 0 ہے — پرانا بندش!
}, []);

// ✅ درست: انحصار شامل کریں
const handle = useCallback(() => {
    console.log(count);
}, [count]);

useCallback میں پرانے بندش (stale closure) کا مسئلہ استعمال شدہ تمام متغیرات کو انحصار کی صف میں شامل کرکے حل کیا جاتا ہے۔ exhaustive-deps کے ساتھ eslint-plugin-react-hooks خود بخود چیک کرتا ہے کہ کال بیک باڈی کے تمام متغیرات صف میں موجود ہیں۔ اگر کال بیک setState استعمال کرتا ہے، جو رینڈرز کے درمیان تبدیل نہیں ہوتا، تو اسے محفوظ طریقے سے deps میں شامل کیا جا سکتا ہے — React setState کے استحکام کی ضمانت دیتا ہے۔