React JS useState کے غلط طریقے (Antipatterns)

صاف ستھرا React کوڈ لکھنے کے لیے بہتر اسٹیٹ مینجمنٹ (state management) کی ضرورت ہوتی ہے۔ اسٹیٹ کے غلط طریقے بگ (bugs) اور پیچیدہ کوڈ کا باعث بنتے ہیں۔

ان چار عام غلطیوں سے بچیں:

  1. متعلقہ ڈیٹا کو گروپ کریں

ان ویلیوز کے لیے الگ الگ اسٹیٹ ہکس (state hooks) نہ بنائیں جو ایک ساتھ تبدیل ہوتی ہیں۔

اس کے بجائے:

  • const [x, setX] = useState(0);
  • const [y, setY] = useState(0);

ایک آبجیکٹ (object) استعمال کریں:

  • const [position, setPosition] = useState({ x: 0, y: 0 });

یہ آپ کی اپ ڈیٹس کو صاف ستھرا اور منظم رکھتا ہے۔

  1. متصادم اسٹیٹس (conflicting states) سے بچیں

جب متعدد بولینز (booleans) ایک ہی عمل کو ٹریک کرتے ہیں، تو آپ بگ پیدا کرتے ہیں۔

ان کے استعمال کے بجائے:

  • isSubmitting
  • isSubmit

ایک واحد اسٹیٹس اسٹرنگ (status string) استعمال کریں:

  • status: 'TYPING'
  • status: 'SUBMITTING'
  • status: 'SUBMITTED'

اپنی UI لاجک کو اسی واحد ذریعے (single source of truth) سے حاصل کریں۔

  1. غیر ضروری اسٹیٹ کو ختم کریں

اگر آپ رینڈر (render) کے دوران کسی ویلیو کا حساب لگا سکتے ہیں، تو اسے اسٹیٹ میں نہ رکھیں۔

ان چیزوں کو اسٹور نہ کریں:

  • firstName
  • lastName
  • fullName

صرف پہلا اور آخری نام اسٹور کریں۔ مکمل نام کا حساب فوری طور پر (on the fly) لگائیں:

  • const fullName = firstName + " " + lastName;

اس کے علاوہ، کبھی بھی props کو اسٹیٹ میں اسٹور نہ کریں۔ اسٹیٹ صرف ایک بار انیشلائز (initialize) ہوتی ہے۔ اگر آپ کا prop تبدیل ہوتا ہے، تو اسٹیٹ اپ ڈیٹ نہیں ہوگی۔ براہ راست prop کا استعمال کریں۔

  1. ڈیٹا کی نقل (duplication) سے بچیں

ایک ہی ڈیٹا کو دو مختلف اسٹیٹس میں اسٹور نہ کریں۔

اگر آپ کے پاس کاموں (tasks) کی ایک فہرست اور ایک منتخب کردہ کام ہے، تو پورے ٹاسک آبجیکٹ کو دونوں جگہوں پر اسٹور نہ کریں۔ اس سے اپ ڈیٹس مشکل ہو جاتی ہیں۔

اس کے بجائے:

  • ٹاسک کی فہرست اسٹور کریں۔
  • صرف selectedTaskId اسٹور کریں۔
  • رینڈر کے دوران اس ID کو استعمال کرتے ہوئے فہرست سے ٹاسک تلاش کریں۔

یہ یقینی بناتا ہے کہ آپ کا منتخب کردہ ٹاسک ہمیشہ آپ کی فہرست کے تازہ ترین ڈیٹا سے مطابقت رکھتا ہو۔

Source: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9