React నేర్చుకోవడంలో 5వ రోజు: Batching మరియు Functional Updates
state setterని ఒకటి కంటే ఎక్కువసార్లు పిలవడం వల్ల మల్టిపుల్ renders జరుగుతాయని నేను అనుకున్నాను.
నేను పొరబడ్డాను.
React అంతకంటే తెలివైనది. ఇది Automatic Batching అనే ప్రక్రియను ఉపయోగిస్తుంది.
ప్రతి అప్డేట్ తర్వాత render చేసే బదులు, React వాటన్నింటినీ కలిపి గ్రూప్ చేస్తుంది. ఇది అన్ని అప్డేట్లను సేకరించి, ఒకే ఒక్క render చేస్తుంది. దీనివల్ల performance ఆదా అవుతుంది.
ఈరోజు నేను నేర్చుకున్న విషయాలు ఇవే.
Batching ప్రక్రియ
మీరు ఒకటి కంటే ఎక్కువ state functionsని పిలిచినప్పుడు, React ఈ క్రమాన్ని అనుసరిస్తుంది:
- మల్టిపుల్ state updates జరుగుతాయి.
- React వాటన్నింటినీ కలిపి batch చేస్తుంది.
- React ఒకే ఒక్క render చేస్తుంది.
- React ఆ మార్పులను UIకి అప్లై చేస్తుంది (commits).
Standard Updates లో ఉన్న సమస్య
నేను ఈ కోడ్ని ప్రయత్నించాను:
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
count 0 నుండి 3కి పెరుగుతుందని నేను ఆశించాను. కానీ అది 0 నుండి 1కి మాత్రమే మారింది.
ఎందుకంటే setCount(count + 1) అంటే "countని పెంచమని" కాదు. దాని అర్థం "countని ఈ నిర్దిష్ట విలువకు సెట్ చేయమని".
ఒకవేళ count 0 అయితే, ప్రతి లైన్ Reactకి countని 1కి సెట్ చేయమని చెబుతుంది. React వాటన్నింటినీ batch చేసి, చివరి సూచన countని 1కి సెట్ చేయడమే అని గుర్తిస్తుంది.
పరిష్కారం: Functional Updates
దీనిని సరిచేయడానికి, మీరు functional updateని ఉపయోగించాలి. ఇది update queueలో అందుబాటులో ఉన్న తాజా stateని ఉపయోగిస్తుంది.
సరైన పద్ధతి:
setCount((prev) => prev + 1);
మీరు ఈ patternని ఉపయోగించినప్పుడు, React ప్రతి అప్డేట్కి అత్యంత తాజా విలువను ఇస్తుంది.
- మొదటి అప్డేట్: 0 + 1 = 1
- రెండవ అప్డేట్: 1 + 1 = 2
- మూడవ అప్డేట్: 2 + 1 = 3
ఇప్పుడు counter నిజంగా 3కి చేరుకుంటుంది.
ఒక సాధారణ తప్పు
నేను ఒకసారి ఇలా రాశాను:
setCount((prev) => { prev + 1 });
Counter undefined అయిపోయింది.
మీరు ఒక arrow functionలో curly braces ఉపయోగిస్తున్నప్పుడు, తప్పనిసరిగా return keywordని ఉపయోగించాలి.
దీనికి బదులుగా ఇది వాడండి:
setCount((prev) => prev + 1);
ముఖ్యమైన అంశాలు:
- వేగాన్ని పెంచడానికి React మల్టిపుల్ state updatesని batch చేస్తుంది.
setStateకాల్స్ ఎల్లప్పుడూ వెంటనే rendersని ట్రిగ్గర్ చేయవు.- Standard updates ప్రస్తుత render cycle నుండి విలువను ఉపయోగిస్తాయి.
- Functional updates update queue నుండి తాజా stateని ఉపయోగిస్తాయి.
- ఈ మార్పులను నిర్వహించడానికి React ఒక అంతర్గత Update Queueని ఉపయోగిస్తుంది.