React Hook തത്വങ്ങൾ

എല്ലാ കാര്യങ്ങൾക്കും useEffect ഉപയോഗിക്കുന്നത് നിർത്തുക. പല ഡെവലപ്പർമാരും ഈ ഹുക്ക് (hook) തെറ്റായ രീതിയിൽ ഉപയോഗിക്കുന്നു. ഇത് ബഗുകൾ (bugs) ഉണ്ടാക്കുകയും കോഡ് വായിക്കാൻ പ്രയാസകരമാക്കുകയും ചെയ്യുന്നു.

useEffect ഉപയോഗം പരിമിതപ്പെടുത്തുക.

ഒരു പേജിൽ ഒരു useEffect മാത്രം ഉപയോഗിക്കാൻ ശ്രമിക്കുക. ഒരേ സ്റ്റേറ്റിനായി (state) ഒന്നിലധികം ഹുക്കുകൾ ഉപയോഗിക്കുന്നത് ആശയക്കുഴപ്പമുണ്ടാക്കും. ഏത് ഹുക്ക് ഏത് സ്റ്റേറ്റ് ആണ് അപ്‌ഡേറ്റ് ചെയ്യുന്നത് എന്ന് തിരിച്ചറിയാൻ നിങ്ങൾക്ക് പ്രയാസമായിരിക്കും.

യൂസർ ഇവന്റുകൾക്കായി (user events) useEffect ഉപയോഗിക്കുന്നത് നിർത്തുക.

ക്ലിക്കുകൾക്കോ (clicks) ടാപ്പുകൾക്കോ (taps) വേണ്ടി useEffect ഉപയോഗിക്കരുത്. പകരം ഇവന്റ് ഹാൻഡ്‌ലറുകൾ (event handlers) ഉപയോഗിക്കുക.

നിങ്ങൾ അറിഞ്ഞിരിക്കേണ്ട ഇവന്റ് തരങ്ങൾ:

ക്ലിക്കുകൾ പോലുള്ള യൂസർ ആക്ഷനുകൾ useEffect-ൽ ഉൾപ്പെടുത്തേണ്ടതല്ല. ഇത്തരം ആക്ഷനുകൾക്കായി നേരിട്ടുള്ള ഇവന്റ് ഹാൻഡ്‌ലറുകൾ ഉപയോഗിക്കുക.

പ്രോപ്‌സ് (props) ഉപയോഗിച്ച് കംപോണന്റുകളെ വിഭജിക്കുക.

ലോജിക് മാറ്റാൻ ഒരു ബൂളിയൻ പ്രോപ് (boolean prop) ഉപയോഗിക്കുന്നുണ്ടെങ്കിൽ, നിങ്ങളുടെ കംപോണന്റിനെ വിഭജിക്കുക. ഡാറ്റ ക്രിയേറ്റ് ചെയ്യുന്നതും അപ്‌ഡേറ്റ് ചെയ്യുന്നതും ഒരേ കംപോണന്റ് ഉപയോഗിച്ച് ചെയ്യാതിരിക്കുക.

ധാരാളം "if" സ്റ്റേറ്റ്‌മെന്റുകളുള്ള ഒരു കംപോണന്റ് വളരെ വലുതാകാൻ സാധ്യതയുണ്ട്. ഇത് ആപ്പ് മെയിന്റൈൻ ചെയ്യുന്നത് പ്രയാസകരമാക്കും.

ചെറിയ കംപോണന്റുകൾ ടെസ്റ്റ് ചെയ്യാൻ എളുപ്പമാണ്. അവ വേഗത്തിൽ പ്രവർത്തിക്കുന്നു, കൂടാതെ കോഡ് വൃത്തിയുള്ളതാക്കി നിലനിർത്താനും സഹായിക്കുന്നു.

Source: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31