అత్యుత్తమ పనితీరును అన్‌లాక్ చేయడం: రియాక్ట్ ప్రొఫైలర్ APIపై ఒక లోతైన విశ్లేషణ

ఆధునిక వెబ్ డెవలప్‌మెంట్ ప్రపంచంలో, వినియోగదారు అనుభవం చాలా ముఖ్యమైనది. ఒక సులభమైన, ప్రతిస్పందించే ఇంటర్‌ఫేస్, సంతోషించిన వినియోగదారు మరియు నిరాశ చెందిన వినియోగదారు మధ్య నిర్ణయాత్మక అంశం కావచ్చు. రియాక్ట్ ఉపయోగించే డెవలపర్‌లకు, సంక్లిష్టమైన మరియు డైనమిక్ యూజర్ ఇంటర్‌ఫేస్‌లను నిర్మించడం గతంలో కంటే సులభం. అయినప్పటికీ, అప్లికేషన్‌ల సంక్లిష్టత పెరిగేకొద్దీ, పనితీరు సమస్యల ప్రమాదం కూడా పెరుగుతుంది—ఇవి నెమ్మదిగా ఉండే ఇంటరాక్షన్‌లు, జంకీ యానిమేషన్‌లు మరియు మొత్తం మీద పేలవమైన వినియోగదారు అనుభవానికి దారితీసే సూక్ష్మ అసమర్థతలు. ఇక్కడే రియాక్ట్ ప్రొఫైలర్ API ఒక డెవలపర్ యొక్క ఆయుధశాలలో ఒక అనివార్యమైన సాధనంగా మారుతుంది.

ఈ సమగ్ర గైడ్ మిమ్మల్ని రియాక్ట్ ప్రొఫైలర్ గురించి లోతుగా తెలుసుకునేలా చేస్తుంది. ఇది ఏమిటి, రియాక్ట్ డెవ్‌టూల్స్ మరియు దాని ప్రోగ్రామాటిక్ API ద్వారా దానిని సమర్థవంతంగా ఎలా ఉపయోగించాలి, మరియు ముఖ్యంగా, సాధారణ పనితీరు సమస్యలను గుర్తించి, సరిచేయడానికి దాని అవుట్‌పుట్‌ను ఎలా అర్థం చేసుకోవాలో మనం అన్వేషిస్తాము. చివరికి, మీరు పనితీరు విశ్లేషణను ఒక కష్టమైన పని నుండి మీ డెవలప్‌మెంట్ వర్క్‌ఫ్లోలో ఒక క్రమబద్ధమైన మరియు బహుమతి పొందే భాగంగా మార్చడానికి సిద్ధంగా ఉంటారు.

రియాక్ట్ ప్రొఫైలర్ API అంటే ఏమిటి?

రియాక్ట్ ప్రొఫైలర్ అనేది రియాక్ట్ అప్లికేషన్ యొక్క పనితీరును కొలవడానికి డెవలపర్‌లకు సహాయపడటానికి రూపొందించబడిన ఒక ప్రత్యేక సాధనం. దీని ప్రాథమిక విధి మీ అప్లికేషన్‌లో రెండర్ అయ్యే ప్రతి కాంపోనెంట్ గురించి టైమింగ్ సమాచారాన్ని సేకరించడం, తద్వారా మీ యాప్‌లోని ఏ భాగాలు రెండర్ చేయడానికి ఖరీదైనవో మరియు పనితీరు సమస్యలకు కారణం కావచ్చునో గుర్తించడానికి మిమ్మల్ని అనుమతిస్తుంది.

ఇది ముఖ్యమైన ప్రశ్నలకు సమాధానమిస్తుంది:

• ఒక నిర్దిష్ట కాంపోనెంట్ రెండర్ చేయడానికి ఎంత సమయం పడుతుంది?
• వినియోగదారు ఇంటరాక్షన్ సమయంలో ఒక కాంపోనెంట్ ఎన్నిసార్లు రీ-రెండర్ అవుతుంది?
• ఒక నిర్దిష్ట కాంపోనెంట్ ఎందుకు రీ-రెండర్ అయ్యింది?

రియాక్ట్ ప్రొఫైలర్‌ను Chrome DevToolsలోని పెర్ఫార్మెన్స్ ట్యాబ్ లేదా లైట్‌హౌస్ వంటి సాధారణ-ప్రయోజన బ్రౌజర్ పనితీరు సాధనాల నుండి వేరు చేయడం ముఖ్యం. ఆ సాధనాలు మొత్తం పేజీ లోడ్, నెట్‌వర్క్ అభ్యర్థనలు, మరియు స్క్రిప్ట్ ఎగ్జిక్యూషన్ సమయాన్ని కొలవడానికి అద్భుతమైనవి అయినప్పటికీ, రియాక్ట్ ప్రొఫైలర్ మీకు రియాక్ట్ ఎకోసిస్టమ్ లోపల పనితీరు యొక్క కాంపోనెంట్-స్థాయి వీక్షణను ఇస్తుంది. ఇది రియాక్ట్ లైఫ్‌సైకిల్‌ను అర్థం చేసుకుంటుంది మరియు స్టేట్ మార్పులు, ప్రాప్స్, మరియు కాంటెక్స్ట్‌కు సంబంధించిన అసమర్థతలను ఇతర సాధనాలు చూడలేని విధంగా గుర్తించగలదు.

ప్రొఫైలర్ ప్రధానంగా రెండు రూపాల్లో అందుబాటులో ఉంది:

1. ది రియాక్ట్ డెవ్‌టూల్స్ ఎక్స్‌టెన్షన్: మీ బ్రౌజర్ యొక్క డెవలపర్ టూల్స్‌లో నేరుగా విలీనం చేయబడిన ఒక యూజర్-ఫ్రెండ్లీ, గ్రాఫికల్ ఇంటర్‌ఫేస్. ప్రొఫైలింగ్ ప్రారంభించడానికి ఇది అత్యంత సాధారణ మార్గం.
2. ది ప్రోగ్రామాటిక్ `` కాంపోనెంట్: పనితీరు కొలతలను ప్రోగ్రామాటిక్‌గా సేకరించడానికి మీ JSX కోడ్‌కు నేరుగా జోడించగల కాంపోనెంట్, ఇది ఆటోమేటెడ్ టెస్టింగ్ లేదా అనలిటిక్స్ సేవకు మెట్రిక్‌లను పంపడానికి ఉపయోగపడుతుంది.

ముఖ్యంగా, ప్రొఫైలర్ డెవలప్‌మెంట్ ఎన్విరాన్‌మెంట్‌ల కోసం రూపొందించబడింది. ప్రొఫైలింగ్ ఎనేబుల్ చేయబడిన ఒక ప్రత్యేక ప్రొడక్షన్ బిల్డ్ ఉన్నప్పటికీ, రియాక్ట్ యొక్క ప్రామాణిక ప్రొడక్షన్ బిల్డ్ ఈ ఫంక్షనాలిటీని తీసివేస్తుంది, తద్వారా మీ తుది-వినియోగదారుల కోసం లైబ్రరీని వీలైనంత తేలికగా మరియు వేగంగా ఉంచుతుంది.

ప్రారంభించడం: రియాక్ట్ ప్రొఫైలర్‌ను ఎలా ఉపయోగించాలి

ఆచరణాత్మకంగా చూద్దాం. మీ అప్లికేషన్‌ను ప్రొఫైల్ చేయడం ఒక సూటి ప్రక్రియ, మరియు రెండు పద్ధతులను అర్థం చేసుకోవడం మీకు గరిష్ట సౌలభ్యాన్ని ఇస్తుంది.

పద్ధతి 1: రియాక్ట్ డెవ్‌టూల్స్ ప్రొఫైలర్ ట్యాబ్

చాలా రోజువారీ పనితీరు డీబగ్గింగ్ కోసం, రియాక్ట్ డెవ్‌టూల్స్‌లోని ప్రొఫైలర్ ట్యాబ్ మీ గో-టు టూల్. మీరు దానిని ఇన్‌స్టాల్ చేయకపోతే, అది మొదటి అడుగు—మీకు నచ్చిన బ్రౌజర్ (Chrome, Firefox, Edge) కోసం ఎక్స్‌టెన్షన్‌ను పొందండి.

మీ మొదటి ప్రొఫైలింగ్ సెషన్‌ను అమలు చేయడానికి దశల వారీ గైడ్ ఇక్కడ ఉంది:

1. మీ అప్లికేషన్‌ను తెరవండి: డెవలప్‌మెంట్ మోడ్‌లో నడుస్తున్న మీ రియాక్ట్ అప్లికేషన్‌కు నావిగేట్ చేయండి. మీ బ్రౌజర్ యొక్క ఎక్స్‌టెన్షన్ బార్‌లో రియాక్ట్ ఐకాన్‌ను చూస్తే డెవ్‌టూల్స్ యాక్టివ్‌గా ఉన్నాయని మీకు తెలుస్తుంది.
2. డెవలపర్ టూల్స్ తెరవండి: మీ బ్రౌజర్ యొక్క డెవలపర్ టూల్స్ తెరవండి (సాధారణంగా F12 లేదా Ctrl+Shift+I / Cmd+Option+I తో) మరియు "Profiler" ట్యాబ్‌ను కనుగొనండి. మీకు చాలా ట్యాబ్‌లు ఉంటే, అది "»" బాణం వెనుక దాగి ఉండవచ్చు.
3. ప్రొఫైలింగ్ ప్రారంభించండి: ప్రొఫైలర్ UIలో మీకు ఒక నీలి వృత్తం (రికార్డ్ బటన్) కనిపిస్తుంది. పనితీరు డేటాను రికార్డ్ చేయడం ప్రారంభించడానికి దానిపై క్లిక్ చేయండి.
4. మీ యాప్‌తో ఇంటరాక్ట్ అవ్వండి: మీరు కొలవాలనుకుంటున్న చర్యను జరపండి. ఇది ఒక పేజీని లోడ్ చేయడం, మోడల్‌ను తెరిచే బటన్‌ను క్లిక్ చేయడం, ఫారమ్‌లో టైప్ చేయడం, లేదా పెద్ద జాబితాను ఫిల్టర్ చేయడం వంటిది ఏదైనా కావచ్చు. నెమ్మదిగా అనిపించే వినియోగదారు ఇంటరాక్షన్‌ను పునరుత్పత్తి చేయడమే లక్ష్యం.
5. ప్రొఫైలింగ్ ఆపండి: మీరు ఇంటరాక్షన్‌ను పూర్తి చేసిన తర్వాత, సెషన్‌ను ఆపడానికి రికార్డ్ బటన్‌ను మళ్ళీ క్లిక్ చేయండి (ఇప్పుడు అది ఎర్రగా ఉంటుంది).

అంతే! ప్రొఫైలర్ అది సేకరించిన డేటాను ప్రాసెస్ చేస్తుంది మరియు ఆ ఇంటరాక్షన్ సమయంలో మీ అప్లికేషన్ యొక్క రెండర్ పనితీరు యొక్క వివరణాత్మక విజువలైజేషన్‌ను మీకు అందిస్తుంది.

పద్ధతి 2: ప్రోగ్రామాటిక్ `Profiler` కాంపోనెంట్

ఇంటరాక్టివ్ డీబగ్గింగ్ కోసం డెవ్‌టూల్స్ గొప్పవి అయినప్పటికీ, కొన్నిసార్లు మీరు పనితీరు డేటాను స్వయంచాలకంగా సేకరించాల్సి ఉంటుంది. `react` ప్యాకేజీ నుండి ఎగుమతి చేయబడిన `` కాంపోనెంట్, మీరు సరిగ్గా అదే చేయడానికి అనుమతిస్తుంది.

మీరు మీ కాంపోనెంట్ ట్రీ యొక్క ఏ భాగాన్నైనా `` కాంపోనెంట్‌తో చుట్టవచ్చు. దీనికి రెండు ప్రాప్స్ అవసరం:

• `id` (string): మీరు ప్రొఫైల్ చేస్తున్న ట్రీ యొక్క భాగానికి ఒక ప్రత్యేక ఐడెంటిఫైయర్. ఇది వివిధ ప్రొఫైలర్‌ల నుండి కొలతలను వేరు చేయడానికి మీకు సహాయపడుతుంది.
• `onRender` (function): ప్రొఫైల్ చేయబడిన ట్రీ లోపల ఒక కాంపోనెంట్ ఒక అప్‌డేట్‌ను "కమిట్" చేసిన ప్రతిసారీ రియాక్ట్ పిలిచే ఒక కాల్‌బ్యాక్ ఫంక్షన్.

ఇక్కడ ఒక కోడ్ ఉదాహరణ:

import React, { Profiler } from 'react';

// onRender కాల్‌బ్యాక్
function onRenderCallback(
  id, // ఇప్పుడే కమిట్ అయిన ప్రొఫైలర్ ట్రీ యొక్క "id" ప్రాప్
  phase, // "mount" (ట్రీ ఇప్పుడే మౌంట్ అయితే) లేదా "update" (అది రీ-రెండర్ అయితే)
  actualDuration, // కమిట్ అయిన అప్‌డేట్‌ను రెండర్ చేయడానికి పట్టిన సమయం
  baseDuration, // మెమోయిజేషన్ లేకుండా మొత్తం సబ్‌ట్రీని రెండర్ చేయడానికి అంచనా వేయబడిన సమయం
  startTime, // రియాక్ట్ ఈ అప్‌డేట్‌ను రెండర్ చేయడం ప్రారంభించినప్పుడు
  commitTime, // రియాక్ట్ ఈ అప్‌డేట్‌ను కమిట్ చేసినప్పుడు
  interactions // అప్‌డేట్‌ను ప్రేరేపించిన ఇంటరాక్షన్‌ల సెట్
) {
  // మీరు ఈ డేటాను లాగ్ చేయవచ్చు, అనలిటిక్స్ ఎండ్‌పాయింట్‌కు పంపవచ్చు, లేదా దాన్ని అగ్రిగేట్ చేయవచ్చు.
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
  });
}

function App() {
  return (
    

      
        
      
      

        
          
        
      
    
  );
}

`onRender` కాల్‌బ్యాక్ పారామీటర్లను అర్థం చేసుకోవడం:

• `id`: మీరు `` కాంపోనెంట్‌కు పంపిన స్ట్రింగ్ `id`.
• `phase`: ഒന്നുകിൽ `"mount"` (కాంపోనెంట్ మొదటిసారి మౌంట్ అయ్యింది) അല്ലെങ്കിൽ `"update"` (ప్రాప్స్, స్టేట్, లేదా హుక్స్ లో మార్పుల కారణంగా అది రీ-రెండర్ అయ్యింది).
• `actualDuration`: ఈ నిర్దిష్ట అప్‌డేట్ కోసం `` మరియు దాని డిసెండెంట్‌లను రెండర్ చేయడానికి పట్టిన సమయం, మిల్లీసెకన్లలో. నెమ్మదిగా ఉండే రెండర్‌లను గుర్తించడానికి ఇది మీ ముఖ్య మెట్రిక్.
• `baseDuration`: మొత్తం సబ్‌ట్రీని మొదటి నుండి రెండర్ చేయడానికి ఎంత సమయం పడుతుందో ఒక అంచనా. ఇది "వరస్ట్-కేస్" దృశ్యం మరియు ఒక కాంపోనెంట్ ట్రీ యొక్క మొత్తం సంక్లిష్టతను అర్థం చేసుకోవడానికి ఉపయోగపడుతుంది. `actualDuration` `baseDuration` కంటే చాలా చిన్నగా ఉంటే, అది మెమోయిజేషన్ వంటి ఆప్టిమైజేషన్‌లు సమర్థవంతంగా పనిచేస్తున్నాయని సూచిస్తుంది.
• `startTime` మరియు `commitTime`: రియాక్ట్ రెండరింగ్ ప్రారంభించినప్పుడు మరియు అది DOMకు అప్‌డేట్‌ను కమిట్ చేసినప్పుడు టైమ్‌స్టాంప్‌లు. ఇవి కాలక్రమేణా పనితీరును ట్రాక్ చేయడానికి ఉపయోగించబడతాయి.
• `interactions`: అప్‌డేట్ షెడ్యూల్ చేయబడినప్పుడు ట్రేస్ చేయబడుతున్న "ఇంటరాక్షన్‌ల" సెట్ (ఇది అప్‌డేట్‌ల కారణాన్ని ట్రేస్ చేయడానికి ఒక ప్రయోగాత్మక API యొక్క భాగం).

ప్రొఫైలర్ యొక్క అవుట్‌పుట్‌ను అర్థం చేసుకోవడం: ఒక గైడెడ్ టూర్

మీరు రియాక్ట్ డెవ్‌టూల్స్‌లో రికార్డింగ్ సెషన్‌ను ఆపిన తర్వాత, మీకు విస్తారమైన సమాచారం అందించబడుతుంది. UI యొక్క ప్రధాన భాగాలను విడదీసి చూద్దాం.

కమిట్ సెలెక్టర్

ప్రొఫైలర్ పైన, మీకు ఒక బార్ చార్ట్ కనిపిస్తుంది. ఈ చార్ట్‌లోని ప్రతి బార్ మీ రికార్డింగ్ సమయంలో రియాక్ట్ DOMకు చేసిన ఒకే "కమిట్"ను సూచిస్తుంది. బార్ యొక్క ఎత్తు మరియు రంగు ఆ కమిట్ రెండర్ చేయడానికి ఎంత సమయం పట్టిందో సూచిస్తాయి—పొడవైన, పసుపు/నారింజ బార్‌లు పొట్టి, నీలం/ఆకుపచ్చ బార్‌ల కంటే ఎక్కువ ఖరీదైనవి. మీరు ప్రతి నిర్దిష్ట రెండర్ సైకిల్ యొక్క వివరాలను తనిఖీ చేయడానికి ఈ బార్‌లపై క్లిక్ చేయవచ్చు.

ఫ్లేమ్‌గ్రాఫ్ చార్ట్

ఇది అత్యంత శక్తివంతమైన విజువలైజేషన్. ఎంచుకున్న కమిట్ కోసం, ఫ్లేమ్‌గ్రాఫ్ మీ అప్లికేషన్‌లోని ఏ కాంపోనెంట్‌లు రెండర్ అయ్యాయో చూపుతుంది. దానిని ఎలా చదవాలో ఇక్కడ ఉంది:

• కాంపోనెంట్ హైరార్కీ: చార్ట్ మీ కాంపోనెంట్ ట్రీ లాగా నిర్మించబడింది. పైన ఉన్న కాంపోనెంట్‌లు వాటి కింద ఉన్న కాంపోనెంట్‌లను పిలిచాయి.
• రెండర్ సమయం: ఒక కాంపోనెంట్ యొక్క బార్ యొక్క వెడల్పు అది మరియు దాని పిల్లలు రెండర్ చేయడానికి ఎంత సమయం తీసుకున్నారో సూచిస్తుంది. వెడల్పైన బార్‌లను మీరు మొదట పరిశోధించాలి.
• రంగు కోడింగ్: బార్ యొక్క రంగు కూడా రెండర్ సమయాన్ని సూచిస్తుంది, వేగవంతమైన రెండర్‌ల కోసం చల్లని రంగుల (నీలం, ఆకుపచ్చ) నుండి నెమ్మదైన వాటి కోసం వెచ్చని రంగుల (పసుపు, నారింజ, ఎరుపు) వరకు.
• గ్రే-అవుట్ కాంపోనెంట్‌లు: ఒక గ్రే బార్ అంటే ఈ నిర్దిష్ట కమిట్ సమయంలో కాంపోనెంట్ రీ-రెండర్ కాలేదు. ఇది ఒక గొప్ప సంకేతం! అంటే మీ మెమోయిజేషన్ వ్యూహాలు ఆ కాంపోనెంట్ కోసం పనిచేస్తున్నాయని అర్థం.

ర్యాంక్డ్ చార్ట్

ఫ్లేమ్‌గ్రాఫ్ చాలా సంక్లిష్టంగా అనిపిస్తే, మీరు ర్యాంక్డ్ చార్ట్ వీక్షణకు మారవచ్చు. ఈ వీక్షణ ఎంచుకున్న కమిట్ సమయంలో రెండర్ అయిన అన్ని కాంపోనెంట్‌లను జాబితా చేస్తుంది, ఏది రెండర్ చేయడానికి ఎక్కువ సమయం తీసుకుందో దాని ద్వారా క్రమబద్ధీకరించబడుతుంది. మీ అత్యంత ఖరీదైన కాంపోనెంట్‌లను తక్షణమే గుర్తించడానికి ఇది ఒక అద్భుతమైన మార్గం.

కాంపోనెంట్ వివరాల పేన్

మీరు ఫ్లేమ్‌గ్రాఫ్ లేదా ర్యాంక్డ్ చార్ట్‌లో ఒక నిర్దిష్ట కాంపోనెంట్‌పై క్లిక్ చేసినప్పుడు, కుడి వైపున ఒక వివరాల పేన్ కనిపిస్తుంది. ఇక్కడ మీరు అత్యంత చర్య తీసుకోదగిన సమాచారాన్ని కనుగొంటారు:

• రెండర్ వ్యవధులు: ఇది ఎంచుకున్న కమిట్‌లో ఆ కాంపోనెంట్ కోసం `actualDuration` మరియు `baseDuration`ను చూపుతుంది.
• "Rendered at": ఇది ఈ కాంపోనెంట్ రెండర్ అయిన అన్ని కమిట్‌లను జాబితా చేస్తుంది, ఇది ఎంత తరచుగా అప్‌డేట్ అవుతుందో త్వరగా చూడటానికి మిమ్మల్ని అనుమతిస్తుంది.
• "Why did this render?": ఇది తరచుగా అత్యంత విలువైన సమాచారం. రియాక్ట్ డెవ్‌టూల్స్ ఒక కాంపోనెంట్ ఎందుకు రీ-రెండర్ అయ్యిందో చెప్పడానికి తన వంతు ప్రయత్నం చేస్తుంది. సాధారణ కారణాలు:
  • ప్రాప్స్ మారాయి
  • హుక్స్ మారాయి (ఉదా., ఒక `useState` లేదా `useReducer` విలువ అప్‌డేట్ చేయబడింది)
  • పేరెంట్ కాంపోనెంట్ రెండర్ అయ్యింది (ఇది చైల్డ్ కాంపోనెంట్‌లలో అనవసరమైన రీ-రెండర్‌లకు ఒక సాధారణ కారణం)
  • కాంటెక్స్ట్ మారింది

సాధారణ పనితీరు సమస్యలు మరియు వాటిని ఎలా పరిష్కరించాలి

మీరు ఇప్పుడు పనితీరు డేటాను ఎలా సేకరించాలో మరియు చదవాలో తెలుసుకున్నారు, ప్రొఫైలర్ బహిర్గతం చేయడంలో సహాయపడే సాధారణ సమస్యలను మరియు వాటిని పరిష్కరించడానికి ప్రామాణిక రియాక్ట్ ప్యాటర్న్‌లను అన్వేషిద్దాం.

సమస్య 1: అనవసరమైన రీ-రెండర్‌లు

రియాక్ట్ అప్లికేషన్‌లలో ఇది అత్యంత సాధారణ పనితీరు సమస్య. ఒక కాంపోనెంట్ యొక్క అవుట్‌పుట్ సరిగ్గా అదే విధంగా ఉన్నప్పటికీ అది రీ-రెండర్ అయినప్పుడు ఇది సంభవిస్తుంది. ఇది CPU సైకిళ్లను వృధా చేస్తుంది మరియు మీ UI నెమ్మదిగా అనిపించేలా చేస్తుంది.

నిర్ధారణ:

• ప్రొఫైలర్‌లో, మీరు ఒక కాంపోనెంట్ అనేక కమిట్‌లలో చాలా తరచుగా రెండర్ అవ్వడాన్ని చూస్తారు.
• "Why did this render?" విభాగం దాని స్వంత ప్రాప్స్ మారనప్పటికీ, దాని పేరెంట్ కాంపోనెంట్ రీ-రెండర్ అయినందున అని సూచిస్తుంది.
• ఫ్లేమ్‌గ్రాఫ్‌లోని అనేక కాంపోనెంట్‌లు రంగులో ఉంటాయి, అవి ఆధారపడే స్టేట్‌లోని ఒక చిన్న భాగం మాత్రమే వాస్తవానికి మారినప్పటికీ.

పరిష్కారం 1: `React.memo()`

`React.memo` అనేది మీ కాంపోనెంట్‌ను మెమోయిజ్ చేసే ఒక ఉన్నత-శ్రేణి కాంపోనెంట్ (HOC). ఇది కాంపోనెంట్ యొక్క మునుపటి మరియు కొత్త ప్రాప్స్‌ యొక్క నిస్సార పోలికను చేస్తుంది. ప్రాప్స్ ఒకేలా ఉంటే, రియాక్ట్ కాంపోనెంట్‌ను రీ-రెండర్ చేయడాన్ని దాటవేసి, చివరిగా రెండర్ అయిన ఫలితాన్ని తిరిగి ఉపయోగిస్తుంది.

`React.memo` ముందు:**

function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
}

// పేరెంట్‌లో:
// పేరెంట్ ఏ కారణం చేతనైనా రీ-రెండర్ అయితే (ఉదా., దాని స్వంత స్టేట్ మార్పులు),
// userName మరియు avatarUrl ఒకేలా ఉన్నప్పటికీ UserAvatar రీ-రెండర్ అవుతుంది.

import React from 'react';

const UserAvatar = React.memo(function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
});

// ఇప్పుడు, userName లేదా avatarUrl ప్రాప్స్ వాస్తవానికి మారితేనే UserAvatar రీ-రెండర్ అవుతుంది.

function ParentComponent() {
  const [count, setCount] = useState(0);

  // ఈ ఫంక్షన్ ParentComponent యొక్క ప్రతి రెండర్‌లో తిరిగి సృష్టించబడుతుంది
  const handleItemClick = (id) => {
    console.log('Clicked item', id);
  };

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* MemoizedListItem ప్రతిసారీ count మారినప్పుడు రీ-రెండర్ అవుతుంది, ఎందుకంటే handleItemClick ఒక కొత్త ఫంక్షన్ */}
      
    
  );
}

import { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // ఈ ఫంక్షన్ ఇప్పుడు మెమోయిజ్ చేయబడింది మరియు దాని డిపెండెన్సీలు (ఖాళీ అర్రే) మారనంత వరకు తిరిగి సృష్టించబడదు.
  const handleItemClick = useCallback((id) => {
    console.log('Clicked item', id);
  }, []); // ఖాళీ డిపెండెన్సీ అర్రే అంటే ఇది ఒక్కసారి మాత్రమే సృష్టించబడుతుంది

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* ఇప్పుడు, count మారినప్పుడు MemoizedListItem రీ-రెండర్ కాదు */}
      
    
  );
}

function ProductList({ products, filterTerm }) {
  // ఈ ఖరీదైన ఫిల్టరింగ్ ఆపరేషన్ ProductList యొక్క ప్రతి రెండర్‌లో నడుస్తుంది,
  // సంబంధం లేని ఒక ప్రాప్ మారినప్పటికీ.
  const visibleProducts = products.filter(p => p.name.includes(filterTerm));

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

import { useMemo } from 'react';

function ProductList({ products, filterTerm }) {
  // ఈ గణన ఇప్పుడు `products` లేదా `filterTerm` మారినప్పుడు మాత్రమే నడుస్తుంది.
  const visibleProducts = useMemo(() => {
    return products.filter(p => p.name.includes(filterTerm));
  }, [products, filterTerm]);

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

// AppContext.js
const AppContext = createContext({ 
  currentUser: null, 
  theme: 'light', 
  language: 'en',
  setTheme: () => {}, 
  // ... మరియు 20 ఇతర విలువలు
});

// MyComponent.js
// ఈ కాంపోనెంట్‌కు currentUser మాత్రమే అవసరం, కానీ థీమ్ మారినప్పుడు రీ-రెండర్ అవుతుంది!
const { currentUser } = useContext(AppContext);

// UserContext.js
const UserContext = createContext(null);

// ThemeContext.js
const ThemeContext = createContext({ theme: 'light', setTheme: () => {} });

// MyComponent.js
// ఈ కాంపోనెంట్ ఇప్పుడు currentUser మారినప్పుడు మాత్రమే రీ-రెండర్ అవుతుంది.
const currentUser = useContext(UserContext);

// webpack.config.js
module.exports = {
  // ... ఇతర కాన్ఫిగరేషన్
  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
    },
  },
};