React JS useState Antipatterns

स्वच्छ React कोड लिहिण्यासाठी स्मार्ट स्टेट मॅनेजमेंट (state management) आवश्यक आहे. चुकीच्या स्टेट पॅटर्नमुळे बग्स (bugs) आणि गुंतागुंतीचा कोड तयार होतो.

या चार सामान्य चुका टाळा:

  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. परस्परविरोधी स्टेट्स (conflicting states) टाळा

जेव्हा एकाच प्रक्रियेचा मागोवा घेण्यासाठी अनेक booleans वापरले जातात, तेव्हा बग्स निर्माण होतात.

च्या ऐवजी:

  • isSubmitting
  • isSubmit

एक सिंगल स्टेटस स्ट्रिंग वापरा:

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

तुमच्या UI लॉजिकसाठी या सिंगल सोर्स ऑफ ट्रुथचा (single source of truth) वापर करा.

  1. अनावश्यक स्टेट (redundant state) काढून टाका

जर तुम्ही रेंडरिंग (render) दरम्यान एखादी व्हॅल्यू कॅल्क्युलेट करू शकत असाल, तर ती स्टेटमध्ये ठेवू नका.

स्टोअर करू नका:

  • firstName
  • lastName
  • fullName

फक्त पहिले आणि आडनाव स्टोअर करा. पूर्ण नाव (full name) रेंडरिंग दरम्यानच कॅल्क्युलेट करा:

  • const fullName = firstName + " " + lastName;

तसेच, props कधीही स्टेटमध्ये स्टोअर करू नका. स्टेट फक्त एकदाच इनिशियलाइज (initialize) होते. जर तुमचा prop बदलला, तर स्टेट अपडेट होणार नाही. त्याऐवजी थेट prop वापरा.

  1. डेटा डुप्लिकेट करणे थांबवा

एकच डेटा दोन वेगवेगळ्या स्टेट्समध्ये स्टोअर करू नका.

जर तुमच्याकडे कामांची यादी (list of tasks) आणि एक निवडलेले काम (selected task) असेल, तर दोन्ही ठिकाणी संपूर्ण टास्क ऑब्जेक्ट स्टोअर करू नका. यामुळे अपडेट्स करणे कठीण होते.

त्याऐवजी:

  • कामांची यादी स्टोअर करा.
  • फक्त selectedTaskId स्टोअर करा.
  • रेंडरिंग दरम्यान त्या ID चा वापर करून यादीतून टास्क शोधा.

यामुळे तुमचे निवडलेले काम नेहमी तुमच्या यादीतील नवीनतम डेटाशी जुळते याची खात्री मिळते.

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