جب React "Re-render" کہتا ہے، تو اس کا مطلب تین چیزیں ہوتی ہیں

جب آپ setState کال کرتے ہیں، تو React صرف DOM کو اپ ڈیٹ نہیں کرتا۔ یہ ایک ترتیب میں تین الگ الگ مراحل (phases) چلاتا ہے۔ زیادہ تر ڈویلپرز ان مراحل میں الجھ جاتے ہیں۔ ان کے درمیان فرق کو سمجھنا آپ کو پرفارمنس کے مسائل حل کرنے میں مدد دیتا ہے۔

تین مراحل:

• Render: React آپ کے component فنکشن کو کال کرتا ہے۔ • Reconcile: React نئے آؤٹ پٹ کا پرانے آؤٹ پٹ سے موازنہ کرتا ہے۔ • Commit: React تبدیلیاں DOM پر لاگو کرتا ہے۔

  1. Render Phase

React آپ کا فنکشن چلاتا ہے۔ یہ موجودہ props کا استعمال کرتا ہے۔ فنکشن JSX واپس (return) کرتا ہے۔ یہ JSX محض JavaScript objects کی ایک فہرست ہے۔ لوگ اسے virtual DOM کہتے ہیں۔ یہ اصل DOM نہیں ہے۔ یہ اس بات کی وضاحت ہے کہ UI کیسا نظر آنا چاہیے۔ ابھی اسکرین پر کچھ بھی ظاہر نہیں ہوتا۔ یہ مرحلہ خالص ریاضی اور منطق (logic) پر مبنی ہے۔

  1. Reconcile Phase

React پرانی tree اور نئی tree کو اپنے پاس رکھتا ہے۔ یہ ان کے درمیان فرق تلاش کرتا ہے۔ اگر کسی element کی قسم (type) تبدیل ہو جائے، تو React پوری tree کو تبدیل کر دیتا ہے۔ اگر صرف props تبدیل ہوں، تو React انہیں اپ ڈیٹ کر دیتا ہے۔ یہ وہ جگہ ہے جہاں keys اہمیت رکھتی ہیں۔ Keys React کو فہرست میں موجود اشیاء کو ان کی پوزیشن کے بجائے ان کی شناخت (identity) سے ملانے میں مدد دیتی ہیں۔ یہ مرحلہ DOM کو اپ ڈیٹ کرنے کے لیے درکار کم سے کم اقدامات کی ایک فہرست تیار کرتا ہے۔

  1. Commit Phase

React تبدیلیوں کی فہرست لیتا ہے اور اصل DOM کو تبدیل کرتا ہے۔ یہ نئے nodes تخلیق کرتا ہے اور پرانے ختم کر دیتا ہے۔ یہی وہ وقت ہے جب صارفین اسکرین پر تبدیلیاں دیکھتے ہیں۔ اس کے بعد، براؤزر اسکرین کو پینٹ (paint) کرتا ہے۔ پھر، useEffect چلتا ہے۔

عام غلط فہمیاں:

• ایک re-render ہمیشہ DOM کو تبدیل نہیں کرتا۔ اگر آؤٹ پٹ وہی ہے، تو React commit phase میں کچھ نہیں کرتا۔ • React.memo فنکشن کال کو چھوڑ دیتا ہے، لیکن یہ DOM اپ ڈیٹ کو نہیں چھوڑتا۔ • Props re-renders کا باعث نہیں بنتے۔ ایک parent کا re-render ہونا child کو ٹرگر کرتا ہے۔ Prop کی تبدیلی محض ایک نتیجہ ہے۔

پرفارمنس کو کیسے بہتر بنائیں:

اگر آپ کا فنکشن سست ہے، تو آپ کو Render کا مسئلہ ہے۔ بھاری کام کو فنکشن سے باہر نکال دیں یا memoization کا استعمال کریں۔

اگر React بہت بڑی فہرستوں کو دوبارہ بناتا ہے، تو آپ کو Reconcile کا مسئلہ ہے۔ اپنی keys چیک کریں۔

اگر DOM بہت زیادہ اپ ڈیٹ ہو رہا ہے، تو آپ کو Commit کا مسئلہ ہے۔ virtualization کا استعمال کریں یا اپنے ڈھانچے (structure) کو تبدیل کریں۔

React 19 اور React Compiler اب آپ کے لیے اس کام کا بڑا حصہ خود سنبھال لیتے ہیں۔ لیکن ان مراحل کو جاننا آپ کو بہتر طریقے سے ڈیبگ (debug) کرنے میں مدد دیتا ہے۔

Source: https://dev.to/dip_032d2fe1959e1990ddbb1/when-react-says-re-render-it-actually-means-three-things-11d7