useRef — یہ کیا ہے، حوالہ ہک اور React میں DOM کے ساتھ کام

React میں useRef کیا ہے

useRef ایک ہک ہے جو React 16.8 میں شامل کیا گیا تھا جو ایک واحد .current پراپرٹی کے ساتھ ایک قابل تبدیلی ref آبجیکٹ لوٹاتا ہے۔ ابتدائی قدر کمپوننٹ ماؤنٹ ہونے پر .current کو تفویض کی جاتی ہے۔ عام متغیر سے بنیادی فرق یہ ہے کہ ref آبجیکٹ دوبارہ رینڈر سے بچ جاتا ہے: بعد کے رینڈرز میں React ref کو دوبارہ نہیں بناتا بلکہ وہی آبجیکٹ لوٹاتا ہے۔

اندرونی طور پر، useRef وہی طریقہ کار استعمال کرتا ہے جو useState اور useEffect — فائبر نوڈ پر ہکس کی لنکڈ لسٹ۔ تاہم، useState کے برعکس، React ref آبجیکٹ کی تبدیلیوں کو ٹریک نہیں کرتا، اپ ڈیٹس کو قطار میں نہیں لگاتا اور دوبارہ رینڈر کا شیڈول نہیں بناتا۔ یہ useRef کو ایک انتہائی ہلکا ہک بناتا ہے جو بار بار تبدیلیوں پر بھی کارکردگی کو متاثر نہیں کرتا۔

React ٹیم — Hooks FAQ (2025) کے مطابق، useRef بنیادی طور پر ایک “ڈبہ” ہے جو قدر ذخیرہ کرتا ہے۔ نحوی شوگر: const ref = useRef(ابتدائی_قدر) const ref = { current: ابتدائی_قدر } کے برابر ہے، اس فرق کے ساتھ کہ React ضمانت دیتا ہے کہ ref آبجیکٹ ہر رینڈر پر وہی ہوگا۔ کوئی جادو نہیں — بس React کے زیر انتظام ایک مستحکم حوالہ۔

import { useRef } from 'react';

function Component() {
    const countRef = useRef(0);
    // countRef.current = 0 ابتدائی طور پر
    // countRef.current = 5 تبدیلی کے بعد
    // دوبارہ رینڈر نہیں ہوتا!
}

useRef کے ذریعے DOM عناصر تک رسائی

useRef کا سب سے عام استعمال DOM عنصر تک براہ راست رسائی حاصل کرنا ہے۔ React کمپوننٹ ماؤنٹ ہونے کے بعد elementRef.current کو DOM نوڈ کا حوالہ تفویض کرتا ہے۔ یہ ان پٹ فوکس کرنے، عنصر کے طول و عرض ناپنے، اینیمیشن لائبریریوں اور ان لائبریریوں کے ساتھ انضمام کے لیے ضروری ہے جو React رینڈرنگ استعمال نہیں کرتیں۔

React خود بخود DOM پر ref حوالہ جات کا انتظام کرتا ہے: ماؤنٹ ہونے پر حقیقی DOM نوڈ تفویض کرتا ہے، ان ماؤنٹ ہونے پر null کر دیتا ہے۔ یہ یقینی بناتا ہے کہ .current میں ہمیشہ تازہ ترین قدر ہو اور ہٹائے گئے عناصر کے معلق حوالہ جات کے ذریعے میموری لیک کو روکتا ہے۔ کسی دستی صفائی کی ضرورت نہیں۔

function AutoFocusInput() {
    const inputRef = useRef(null);

    useEffect(() => {
        // کمپوننٹ ماؤنٹ ہونے کے بعد ان پٹ فوکس کریں
        inputRef.current?.focus();
    }, []);

    return <input ref={inputRef} type="text" />;
}

React — Refs اور DOM دستاویزات (2025) کے مطابق، اعلانیہ آپریشنز — موڈل کھولنا/بند کرنا، مرئیت کا انتظام — کے لیے ref استعمال نہ کریں۔ ان مقاصد کے لیے state اور props موجود ہیں۔ Refs ان لازمی آپریشنز کے لیے ہیں جن کا اعلانیہ طور پر اظہار نہیں کیا جا سکتا: فوکس، متن کا انتخاب، تیسرے فریق کی لائبریریوں کے ساتھ انضمام۔

دوبارہ رینڈر کے بغیر قابل تبدیلی اقدار ذخیرہ کرنا

دوسرا سب سے اہم استعمال صوابدیدی اقدار کو ذخیرہ کرنا ہے جو رینڈرز کے درمیان برقرار رہنی چاہئیں لیکن جن کی تبدیلیاں دوبارہ رینڈر کو متحرک نہیں کرنی چاہئیں۔ عام مثالیں: ٹائمر شناخت کنندگان (setInterval/setTimeout)، درخواست منسوخی کے جھنڈے، موازنہ کے لیے پچھلی prop اقدار اور کوئی بھی ڈیٹا جو UI آؤٹ پٹ کو متاثر نہ کرے۔

یہ خاص طور پر useEffect میں مفید ہے: useRef ٹائمر شناخت کنندہ ذخیرہ کرتا ہے اور cleanup اسے صاف کرتا ہے۔ اگر timerId useState میں ذخیرہ کیا جاتا، تو ہر setTimerId کال ایک غیر ضروری دوبارہ رینڈر کا سبب بنتی جو نہ تو منطق کے لیے اور نہ ہی UI کے لیے درکار ہے۔ useRef اس مسئلے کو بغیر اوورہیڈ اور غیر ضروری دوبارہ رینڈر کے حل کرتا ہے۔

function Timer() {
    const intervalRef = useRef(null);

    const start = () => {
        intervalRef.current = setInterval(() => {
            console.log('ٹک');
        }, 1000);
    };

    const stop = () => {
        clearInterval(intervalRef.current);
    };

    useEffect(() => stop, []);

    return <><button onClick={start}>Start</button><button onClick={stop}>Stop</button></>;
}

useRef بمقابلہ useState: کب کیا استعمال کریں

بنیادی مخمصہ — useRef اور useState کے درمیان انتخاب — ایک سوال سے حل ہوتا ہے: “کیا قدر تبدیل ہونے پر دوبارہ رینڈر ضروری ہے؟” اگر ہاں — useState۔ اگر نہیں — useRef۔ useState کمپوننٹ آؤٹ پٹ کو متاثر کرنے والی حالت ذخیرہ کرتا ہے؛ useRef داخلی منطق کے لیے ضروری ڈیٹا ذخیرہ کرتا ہے لیکن UI کو متاثر نہیں کرتا۔

عملی طور پر، ڈویلپر اکثر بندش کے مسائل سے بچنے کے لیے کال بیک ذخیرہ کرنے کے لیے useRef استعمال کرتے ہیں۔ مثال کے طور پر، اگر useEffect کسی واقعہ کو سبسکرائب کرتا ہے اور کال بیک کو موجودہ state کی ضرورت ہے — کال بیک کو useRef میں ذخیرہ کریں۔ ہر رینڈر پر، ref.current کو ایک نئے فنکشن کے ساتھ اپ ڈیٹ کریں، اور اثر ہمیشہ دوبارہ سبسکرائب کیے بغیر تازہ کال بیک کو طلب کرے گا۔

ایک اینٹی پیٹرن ہے: JSX میں درکار ڈیٹا کے لیے useRef استعمال کرنا جس کی تبدیلیوں سے دوبارہ رینڈر نہیں ہونا چاہیے۔ یہ غیر مطابقت پذیری کا باعث بنتا ہے — UI پرانا ڈیٹا دکھاتا ہے جبکہ ref.current پہلے سے نیا ہے۔ اگر قدر UI میں ظاہر ہوتی ہے — useState استعمال کریں۔ اگر صرف داخلی طور پر استعمال ہوتی ہے — useRef۔

useEffect کے ساتھ useRef کا امتزاج

useRef + useEffect کا امتزاج پچھلی prop اقدار کو ٹریک کرنے کا معیاری پیٹرن ہے۔ پچھلی قدر کو ref میں ذخیرہ کریں، useEffect میں موجودہ قدر سے موازنہ کریں اور فرق کی بنیاد پر فیصلے کریں۔ یہ اینیمیشنز میں خاص طور پر مفید ہے جب آپ کو یہ جاننے کی ضرورت ہو کہ تبدیلی سے پہلے قدر کیا تھی۔

function PriceDisplay({ price }) {
    const prevPriceRef = useRef(price);

    useEffect(() => {
        const prevPrice = prevPriceRef.current;
        if (price > prevPrice) {
            animateUp();
        } else if (price < prevPrice) {
            animateDown();
        }
        prevPriceRef.current = price;
    }, [price]);

    return <span>${price}</span>;
}

React دستاویزات — Hooks FAQ (2025) کے مطابق، اس پیٹرن کو “پچھلی قدر کا پیٹرن” کہا جاتا ہے۔ یہ اس لیے کام کرتا ہے کیونکہ useRef قدر کو رینڈرز کے درمیان محفوظ رکھتا ہے، اور useEffect تبدیلیوں کے حتمی ہونے کے بعد عمل میں آتا ہے۔ پہلے DOM نئی قیمت کے ساتھ اپ ڈیٹ ہوتا ہے، پھر useEffect اس کا موازنہ پچھلی (جو ابھی ref میں ہے) سے کرتا ہے اور ref.current کو موجودہ قدر میں اپ ڈیٹ کرتا ہے۔

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

سب سے عام غلطی JSX کا حساب لگانے کے لیے رینڈر مرحلے میں ref.current پڑھنا ہے۔ چونکہ ref.current کو تبدیل کرنے سے دوبارہ رینڈر نہیں ہوتا، کمپوننٹ پرانی قدر استعمال کر سکتا ہے۔ اگر .current UI آؤٹ پٹ میں حصہ لیتا ہے — useState استعمال کریں۔ اگر آپ کو ref اور state کو مطابقت پذیر کرنے کی ضرورت ہے، تو ref سے state کو اپ ڈیٹ کرنے کے لیے useEffect استعمال کریں۔

• JSX میں Ref — رینڈر فنکشن کے اندر ref.current پڑھنا UI اور ڈیٹا کی غیر مطابقت پذیری کا باعث بنتا ہے۔
• useEffect انحصار کے طور پر Ref — ref.current انحصار کی صف میں نہیں ہونا چاہیے؛ React اس کی تبدیلیوں کو ٹریک نہیں کرتا۔
• بھولا ہوا null چیک — ان ماؤنٹ ہونے پر ref.current null ہو جاتا ہے؛ رسائی سے پہلے چیک کریں۔
• ref میں فنکشن ذخیرہ کرنا — اگر آپ تازہ کال بیک پیٹرن استعمال کر رہے ہیں تو ہر رینڈر پر ref.current اپ ڈیٹ کریں۔

// ❌ ڈسپلے کے لیے رینڈر کے دوران ref.current نہ پڑھیں
function BadComponent() {
    const valRef = useRef(0);
    return <p>{valRef.current}</p>; // تبدیلی پر اپ ڈیٹ نہیں ہوگا
}

// ✅ ڈسپلے کے لیے state، منطق کے لیے ref استعمال کریں
function GoodComponent() {
    const [val, setVal] = useState(0);
    const valRef = useRef(0);
    return <p>{val}</p>;
}

ایک اور عام غلطی کسی کمپوننٹ میں حالت ذخیرہ کرنے کے واحد طریقے کے طور پر useRef کا استعمال کرنا ہے جب ڈیٹا حقیقت میں UI کو متاثر کرتا ہے۔ ڈویلپر “غیر ضروری” دوبارہ رینڈر سے بچنے کے لیے useRef کا انتخاب کرتے ہیں، لیکن آخر کار انہیں ایک ایسا UI ملتا ہے جو اپ ڈیٹ نہیں ہوتا۔ صحیح طریقہ: UI ڈیٹا کے لیے useState استعمال کریں اور صرف معاون اقدار کے لیے useRef جو رینڈرنگ میں حصہ نہیں لیتیں۔