useMemo: یہ کیا ہے، حسابات کو کیش کرنا اور React Native

React Native میں useMemo کیا ہے

useMemo — React معیاری لائبریری کا ایک ہک ہے، جو اضافی پیکجوں کے بغیر React Native میں دستیاب ہے۔ یہ منتقل کردہ فنکشن کے ذریعے واپس کردہ قدر کو میموائز کرتا ہے اور اگلے رینڈرز پر اس قدر کو دوبارہ استعمال کرتا ہے جب تک کہ اری میں مخصوص انحصار تبدیل نہ ہوں۔

ہک کا نام memoization سے ماخوذ ہے — ایک اصلاحی تکنیک جس میں ایک مہنگے فنکشن کا نتیجہ کیش میں محفوظ کیا جاتا ہے۔ ایک ہی دلائل کے ساتھ بعد میں کال کرنے پر، دوبارہ شمار کرنے کے بجائے کیش شدہ قدر واپس کی جاتی ہے۔

React Native کے سیاق و سباق میں، آرکیٹیکچرل خصوصیات کی وجہ سے میموائزیشن خاص طور پر اہم ہے۔ ہر کمپوننٹ دوبارہ رینڈر JavaScript — مقنی برج کے ذریعے ڈیٹا بھیجتا ہے، جس میں وقت لگتا ہے۔ اگر کسی کمپوننٹ میں مہنگے حسابات (فہرست فلٹرنگ، ترتیب، فارمیٹنگ) ہوں تو، ہر دوبارہ رینڈر انہیں دہرائے گا، JS تھریڈ کو روکے گا اور فریم ڈراپ کا سبب بنے گا۔

React Native Performance Docs, 2024 کے مطابق، رکاوٹ اکثر مقنی کمپوننٹس کا رینڈرنگ نہیں، بلکہ رینڈرز کے درمیان JavaScript منطق کا عمل ہے۔ useMemo بالکل اس مسئلے کو حل کرتا ہے۔

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

useMemo ایک فنکشن اور ایک انحصار اری لیتا ہے، ایک میموائزڈ قدر واپس کرتا ہے۔ React پچھلی قدر اور انحصار اری کو محفوظ کرتا ہے۔ ہر رینڈر پر، React Object.is کا استعمال کرتے ہوئے موجودہ انحصار کا پچھلے انحصار سے موازنہ کرتا ہے۔ اگر کم از کم ایک انحصار تبدیل ہوا تو، فنکشن دوبارہ عمل میں آتا ہے اور نتیجہ محفوظ ہو جاتا ہے۔

سینٹیکس اور دلائل پاس کرنا

useMemo کا سگنیچر ویب اور React Native میں یکساں ہے۔ پہلا دلیل ایک بے پیرامیٹر فنکشن ہے جو میموائز کی جانے والی قدر واپس کرتا ہے۔ دوسرا انحصار اری ہے، جس کی تبدیلی پر قدر دوبارہ شمار کی جائے گی۔

import React, { useMemo } from 'react';

const sortedList = useMemo(() => {
    return items.sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

اس مثال میں، sortedList صرف اس وقت دوبارہ شمار ہوتا ہے جب items اری کا حوالہ تبدیل ہو۔ اگر اری کا مواد تبدیل ہوا لیکن حوالہ وہی رہا (میوٹیشن)، تو useMemo تبدیلیوں کا پتہ نہیں لگائے گا — یہ ایک اہم حد ہے۔

Object.is کے ذریعے انحصار کا موازنہ

React انحصار کے موازنہ کے لیے Object.is الگورتھم استعمال کرتا ہے، جو سخت مساوات === کی طرح کام کرتا ہے لیکن NaN کو صحیح طریقے سے ہینڈل کرتا ہے (+0 اور -0 کو مختلف سمجھا جاتا ہے)۔ اس کا مطلب ہے کہ قدیمی اقسام (سٹرنگز، نمبرز، بولینز) کے لیے موازنہ قدر کے لحاظ سے کام کرتا ہے، جبکہ آبجیکٹ اور اریوں کے لیے — حوالہ کے لحاظ سے۔

// Object.is({'a': 1}, {'a': 1}) -> false (different refs)
// Object.is(42, 42) -> true (primitive by value)
// Object.is(NaN, NaN) -> true (correct handling of NaN)

اس میکانزم کو سمجھنا بہت اہم ہے: اگر آپ ہر رینڈر پر انحصار میں ایک نیا آبجیکٹ پاس کرتے ہیں، تو میموائزیشن بیکار ہوگی کیونکہ انحصار ہر بار تبدیل شدہ سمجھے جائیں گے۔

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

useMemo تین منظرناموں میں جائز ہے: مہنگے حسابات، چائلڈ کمپوننٹس کو مستحکم props پاس کرنا، اور آبجیکٹ کی حوالہ جاتی شناخت کو برقرار رکھنا۔ React Native میں، موبائل ایپلیکیشنز کے آرکیٹیکچر کی وجہ سے یہ تینوں منظرنامے باقاعدگی سے پیش آتے ہیں۔

مہنگے حسابات

اگر کوئی کمپوننٹ بڑی ڈیٹا اریوں (فلٹرنگ، ترتیب، گروپ بندی) یا وسائل پر مبنی ریاضیاتی کارروائیوں پر کارروائی کرتا ہے، تو useMemo ہر دوبارہ رینڈر پر ان حسابات کو دہرانے سے روکتا ہے۔ موبائل ایپلیکیشنز میں، ایک عام مثال فہرست میں ظاہر کرنے سے پہلے API سے ڈیٹا کو فارمیٹ کرنا ہے۔

چائلڈ کمپوننٹس کے لیے مستحکم Props

جب کوئی چائلڈ کمپوننٹ React.memo میں لپٹا ہوتا ہے، تو یہ صرف اس وقت دوبارہ رینڈر ہوتا ہے جب اس کے props تبدیل ہوں۔ اگر پیرنٹ کے اندر useMemo کے بغیر ایک prop آبجیکٹ بنایا جاتا ہے، تو پیرنٹ کے ہر رینڈر پر ایک نیا حوالہ بنے گا، اور چائلڈ کمپوننٹ غیر ضروری طور پر دوبارہ رینڈر ہوگا، جس سے React.memo کا فائدہ ختم ہو جائے گا۔

اسٹائل حسابات کا میموائزیشن

React Native میں، اسٹائل اکثر props پر منحصر ہوتے ہیں — مثال کے طور پر، کسی عنصر کی چوڑائی اسکرین سائز کی بنیاد پر شمار کی جاتی ہے۔ useMemo ان پٹ پیرامیٹرز کے تبدیل ہونے پر ہی اس طرح کے متحرک اسٹائل کو شمار کرنے کی اجازت دیتا ہے۔

useMemo کب بیکار ہے

useMemo کوئی عالمگیر اصلاحی آلہ نہیں ہے۔ کئی منظرناموں میں، یہ کوئی فائدہ نہیں دیتا اور انحصار کو ذخیرہ کرنے اور موازنہ کرنے کے اضافی بوجھ کی وجہ سے کارکردگی کو خراب بھی کر سکتا ہے۔ React Native میں، جہاں میموری کا ہر بائٹ اہم ہے، اثر کو ناپے بغیر useMemo کو آنکھ بند کر کے استعمال کرنا ایک اینٹی پیٹرن ہے۔

ہک تین اہم صورتوں میں کوئی فائدہ نہیں دیتا۔ پہلا، اگر حساب معمولی ہے (سادہ جمع، سٹرنگ جوڑ)، تو useMemo کی لاگت خود حساب کی لاگت سے زیادہ ہوتی ہے۔ دوسرا، اگر انحصار ہر رینڈر پر تبدیل ہوتے ہیں — فنکشن پھر بھی عمل میں آئے گا، اور میموائزیشن صرف اضافی کام بڑھاتی ہے۔ تیسرا، اگر کمپوننٹ شاذ و نادر ہی رینڈر ہوتا ہے، تو کیش ذخیرہ کرنے کا اضافی بوجھ جائز نہیں ہے۔

Kent C. Dodds, 2023 کے مطابق، useMemo شامل کرنے سے پہلے، React DevTools Profiler یا React Native میں بلٹ ان پرفارمنس مانیٹر استعمال کرکے مسئلے کو ناپیں۔ اگر کسی کمپوننٹ کا دوبارہ رینڈر 1 ms سے کم وقت لیتا ہے — تو میموائزیشن ضروری نہیں ہے۔

• معمولی حسابات — جمع، جوڑ، سادہ ternary آپریشنز
• نایاب دوبارہ رینڈر — جامد اسکرینیں جو ایک بار رینڈر ہوتی ہیں
• بدلتے انحصار — اگر انحصار ہر رینڈر پر نئے ہوں، میموائزیشن بیکار ہے
• قدیمی اقدار — نمبرز اور سٹرنگز میموائزیشن کی ضرورت نہیں رکھتے، یہ ویسے بھی سستے ہیں

useMemo اور useCallback: موازنہ

useMemo اور useCallback — React کے دو میموائزیشن ہکس ہیں جو اکثر الجھ جاتے ہیں۔ فرق اس میں ہے کہ وہ کیا محفوظ رکھتے ہیں: useMemo ایک فنکشن کے عمل کا نتیجہ (کوئی بھی قدر) واپس کرتا ہے، جبکہ useCallback خود فنکشن واپس کرتا ہے۔ دونوں انحصار اری لیتے ہیں، لیکن سینٹیکس مختلف ہے۔

عملی طور پر، useCallback ان صورتوں کے لیے useMemo پر سینٹیکٹک شوگر ہے جب آپ کو کسی فنکشن کو میموائز کرنے کی ضرورت ہو۔ React Native میں، دونوں ہکس یکساں طور پر استعمال ہوتے ہیں: useMemo — ڈیٹا کے لیے (فارمیٹ شدہ متن، شمار کردہ اسٹائل)، useCallback — ایونٹ ہینڈلرز کے لیے (onPress, onChangeText)۔

useMemo کے ساتھ عملی مثالیں

React Native ایپلیکیشنز میں useMemo کے استعمال کے دو حقیقی منظرنامے دیکھتے ہیں۔ پہلا ہے تلاش کے سوال کے ذریعے رابطوں کی فہرست کو فلٹر کرنا، دوسرا ہے اسکرین سائز کی بنیاد پر متحرک اسٹائل کا حساب لگانا۔

مثال 1: فہرست میں تلاش اور فلٹرنگ

اس مثال میں، useMemo ایک بڑی رابطوں کی فہرست کے ہر رینڈر پر بار بار فلٹرنگ کو روکتا ہے اگر نہ تو تلاش کا سوال اور نہ ہی ماخذ ڈیٹا تبدیل ہوا ہو۔

const ContactList = ({ contacts, searchQuery }) => {
    const filteredContacts = useMemo(() => {
        if (!searchQuery.trim()) return contacts;
        const query = searchQuery.toLowerCase();
        return contacts.filter((c) =>
            c.name.toLowerCase().includes(query) ||
            c.phone.includes(query)
        );
    }, [contacts, searchQuery]);

    return (
        <FlatList
            data={filteredContacts}
            renderItem={renderContact}
            keyExtractor={(item) => item.id}
        />
    );
};

useMemo کے بغیر، فلٹرنگ ہر رینڈر پر عمل میں آئے گی، بشمول وہ رینڈر جو اینیمیشنز یا کمپوننٹ کے دوسرے حصوں میں حالت کی تبدیلیوں کی وجہ سے ہوتے ہیں۔ useMemo کے ساتھ، فلٹرنگ صرف اس وقت چلتی ہے جب contacts یا searchQuery تبدیل ہو۔

مثال 2: متحرک اسٹائل کا حساب

React Native میں، اسٹائل اکثر اسکرین کے طول و عرض یا کمپوننٹ props پر منحصر ہوتے ہیں۔ useMemo اس طرح کے اسٹائل آبجیکٹ کو ایک بار شمار کرنے اور انحصار تبدیل ہونے تک دوبارہ استعمال کرنے کی اجازت دیتا ہے۔

const Card = ({ title, isSelected }) => {
    const cardStyle = useMemo(() => ({
        backgroundColor: isSelected ? '#e3f2fd' : '#ffffff',
        borderWidth: isSelected ? 2 : 1,
        padding: 16,
    }), [isSelected]);

    return (
        <View style={cardStyle}>
            <Text>{title}</Text>
        </View>
    );
};

یہ طریقہ اس بات کو یقینی بناتا ہے کہ cardStyle آبجیکٹ isSelected کے تبدیل ہونے تک مستحکم (اسی حوالے سے) رہے۔ اگر Card React.memo میں لپٹا ہے، تو یہ پیٹرن چائلڈ عناصر کے غیر ضروری دوبارہ رینڈر کو روکتا ہے۔