𝗗𝗼𝗻’𝘁 𝗠𝗶𝘀𝘁𝗮𝗸𝗲 𝗗𝗮𝘁𝗮 𝗦𝗵𝗮𝗽𝗲 𝗳𝗼𝗿 𝗦𝘁𝗮𝘁𝗲 𝗦𝗵𝗮𝗽𝗲
જ્યારે તમે React ફોર્મ બનાવો છો, ત્યારે તમે ઘણીવાર બધું જ એક મોટા સ્ટેટ ઓબ્જેક્ટ (state object) માં ગ્રુપ કરી દો છો.
તમે તમારા UI માં એડ્રેસ (Address) સેક્શન જુઓ છો. તમે તમારા સ્ટેટમાં એક એડ્રેસ ઓબ્જેક્ટ બનાવો છો. તે વ્યવસ્થિત લાગે છે. તે સ્વચ્છ લાગે છે.
આ એક જાળ છે.
સમસ્યા React ની નથી. સમસ્યા તમારા સ્ટેટના શેપ (shape) ની છે.
ફોર્મ એ સ્થિર (static) ડેટા નથી. તે ઇન્ટરેક્ટિવ સિસ્ટમ્સ છે. વપરાશકર્તાઓ ફોર્મમાં સેક્શન મુજબ ફેરફાર કરતા નથી. તેઓ ફિલ્ડ મુજબ (field by field) ફેરફાર કરે છે.
નેસ્ટેડ સ્ટેટ (nested state) તમારા પ્રોજેક્ટને કેવી રીતે નુકસાન પહોંચાડે છે:
- અપડેટ્સ ભારે બને છે. એક શહેરનું નામ બદલવા માટે, તમારે ઇમ્યુટેબિલિટી (immutability) જાળવી રાખવા માટે શહેર, એડ્રેસ અને ટોપ-લેવલ ફોર્મ ઓબ્જેક્ટ ફરીથી બનાવવો પડે છે.
- જટિલતા વધે છે. જેમ જેમ ફોર્મ વધતું જાય છે, તેમ તેમ તમારા વેલિડેશન (validation) અને રેન્ડરિંગ લોજિકને મેનેજ કરવું મુશ્કેલ બનતું જાય છે.
- રી-રેન્ડર્સ (Re-renders) વધે છે. એક નેસ્ટેડ વેલ્યુ બદલવાથી નવા ઓબ્જેક્ટ રેફરન્સ બને છે. આ તમારા સમગ્ર કમ્પોનન્ટ ટ્રી (component tree) માં બિનજરૂરી અપડેટ્સ ટ્રિગર કરી શકે છે.
- માનસિક બોજ વધે છે. તમે વપરાશકર્તા વિશે વિચારવાનું બંધ કરી દો છો અને ઓબ્જેક્ટ પાથ (object paths) વિશે વિચારવાનું શરૂ કરો છો.
નાના ફોર્મમાં આ સમસ્યા બહુ નથી પડતી. પરંતુ પ્રોડક્ટ ફોર્મમાં આવું નથી.
પ્રોડક્શન ફોર્મને વેલિડેશન, ઓટોસેવ અને કન્ડિશનલ લોજિકની જરૂર હોય છે. જો તમે આ બધું ઊંડા નેસ્ટેડ ઓબ્જેક્ટ પર બનાવશો, તો દરેક નવું ફીચર ખર્ચાળ (વધારે જટિલ) લાગશે.
ઉકેલ એ છે કે ડેટા કેવો દેખાય છે તેના બદલે ડેટા કેવી રીતે બદલાય છે તેના આધારે સ્ટેટ ડિઝાઇન કરો.
ફ્લેટર સ્ટેટ શેપ (flatter state shape) નીચેના ફાયદા આપે છે:
- ઝડપી અપડેટ્સ. એક સિંગલ વેલ્યુ બદલવા માટે તમારે ઓછો કોડ લખવો પડે છે.
- સરળ ડીબગિંગ (debugging). અપડેટ્સ લોકલ અને અનુમાનિત રહે છે.
- બહેતર કમ્પોનન્ટ બાઉન્ડ્રીઝ (component boundaries). તમે વિશાળ ઓબ્જેક્ટ્સને બદલે ડેટાના નાના ટુકડા પાસ કરી શકો છો.
બધું જ અંધાધૂંધ ફ્લેટ ન કરો. જો ડેટા ભાગ્યે જ બદલાતો હોય અને હંમેશા સાથે જ બદલાતો હોય, તો નેસ્ટિંગ ઠીક છે. પરંતુ તમારા ફોર્મના એ ભાગોને નેસ્ટ ન કરો જે સતત બદલાતા રહે છે.
કોડ લખતા પહેલા તમારી જાતને આ પ્રશ્નો પૂછો:
- કયા ફિલ્ડ્સ સૌથી વધુ વારંવાર બદલાય છે?
- કયા સેક્શનને સ્વતંત્ર વેલિડેશનની જરૂર છે?
- કયા અપડેટ્સ બાકીના UI થી અલગ રહેવા જોઈએ?
જો એક ફિલ્ડ અપડેટ કરવું એ ફેરફાર કરતા પણ વધુ મુશ્કેલ લાગે, તો તમારી સ્ટેટ સ્ટ્રક્ચર (state structure) એ સમસ્યા છે.
તમારા સ્ટેટને તમારા UI મુજબ મોડેલ કરવાનું બંધ કરો. તેને તમારા વપરાશકર્તાના વર્તન (user's behavior) મુજબ મોડેલ કરવાનું શરૂ કરો.