𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗣𝗿𝗶𝗻𝗰𝗶𝗽𝗹𝗲𝘀
બધી વસ્તુઓ માટે useEffect નો ઉપયોગ કરવાનું બંધ કરો. ઘણા ડેવલપર્સ આ hook નો દુરુપયોગ કરે છે. આનાથી bugs પેદા થાય છે અને કોડ વાંચવામાં મુશ્કેલ બને છે.
useEffect ના ઉપયોગને મર્યાદિત કરો.
દરેક પેજ દીઠ એક જ useEffect વાપરવાનો પ્રયાસ કરો. એક જ state માટે ઘણા બધા hooks વાપરવાથી મૂંઝવણ પેદા થાય છે. કયો hook કયા state ને અપડેટ કરે છે તેનો તમે ટ્રેક ગુમાવી શકો છો.
User events માટે useEffect નો ઉપયોગ કરવાનું બંધ કરો.
Clicks અથવા taps માટે useEffect નો ઉપયોગ કરશો નહીં. તેના બદલે event handlers નો ઉપયોગ કરો.
- ખરાબ: Click પછી state અપડેટ કરવા માટે useEffect નો ઉપયોગ કરવો.
- સારું: State અપડેટ કરવા માટે onClickBar જેવું function વાપરો.
તમારે જાણવા જેવી Event types:
- Page navigation અને initial renders.
- Network connection માં ફેરફાર.
- WebSocket અથવા real-time server updates.
Clicks જેવી user actions useEffect માં હોવી જોઈએ નહીં. આ actions માટે સીધા event handlers નો ઉપયોગ કરો.
Props દ્વારા components ને વિભાજિત કરો.
જો તમે logic બદલવા માટે boolean prop નો ઉપયોગ કરો છો, તો તમારા component ને વિભાજિત કરો. ડેટા બનાવવા અને અપડેટ કરવા બંનેનું કામ કરતો એક જ component ન બનાવો.
ઘણા બધા "if" statements ધરાવતો એક સિંગલ component ખૂબ મોટો બની જાય છે. આનાથી app ને maintain કરવી મુશ્કેલ બને છે.
- ખરાબ: એક component જેમાં "isAdd" prop ફોર્મ ફીલ્ડ્સ બદલે છે.
- સારું: "RegisterComponent" અને "UpdateComponent" બનાવો.
નાના components ટેસ્ટ કરવા માટે સરળ હોય છે. તેઓ ઝડપથી ચાલે છે. તેઓ ક્લીન રહે છે.
Source: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31