React શીખવાનો 5મો દિવસ: Batching અને Functional Updates
મને લાગતું હતું કે state setter ને અનેક વાર કોલ કરવાથી અનેક વખત renders થાય છે.
હું ખોટો હતો.
React તેનાથી વધુ સ્માર્ટ છે. તે Automatic Batching નામની પ્રક્રિયાનો ઉપયોગ કરે છે.
દરેક અપડેટ પછી render કરવાને બદલે, React તેને એકસાથે ગ્રુપ કરે છે. તે તમામ અપડેટ્સને એકત્રિત કરે છે અને માત્ર એક જ વખત render કરે છે. આનાથી performance બચે છે.
આજે મેં જે શીખ્યું તે અહીં છે.
The Batching Process જ્યારે તમે એકથી વધુ state functions કોલ કરો છો, ત્યારે React આ flow અનુસરે છે:
- અનેક state updates થાય છે.
- React તેને એકસાથે batch કરે છે.
- React એક જ વખત render કરે છે.
- React UI માં ફેરફારો commit કરે છે.
The Problem with Standard Updates
મેં આ કોડ ટ્રાય કર્યો:
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
મને અપેક્ષા હતી કે count 0 થી 3 થશે. પરંતુ તે 0 થી 1 જ થયું.
આ આવું એટલા માટે થાય છે કારણ કે setCount(count + 1) નો અર્થ "count વધારો" એવો નથી.
તેનો અર્થ "count ને આ ચોક્કસ value પર સેટ કરો" એવો થાય છે.
જો count 0 હોય, તો દરેક લાઇન React ને count ને 1 સેટ કરવા માટે કહે છે. React આ બધું batch કરે છે અને જુએ છે કે અંતિમ સૂચના count ને 1 સેટ કરવાની છે.
The Solution: Functional Updates આને ઠીક કરવા માટે, તમારે functional update નો ઉપયોગ કરવો જોઈએ. આ update queue માં ઉપલબ્ધ સૌથી લેટેસ્ટ state નો ઉપયોગ કરે છે.
સાચી રીત:
setCount((prev) => prev + 1);
જ્યારે તમે આ pattern નો ઉપયોગ કરો છો, ત્યારે React દરેક update ને સૌથી તાજેતરની value આપે છે.
- પ્રથમ update: 0 + 1 = 1
- બીજું update: 1 + 1 = 2
- ત્રીજું update: 2 + 1 = 3
હવે counter ખરેખર 3 સુધી પહોંચે છે.
A Common Mistake
મેં એકવાર આ રીતે લખ્યું હતું:
setCount((prev) => { prev + 1 });
Counter undefined થઈ ગયું.
જ્યારે તમે arrow function માં curly braces {} નો ઉપયોગ કરો છો, ત્યારે તમારે return keyword નો ઉપયોગ કરવો જ પડે છે.
તેના બદલે આનો ઉપયોગ કરો:
setCount((prev) => prev + 1);
Key Takeaways:
- ઝડપ સુધારવા માટે React અનેક state updates ને batch કરે છે.
- setState calls હંમેશા તાત્કાલિક renders ટ્રિગર કરતા નથી.
- Standard updates વર્તમાન render cycle ની value નો ઉપયોગ કરે છે.
- Functional updates update queue માંથી લેટેસ્ટ state નો ઉપયોગ કરે છે.
- React આ ફેરફારોને મેનેજ કરવા માટે એક internal Update Queue નો ઉપયોગ કરે છે.