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

சுத்தமான React குறியீட்டை (code) எழுதுவதற்குச் சிறந்த state மேலாண்மை அவசியம். தவறான state முறைகள் பிழைகளுக்கும் (bugs) சிக்கலான குறியீடுகளுக்கும் வழிவகுக்கும்.

இந்த நான்கு பொதுவான தவறுகளைத் தவிர்க்கவும்:

  1. தொடர்புடைய தரவுகளைக் குழுவாக்கவும் (Group related data)

ஒன்றாக மாறும் மதிப்புகளுக்குத் தனித்தனி state hooks-களை உருவாக்க வேண்டாம்.

இதற்குப் பதிலாக:

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

ஒரு object-ஐப் பயன்படுத்தவும்:

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

இது உங்கள் மாற்றங்களை (updates) சுத்தமாகவும் ஒழுங்காகவும் வைத்திருக்கும்.

  1. முரண்பட்ட states-களைத் தவிர்க்கவும் (Avoid conflicting states)

ஒரே செயல்முறையை ஒன்றுக்கும் மேற்பட்ட booleans கண்காணிக்கும்போது, பிழைகள் உருவாகின்றன.

இதற்குப் பதிலாக:

  • isSubmitting
  • isSubmit

ஒரு ஒற்றை status string-ஐப் பயன்படுத்தவும்:

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

இந்த ஒற்றை உண்மை ஆதாரத்திலிருந்து (single source of truth) உங்கள் UI தர்க்கத்தைப் (logic) பெறவும்.

  1. தேவையற்ற state-களை நீக்கவும் (Remove redundant state)

ஒரு மதிப்பை render செய்யும் போதே கணக்கிட முடியும் என்றால், அதை state-ல் வைக்க வேண்டாம்.

இவற்றைச் சேமிக்க வேண்டாம்:

  • firstName
  • lastName
  • fullName

முதல் மற்றும் கடைசிப் பெயர்களை மட்டும் சேமிக்கவும். முழுப் பெயரைத் தேவைப்படும்போது கணக்கிடுங்கள்:

  • const fullName = firstName + " " + lastName;

மேலும், props-களை ஒருபோதும் state-ல் சேமிக்க வேண்டாம். State ஒருமுறை மட்டுமே தொடக்க நிலையை (initialize) அடையும். உங்கள் prop மாறினால், state புதுப்பிக்கப்படாது. நேரடியாக prop-ஐப் பயன்படுத்தவும்.

  1. தரவுகளைத் திரும்பத் திரும்பச் சேமிப்பதைத் தவிர்க்கவும் (Stop duplicating data)

ஒரே தரவை இரண்டு வெவ்வேறு state-களில் சேமிக்க வேண்டாம்.

உங்களிடம் பணிகளின் பட்டியல் (list of tasks) மற்றும் தேர்ந்தெடுக்கப்பட்ட பணி (selected task) இருந்தால், முழு task object-ஐயும் இரண்டு இடங்களிலும் சேமிக்க வேண்டாம். இது மாற்றங்களைச் செய்வதைக் கடினமாக்கும்.

அதற்குப் பதிலாக:

  • பணிகளின் பட்டியலைச் சேமிக்கவும்.
  • selectedTaskId-ஐ மட்டும் சேமிக்கவும்.
  • render செய்யும் போது அந்த ID-யைப் பயன்படுத்திப் பட்டியலிலிருந்து பணியைக் கண்டறியவும்.

இது உங்கள் தேர்ந்தெடுக்கப்பட்ட பணி எப்போதும் உங்கள் பட்டியலில் உள்ள சமீபத்திய தரவோடு ஒத்துப்போவதை உறுதி செய்கிறது.

மூலம்: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9