الگوهای نادرست (Antipatterns) در استفاده از useState در React Js

نوشتن کد تمیز در React نیازمند مدیریت هوشمندانه وضعیت (state) است. الگوهای نادرست در مدیریت وضعیت منجر به بروز باگ‌ها و پیچیدگی کد می‌شوند.

از این چهار اشتباه رایج دوری کنید:

  1. گروه‌بندی داده‌های مرتبط

برای مقادیری که با هم تغییر می‌کنند، هوک‌های state جداگانه ایجاد نکنید.

به جای:

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

از یک شیء (object) استفاده کنید:

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

این کار باعث می‌شود به‌روزرسانی‌های شما تمیز و سازمان‌یافته باقی بماند.

  1. اجتناب از وضعیت‌های متناقض

وقتی چندین مقدار boolean یک فرآیند واحد را دنبال می‌کنند، باگ ایجاد می‌کنید.

به جای داشتن:

  • isSubmitting
  • isSubmit

از یک رشته وضعیت (status string) واحد استفاده کنید:

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

منطق UI خود را از این «منبع واحد حقیقت» (single source of truth) استخراج کنید.

  1. حذف وضعیت‌های اضافی (Redundant)

اگر می‌توانید مقداری را در حین رندر (render) محاسبه کنید، آن را در state قرار ندهید.

این موارد را ذخیره نکنید:

  • firstName
  • lastName
  • fullName

فقط نام و نام خانوادگی را ذخیره کنید. نام کامل را در لحظه محاسبه کنید:

  • const fullName = firstName + " " + lastName;

همچنین، هرگز props را در state ذخیره نکنید. state فقط یک بار مقداردهی اولیه می‌شود. اگر prop شما تغییر کند، state به‌روز نمی‌شود. مستقیماً از خودِ prop استفاده کنید.

  1. توقف تکرار داده‌ها

یک داده را در دو state متفاوت ذخیره نکنید.

اگر لیستی از وظایف (tasks) و یک وظیفه انتخاب‌شده دارید، کل شیء وظیفه را در هر دو مکان ذخیره نکنید. این کار به‌روزرسانی‌ها را دشوار می‌کند.

در عوض:

  • لیست وظایف را ذخیره کنید.
  • فقط selectedTaskId را ذخیره کنید.
  • در حین رندر، وظیفه مورد نظر را با استفاده از آن ID از لیست پیدا کنید.

این کار تضمین می‌کند که وظیفه انتخاب‌شده شما همیشه با آخرین داده‌های موجود در لیست مطابقت داشته باشد.

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