𝗥𝗲𝗮𝗰𝘁 𝗝𝘀 𝗨𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗔𝗻𝘁𝗶𝗽𝗮𝘁𝘁𝗲𝗿𝗻𝘀

വൃത്തിയുള്ള React കോഡ് എഴുതുന്നതിന് മികച്ച സ്റ്റേറ്റ് മാനേജ്‌മെന്റ് ആവശ്യമാണ്. മോശം സ്റ്റേറ്റ് പാറ്റേണുകൾ ബഗുകൾക്കും സങ്കീർണ്ണമായ കോഡിനും കാരണമാകുന്നു.

ഈ നാല് സാധാരണ തെറ്റുകൾ ഒഴിവാക്കുക:

  1. ബന്ധപ്പെട്ട ഡാറ്റകൾ ഗ്രൂപ്പ് ചെയ്യുക (Group related data)

ഒരേസമയം മാറുന്ന മൂല്യങ്ങൾക്കായി (values) പ്രത്യേകം സ്റ്റേറ്റ് ഹുക്കുകൾ (state hooks) ഉണ്ടാക്കരുത്.

ഇതിന് പകരം:

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

ഒരു ഒബ്‌ജക്റ്റ് ഉപയോഗിക്കുക:

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

ഇത് നിങ്ങളുടെ അപ്‌ഡേറ്റുകൾ വൃത്തിയുള്ളതും ക്രമബദ്ധവുമാക്കുന്നു.

  1. പരസ്പരവിരുദ്ധമായ സ്റ്റേറ്റുകൾ ഒഴിവാക്കുക (Avoid conflicting states)

ഒന്നിലധികം ബൂലിയനുകൾ (booleans) ഒരേ പ്രക്രിയയെ ട്രാക്ക് ചെയ്യുമ്പോൾ, അത് ബഗുകൾക്ക് കാരണമാകും.

ഇതിനായി ഉപയോഗിക്കുന്നതിന് പകരം:

  • isSubmitting
  • isSubmit

ഒരു സിംഗിൾ സ്റ്റാറ്റസ് സ്ട്രിംഗ് (status string) ഉപയോഗിക്കുക:

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

ഈ ഏകീകൃത സ്രോതസ്സിൽ (single source of truth) നിന്ന് നിങ്ങളുടെ UI ലോജിക് രൂപപ്പെടുത്തുക.

  1. അനാവശ്യമായ സ്റ്റേറ്റുകൾ ഒഴിവാക്കുക (Remove redundant state)

റെൻഡറിംഗ് സമയത്ത് (during render) ഒരു മൂല്യം കണക്കാക്കാൻ കഴിയുമെങ്കിൽ, അത് സ്റ്റേറ്റിൽ ഉൾപ്പെടുത്തരുത്.

ഇവ സ്റ്റോർ ചെയ്യരുത്:

  • firstName
  • lastName
  • fullName

ആദ്യ പേരും അവസാന പേരും മാത്രം സ്റ്റോർ ചെയ്യുക. ഫുൾ നെയിം (full name) റെൻഡറിംഗ് സമയത്ത് തന്നെ കണക്കാക്കുക:

  • const fullName = firstName + " " + lastName;

കൂടാതെ, പ്രോപ്പുകൾ (props) ഒരിക്കലും സ്റ്റേറ്റിൽ സ്റ്റോർ ചെയ്യരുത്. സ്റ്റേറ്റ് ഒരിക്കൽ മാത്രമേ ഇനീഷ്യലൈസ് ചെയ്യുകയുള്ളൂ. നിങ്ങളുടെ പ്രോപ്പ് മാറിയാലും സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ആകില്ല. അതിനാൽ പ്രോപ്പ് നേരിട്ട് ഉപയോഗിക്കുക.

  1. ഡാറ്റ ഡ്യൂപ്ലിക്കേറ്റ് ചെയ്യുന്നത് ഒഴിവാക്കുക (Stop duplicating data)

ഒരേ ഡാറ്റ രണ്ട് വ്യത്യസ്ത സ്റ്റേറ്റുകളിൽ സ്റ്റോർ ചെയ്യരുത്.

നിങ്ങളുടെ പക്കൽ ടാസ്ക്കുകളുടെ ഒരു ലിസ്റ്റും തിരഞ്ഞെടുത്ത ഒരു ടാസ്ക്കും ഉണ്ടെങ്കിൽ, ടാസ്ക് ഒബ്‌ജക്റ്റ് മുഴുവനായി രണ്ട് സ്ഥലത്തും സ്റ്റോർ ചെയ്യരുത്. ഇത് അപ്‌ഡേറ്റുകൾ പ്രയാസകരമാക്കും.

ഇതിന് പകരം:

  • ടാസ്ക്കുകളുടെ ലിസ്റ്റ് സ്റ്റോർ ചെയ്യുക.
  • തിരഞ്ഞെടുത്ത selectedTaskId മാത്രം സ്റ്റോർ ചെയ്യുക.
  • റെൻഡറിംഗ് സമയത്ത് ആ ID ഉപയോഗിച്ച് ലിസ്റ്റിൽ നിന്ന് ടാസ്ക് കണ്ടെത്തുക.

ഇത് നിങ്ങളുടെ തിരഞ്ഞെടുത്ത ടാസ്ക് എപ്പോഴും ലിസ്റ്റിലെ ഏറ്റവും പുതിയ ഡാറ്റയുമായി പൊരുത്തപ്പെടുന്നു എന്ന് ഉറപ്പാക്കുന്നു.

സ്രോതസ്സ്: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9