𝗥𝗲𝗮𝗰𝘁 𝗝𝘀 𝗨𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗔𝗻𝘁𝗶𝗽𝗮𝘁𝘁𝗲𝗿𝗻𝘀
સ્વચ્છ React કોડ લખવા માટે સ્માર્ટ સ્ટેટ મેનેજમેન્ટની જરૂર છે. ખરાબ સ્ટેટ પેટર્ન બગ્સ અને જટિલ કોડ તરફ દોરી જાય છે.
આ ચાર સામાન્ય ભૂલો ટાળો:
- સંબંધિત ડેટાને ગ્રુપ કરો
જે કિંમતો સાથે બદલાય છે તેના માટે અલગ-અલગ સ્ટેટ હૂક્સ (state hooks) બનાવશો નહીં.
આના બદલે:
- const [x, setX] = useState(0);
- const [y, setY] = useState(0);
એક ઓબ્જેક્ટનો ઉપયોગ કરો:
- const [position, setPosition] = useState({ x: 0, y: 0 });
આ તમારા અપડેટ્સને સ્વચ્છ અને વ્યવસ્થિત રાખશે.
- વિરોધાભાસી સ્ટેટ્સ (conflicting states) ટાળો
જ્યારે એક જ પ્રક્રિયાને ટ્રેક કરવા માટે એકથી વધુ બુલિયન્સ (booleans) નો ઉપયોગ થાય છે, ત્યારે તમે બગ્સ પેદા કરો છો.
આ રાખવાને બદલે:
- isSubmitting
- isSubmit
એક સિંગલ સ્ટેટસ સ્ટ્રિંગનો ઉપયોગ કરો:
- status: 'TYPING'
- status: 'SUBMITTING'
- status: 'SUBMITTED'
તમારી UI લોજિક આ સિંગલ સોર્સ ઓફ ટ્રુથ (single source of truth) પરથી મેળવો.
- બિનજરૂરી (redundant) સ્ટેટ દૂર કરો
જો તમે રેન્ડરિંગ (render) દરમિયાન કોઈ કિંમતની ગણતરી કરી શકતા હોવ, તો તેને સ્ટેટમાં ન મૂકો.
આ સ્ટોર કરશો નહીં:
- firstName
- lastName
- fullName
ફક્ત પ્રથમ અને છેલ્લા નામ સ્ટોર કરો. ફૂલ નેમની ગણતરી તરત જ કરો:
- const fullName = firstName + " " + lastName;
સાથે જ, ક્યારેય props ને સ્ટેટમાં સ્ટોર કરશો નહીં. સ્ટેટ ફક્ત એક જ વાર ઇનિશિયલાઇઝ થાય છે. જો તમારો prop બદલાય, તો સ્ટેટ અપડેટ થશે નહીં. સીધો prop નો ઉપયોગ કરો.
- ડેટા ડુપ્લીકેટ કરવાનું બંધ કરો
એક જ ડેટાને બે અલગ-અલગ સ્ટેટ્સમાં સ્ટોર કરશો નહીં.
જો તમારી પાસે કાર્યોની (tasks) યાદી અને એક પસંદ કરેલું કાર્ય (selected task) હોય, તો બંને જગ્યાએ આખું task object સ્ટોર કરશો નહીં. આનાથી અપડેટ્સ મુશ્કેલ બને છે.
તેના બદલે:
- કાર્યોની યાદી (list of tasks) સ્ટોર કરો.
- ફક્ત selectedTaskId સ્ટોર કરો.
- રેન્ડરિંગ દરમિયાન તે ID નો ઉપયોગ કરીને યાદીમાંથી કાર્ય શોધો.
આ સુનિશ્ચિત કરે છે કે તમારું પસંદ કરેલું કાર્ય હંમેશા તમારી યાદીના લેટેસ્ટ ડેટા સાથે મેળ ખાય છે.
Source: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9