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

క్లీన్ React కోడ్ రాయడానికి తెలివైన స్టేట్ మేనేజ్‌మెంట్ అవసరం. తప్పుడు స్టేట్ ప్యాటర్న్‌లు బగ్స్‌కు మరియు సంక్లిష్టమైన కోడ్‌కు దారితీస్తాయి.

ఈ నాలుగు సాధారణ తప్పులను నివారించండి:

  1. సంబంధిత డేటాను సమూహపరచండి (Group related data)

కలిసి మారే విలువల కోసం విడివిడి స్టేట్ హుక్స్‌ను సృష్టించకండి.

దీనికి బదులుగా:

  • 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: 'TYPING'
  • status: 'SUBMITTING'
  • status: 'SUBMITTED'

మీ UI లాజిక్‌ను ఈ ఏకైక 'single source of truth' నుండి రూపొందించండి.

  1. అనవసరమైన స్టేట్‌ను తొలగించండి (Remove redundant state)

మీరు రెండరింగ్ (render) సమయంలో ఒక విలువను లెక్కించగలిగితే, దానిని స్టేట్‌లో ఉంచకండి.

వీటిని నిల్వ చేయకండి:

  • firstName
  • lastName
  • fullName

కేవలం మొదటి పేరు మరియు చివరి పేరును మాత్రమే నిల్వ చేయండి. పూర్తి పేరును అక్కడికక్కడే (on the fly) లెక్కించండి:

  • const fullName = firstName + " " + lastName;

అలాగే, ప్రాప్స్‌ను (props) ఎప్పుడూ స్టేట్‌లో నిల్వ చేయకండి. స్టేట్ ఒకసారి మాత్రమే ప్రారంభమవుతుంది (initializes). మీ ప్రాప్ మారితే, స్టేట్ అప్‌డేట్ కాదు. ప్రాప్‌ను నేరుగా ఉపయోగించండి.

  1. డేటాను డూప్లికేట్ చేయడం ఆపండి (Stop duplicating data)

ఒకే డేటాను రెండు వేర్వేరు స్టేట్‌లలో నిల్వ చేయకండి.

మీ వద్ద టాస్క్‌ల జాబితా మరియు ఎంపిక చేసిన టాస్క్ ఉన్నప్పుడు, పూర్తి టాస్క్ ఆబ్జెక్ట్‌ను రెండు చోట్లా నిల్వ చేయకండి. ఇది అప్‌డేట్‌లను కష్టతరం చేస్తుంది.

దీనికి బదులుగా:

  • టాస్క్‌ల జాబితాను నిల్వ చేయండి.
  • కేవలం selectedTaskId ని మాత్రమే నిల్వ చేయండి.
  • రెండరింగ్ సమయంలో ఆ IDని ఉపయోగించి జాబితా నుండి టాస్క్‌ను కనుగొనండి.

దీనివల్ల మీ ఎంపిక చేసిన టాస్క్ ఎల్లప్పుడూ మీ జాబితాలోని తాజా డేటాతో సరిపోలుతుందని నిర్ధారించబడుతుంది.

మూలం: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9