ગુજરાતી

રિએક્ટ પ્રોફાઇલર API માં નિપુણતા મેળવો. પર્ફોર્મન્સની સમસ્યાઓનું નિદાન કરતાં, બિનજરૂરી રી-રેન્ડર્સને સુધારતાં, અને વ્યવહારુ ઉદાહરણો સાથે તમારી એપને ઓપ્ટિમાઇઝ કરતાં શીખો.

ઉત્તમ પર્ફોર્મન્સને અનલોક કરવું: રિએક્ટ પ્રોફાઇલર API માં ઊંડાણપૂર્વકનો અભ્યાસ

આધુનિક વેબ ડેવલપમેન્ટની દુનિયામાં, યુઝર એક્સપિરિયન્સ સર્વોપરી છે. એક સરળ, રિસ્પોન્સિવ ઇન્ટરફેસ એક ખુશ યુઝર અને એક નિરાશ યુઝર વચ્ચેનો નિર્ણાયક પરિબળ બની શકે છે. રિએક્ટનો ઉપયોગ કરતા ડેવલપર્સ માટે, જટિલ અને ડાયનેમિક યુઝર ઇન્ટરફેસ બનાવવું પહેલાં કરતાં વધુ સુલભ છે. જોકે, જેમ જેમ એપ્લિકેશન્સની જટિલતા વધે છે, તેમ તેમ પર્ફોર્મન્સની સમસ્યાઓનું જોખમ પણ વધે છે—સૂક્ષ્મ બિનકાર્યક્ષમતાઓ જે ધીમી ક્રિયાપ્રતિક્રિયાઓ, જર્કી એનિમેશન્સ અને એકંદરે ખરાબ યુઝર એક્સપિરિયન્સ તરફ દોરી શકે છે. અહીં જ રિએક્ટ પ્રોફાઇલર API એક ડેવલપરના શસ્ત્રાગારમાં એક અનિવાર્ય સાધન બની જાય છે.

આ વ્યાપક માર્ગદર્શિકા તમને રિએક્ટ પ્રોફાઇલરમાં ઊંડાણપૂર્વક લઈ જશે. આપણે જાણીશું કે તે શું છે, રિએક્ટ ડેવટૂલ્સ અને તેના પ્રોગ્રામેટિક API બંને દ્વારા તેનો અસરકારક રીતે કેવી રીતે ઉપયોગ કરવો, અને સૌથી અગત્યનું, સામાન્ય પર્ફોર્મન્સ સમસ્યાઓનું નિદાન અને નિરાકરણ કરવા માટે તેના આઉટપુટનું અર્થઘટન કેવી રીતે કરવું. અંત સુધીમાં, તમે પર્ફોર્મન્સ વિશ્લેષણને એક ભયાવહ કાર્યમાંથી તમારા ડેવલપમેન્ટ વર્કફ્લોના વ્યવસ્થિત અને લાભદાયી ભાગમાં ફેરવવા માટે સજ્જ થશો.

રિએક્ટ પ્રોફાઇલર API શું છે?

રિએક્ટ પ્રોફાઇલર એ એક વિશિષ્ટ સાધન છે જે ડેવલપર્સને રિએક્ટ એપ્લિકેશનના પર્ફોર્મન્સને માપવામાં મદદ કરવા માટે રચાયેલ છે. તેનું મુખ્ય કાર્ય તમારી એપ્લિકેશનમાં રેન્ડર થતા દરેક કમ્પોનન્ટ વિશે સમયની માહિતી એકત્રિત કરવાનું છે, જેનાથી તમે ઓળખી શકો છો કે તમારી એપના કયા ભાગો રેન્ડર કરવા માટે મોંઘા છે અને પર્ફોર્મન્સની સમસ્યાઓનું કારણ બની શકે છે.

તે આના જેવા ગંભીર પ્રશ્નોના જવાબ આપે છે:

રિએક્ટ પ્રોફાઇલરને ક્રોમ ડેવટૂલ્સમાં પરફોર્મન્સ ટેબ અથવા લાઇટહાઉસ જેવા સામાન્ય-હેતુના બ્રાઉઝર પર્ફોર્મન્સ ટૂલ્સથી અલગ પાડવું મહત્વપૂર્ણ છે. જ્યારે તે ટૂલ્સ એકંદર પેજ લોડ, નેટવર્ક વિનંતીઓ અને સ્ક્રિપ્ટ એક્ઝેક્યુશન સમયને માપવા માટે ઉત્તમ છે, ત્યારે રિએક્ટ પ્રોફાઇલર તમને રિએક્ટ ઇકોસિસ્ટમ ની અંદર પર્ફોર્મન્સનું કેન્દ્રિત, કમ્પોનન્ટ-સ્તરનું દૃશ્ય આપે છે. તે રિએક્ટ લાઇફસાયકલને સમજે છે અને સ્ટેટ ફેરફારો, પ્રોપ્સ અને કોન્ટેક્સ્ટ સંબંધિત બિનકાર્યક્ષમતાઓને નિર્દેશ કરી શકે છે જે અન્ય ટૂલ્સ જોઈ શકતા નથી.

પ્રોફાઇલર મુખ્યત્વે બે સ્વરૂપોમાં ઉપલબ્ધ છે:

  1. રિએક્ટ ડેવટૂલ્સ એક્સટેન્શન: એક યુઝર-ફ્રેન્ડલી, ગ્રાફિકલ ઇન્ટરફેસ જે સીધા તમારા બ્રાઉઝરના ડેવલપર ટૂલ્સમાં સંકલિત છે. પ્રોફાઇલિંગ શરૂ કરવાની આ સૌથી સામાન્ય રીત છે.
  2. પ્રોગ્રામેટિક `` કમ્પોનન્ટ: એક કમ્પોનન્ટ જેને તમે પ્રોગ્રામેટિકલી પર્ફોર્મન્સ માપન એકત્રિત કરવા માટે સીધા તમારા JSX કોડમાં ઉમેરી શકો છો, જે ઓટોમેટેડ ટેસ્ટિંગ અથવા એનાલિટિક્સ સર્વિસ પર મેટ્રિક્સ મોકલવા માટે ઉપયોગી છે.

મહત્વનું છે કે, પ્રોફાઇલર ડેવલપમેન્ટ એન્વાયર્નમેન્ટ માટે રચાયેલ છે. જોકે પ્રોફાઇલિંગ સક્ષમ કરેલું એક વિશેષ પ્રોડક્શન બિલ્ડ અસ્તિત્વમાં છે, રિએક્ટનું સ્ટાન્ડર્ડ પ્રોડક્શન બિલ્ડ આ કાર્યક્ષમતાને દૂર કરે છે જેથી લાઇબ્રેરી તમારા અંતિમ-વપરાશકર્તાઓ માટે શક્ય તેટલી નાની અને ઝડપી રહે.

શરૂઆત કરવી: રિએક્ટ પ્રોફાઇલરનો ઉપયોગ કેવી રીતે કરવો

ચાલો વ્યવહારુ બનીએ. તમારી એપ્લિકેશનનું પ્રોફાઇલિંગ કરવું એ એક સીધી પ્રક્રિયા છે, અને બંને પદ્ધતિઓને સમજવાથી તમને મહત્તમ સુગમતા મળશે.

પદ્ધતિ 1: રિએક્ટ ડેવટૂલ્સ પ્રોફાઇલર ટેબ

રોજિંદા મોટાભાગના પર્ફોર્મન્સ ડિબગિંગ માટે, રિએક્ટ ડેવટૂલ્સમાં પ્રોફાઇલર ટેબ તમારું મુખ્ય સાધન છે. જો તમે તે ઇન્સ્ટોલ કર્યું નથી, તો તે પ્રથમ પગલું છે—તમારા પસંદગીના બ્રાઉઝર (ક્રોમ, ફાયરફોક્સ, એજ) માટે એક્સટેન્શન મેળવો.

તમારું પ્રથમ પ્રોફાઇલિંગ સત્ર ચલાવવા માટે અહીં એક પગલું-દર-પગલું માર્ગદર્શિકા છે:

  1. તમારી એપ્લિકેશન ખોલો: ડેવલપમેન્ટ મોડમાં ચાલી રહેલી તમારી રિએક્ટ એપ્લિકેશન પર નેવિગેટ કરો. જો તમને તમારા બ્રાઉઝરના એક્સટેન્શન બારમાં રિએક્ટ આઇકન દેખાય તો તમને ખબર પડશે કે ડેવટૂલ્સ સક્રિય છે.
  2. ડેવલપર ટૂલ્સ ખોલો: તમારા બ્રાઉઝરના ડેવલપર ટૂલ્સ ખોલો (સામાન્ય રીતે F12 અથવા Ctrl+Shift+I / Cmd+Option+I સાથે) અને "Profiler" ટેબ શોધો. જો તમારી પાસે ઘણા ટેબ્સ હોય, તો તે "»" એરો પાછળ છુપાયેલ હોઈ શકે છે.
  3. પ્રોફાઇલિંગ શરૂ કરો: તમને પ્રોફાઇલર UI માં એક વાદળી વર્તુળ (રેકોર્ડ બટન) દેખાશે. પર્ફોર્મન્સ ડેટા રેકોર્ડ કરવાનું શરૂ કરવા માટે તેના પર ક્લિક કરો.
  4. તમારી એપ સાથે ઇન્ટરેક્ટ કરો: તમે જે ક્રિયાને માપવા માંગો છો તે કરો. આ પેજ લોડ કરવાથી, મોડલ ખોલતા બટન પર ક્લિક કરવાથી, ફોર્મમાં ટાઇપ કરવાથી, અથવા મોટી સૂચિને ફિલ્ટર કરવા સુધી કંઈપણ હોઈ શકે છે. ધ્યેય એ યુઝર ઇન્ટરેક્શનને ફરીથી બનાવવાનો છે જે ધીમું લાગે છે.
  5. પ્રોફાઇલિંગ બંધ કરો: એકવાર તમે ઇન્ટરેક્શન પૂર્ણ કરી લો, પછી સત્રને રોકવા માટે ફરીથી રેકોર્ડ બટન (તે હવે લાલ હશે) પર ક્લિક કરો.

બસ આટલું જ! પ્રોફાઇલર તેના દ્વારા એકત્રિત કરાયેલ ડેટા પર પ્રક્રિયા કરશે અને તે ઇન્ટરેક્શન દરમિયાન તમારી એપ્લિકેશનના રેન્ડર પર્ફોર્મન્સનું વિગતવાર વિઝ્યુલાઇઝેશન રજૂ કરશે.

પદ્ધતિ 2: પ્રોગ્રામેટિક `Profiler` કમ્પોનન્ટ

જ્યારે ડેવટૂલ્સ ઇન્ટરેક્ટિવ ડિબગિંગ માટે ઉત્તમ છે, ત્યારે કેટલીકવાર તમારે આપમેળે પર્ફોર્મન્સ ડેટા એકત્રિત કરવાની જરૂર પડે છે. `` કમ્પોનન્ટ, જે `react` પેકેજમાંથી એક્સપોર્ટ થયેલ છે, તમને તે જ કરવાની મંજૂરી આપે છે.

તમે તમારા કમ્પોનન્ટ ટ્રીના કોઈપણ ભાગને `` કમ્પોનન્ટથી વીંટાળી શકો છો. તેને બે પ્રોપ્સની જરૂર છે:

અહીં એક કોડ ઉદાહરણ છે:

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` કોલબેક પેરામીટર્સને સમજવું:

પ્રોફાઇલરના આઉટપુટનું અર્થઘટન: એક માર્ગદર્શિત પ્રવાસ

તમે રિએક્ટ ડેવટૂલ્સમાં રેકોર્ડિંગ સત્ર બંધ કર્યા પછી, તમને ઘણી બધી માહિતી રજૂ કરવામાં આવે છે. ચાલો UI ના મુખ્ય ભાગોને સમજીએ.

કમીટ સિલેક્ટર

પ્રોફાઇલરની ટોચ પર, તમને એક બાર ચાર્ટ દેખાશે. આ ચાર્ટમાં દરેક બાર તમારા રેકોર્ડિંગ દરમિયાન રિએક્ટે DOM પર કરેલા એક "કમીટ" નું પ્રતિનિધિત્વ કરે છે. બારની ઊંચાઈ અને રંગ સૂચવે છે કે તે કમીટને રેન્ડર થવામાં કેટલો સમય લાગ્યો—ઊંચા, પીળા/નારંગી બાર ટૂંકા, વાદળી/લીલા બાર કરતાં વધુ ખર્ચાળ છે. તમે દરેક વિશિષ્ટ રેન્ડર ચક્રની વિગતો તપાસવા માટે આ બાર પર ક્લિક કરી શકો છો.

ફ્લેમગ્રાફ ચાર્ટ

આ સૌથી શક્તિશાળી વિઝ્યુલાઇઝેશન છે. પસંદ કરેલ કમીટ માટે, ફ્લેમગ્રાફ તમને બતાવે છે કે તમારી એપ્લિકેશનમાં કયા કમ્પોનન્ટ્સ રેન્ડર થયા. તેને કેવી રીતે વાંચવું તે અહીં છે:

રેન્ક્ડ ચાર્ટ

જો ફ્લેમગ્રાફ ખૂબ જટિલ લાગે, તો તમે રેન્ક્ડ ચાર્ટ વ્યૂ પર સ્વિચ કરી શકો છો. આ વ્યૂ પસંદ કરેલ કમીટ દરમિયાન રેન્ડર થયેલા તમામ કમ્પોનન્ટ્સને ફક્ત સૂચિબદ્ધ કરે છે, જેણે રેન્ડર કરવામાં સૌથી વધુ સમય લીધો તેના દ્વારા સૉર્ટ કરેલ છે. તમારા સૌથી મોંઘા કમ્પોનન્ટ્સને તરત જ ઓળખવાનો આ એક અદભૂત માર્ગ છે.

કમ્પોનન્ટ ડિટેઇલ્સ પેન

જ્યારે તમે ફ્લેમગ્રાફ અથવા રેન્ક્ડ ચાર્ટમાં કોઈ ચોક્કસ કમ્પોનન્ટ પર ક્લિક કરો છો, ત્યારે જમણી બાજુએ એક વિગતોની પેન દેખાય છે. અહીં તમને સૌથી વધુ કાર્યક્ષમ માહિતી મળે છે:

સામાન્ય પર્ફોર્મન્સ સમસ્યાઓ અને તેને કેવી રીતે સુધારવી

હવે જ્યારે તમે જાણો છો કે પર્ફોર્મન્સ ડેટા કેવી રીતે એકત્રિત કરવો અને વાંચવો, ચાલો પ્રોફાઇલર દ્વારા ઉજાગર થતી સામાન્ય સમસ્યાઓ અને તેને ઉકેલવા માટેની સ્ટાન્ડર્ડ રિએક્ટ પેટર્નનું અન્વેષણ કરીએ.

સમસ્યા 1: બિનજરૂરી રી-રેન્ડર્સ

આ રિએક્ટ એપ્લિકેશન્સમાં અત્યાર સુધીની સૌથી સામાન્ય પર્ફોર્મન્સ સમસ્યા છે. તે ત્યારે થાય છે જ્યારે કોઈ કમ્પોનન્ટ ફરીથી રેન્ડર થાય છે, ભલે તેનું આઉટપુટ બરાબર એ જ હોય. આ CPU સાયકલનો બગાડ કરે છે અને તમારા UI ને ધીમું બનાવી શકે છે.

નિદાન:

ઉકેલ 1: `React.memo()`

`React.memo` એ એક હાયર-ઓર્ડર કમ્પોનન્ટ (HOC) છે જે તમારા કમ્પોનન્ટને મેમોઇઝ કરે છે. તે કમ્પોનન્ટના પાછલા અને નવા પ્રોપ્સની શેલો કમ્પેરિઝન કરે છે. જો પ્રોપ્સ સમાન હોય, તો રિએક્ટ કમ્પોનન્ટને ફરીથી રેન્ડર કરવાનું છોડી દેશે અને છેલ્લા રેન્ડર થયેલા પરિણામનો ફરીથી ઉપયોગ કરશે.

`React.memo` પહેલાં:**

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

// પેરન્ટમાં:
// જો પેરન્ટ કોઈ પણ કારણસર ફરીથી રેન્ડર થાય છે (દા.ત., તેનું પોતાનું સ્ટેટ બદલાય છે),
// UserAvatar ફરીથી રેન્ડર થશે, ભલે userName અને avatarUrl સમાન હોય.

`React.memo` પછી:**

import React from 'react';

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

// હવે, UserAvatar ફક્ત ત્યારે જ ફરીથી રેન્ડર થશે જો userName અથવા avatarUrl પ્રોપ્સ ખરેખર બદલાય.

ઉકેલ 2: `useCallback()`

`React.memo` ને ઓબ્જેક્ટ્સ અથવા ફંક્શન્સ જેવા નોન-પ્રિમિટિવ વેલ્યુઝવાળા પ્રોપ્સ દ્વારા નિષ્ફળ કરી શકાય છે. જાવાસ્ક્રિપ્ટમાં, `() => {} !== () => {}`. દરેક રેન્ડર પર એક નવું ફંક્શન બને છે, તેથી જો તમે મેમોઇઝ્ડ કમ્પોનન્ટને પ્રોપ તરીકે ફંક્શન પાસ કરો છો, તો તે હજી પણ ફરીથી રેન્ડર થશે.

The `useCallback` hook solves this by returning a memoized version of the callback function that only changes if one of its dependencies has changed.

`useCallback` પહેલાં:**

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

  // આ ફંક્શન ParentComponent ના દરેક રેન્ડર પર ફરીથી બનાવવામાં આવે છે
  const handleItemClick = (id) => {
    console.log('Clicked item', id);
  };

  return (
    
{/* MemoizedListItem દરેક વખતે જ્યારે count બદલાશે ત્યારે ફરીથી રેન્ડર થશે, કારણ કે handleItemClick એક નવું ફંક્શન છે */}
); }

`useCallback` પછી:**

import { useState, useCallback } from 'react';

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

  // આ ફંક્શન હવે મેમોઇઝ્ડ છે અને તેની ડિપેન્ડન્સીઝ (ખાલી એરે) બદલાય નહીં ત્યાં સુધી ફરીથી બનાવવામાં આવશે નહીં.
  const handleItemClick = useCallback((id) => {
    console.log('Clicked item', id);
  }, []); // ખાલી ડિપેન્ડન્સી એરેનો અર્થ છે કે તે ફક્ત એક જ વાર બનાવવામાં આવે છે

  return (
    
{/* હવે, જ્યારે count બદલાશે ત્યારે MemoizedListItem ફરીથી રેન્ડર થશે નહીં */}
); }

ઉકેલ 3: `useMemo()`

`useCallback` ની જેમ, `useMemo` વેલ્યુઝને મેમોઇઝ કરવા માટે છે. તે મોંઘી ગણતરીઓ માટે અથવા જટિલ ઓબ્જેક્ટ્સ/એરે બનાવવા માટે યોગ્ય છે જેને તમે દરેક રેન્ડર પર ફરીથી જનરેટ કરવા માંગતા નથી.

`useMemo` પહેલાં:**

function ProductList({ products, filterTerm }) {
  // આ મોંઘી ફિલ્ટરિંગ ઓપરેશન ProductList ના દરેક રેન્ડર પર ચાલે છે,
  // ભલે કોઈ અસંબંધિત પ્રોપ બદલાયો હોય.
  const visibleProducts = products.filter(p => p.name.includes(filterTerm));

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

`useMemo` પછી:**

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}
  • )}
); }

સમસ્યા 2: મોટા અને ખર્ચાળ કમ્પોનન્ટ ટ્રી

કેટલીકવાર સમસ્યા બિનજરૂરી રી-રેન્ડર્સની નથી, પરંતુ એ છે કે એક જ રેન્ડર ખરેખર ધીમું છે કારણ કે કમ્પોનન્ટ ટ્રી વિશાળ છે અથવા ભારે ગણતરીઓ કરે છે.

નિદાન:

  • ફ્લેમગ્રાફમાં, તમે એક જ કમ્પોનન્ટને ખૂબ પહોળા, પીળા અથવા લાલ બાર સાથે જુઓ છો, જે ઉચ્ચ `baseDuration` અને `actualDuration` સૂચવે છે.
  • જ્યારે આ કમ્પોનન્ટ દેખાય છે અથવા અપડેટ થાય છે ત્યારે UI ફ્રીઝ થઈ જાય છે અથવા જર્કી બની જાય છે.

ઉકેલ: વિન્ડોઇંગ / વર્ચ્યુઅલાઇઝેશન

લાંબી સૂચિઓ અથવા મોટા ડેટા ગ્રીડ માટે, સૌથી અસરકારક ઉકેલ એ છે કે ફક્ત તે જ આઇટમ્સ રેન્ડર કરવી જે હાલમાં યુઝરને વ્યુપોર્ટમાં દેખાય છે. આ ટેકનિકને "વિન્ડોઇંગ" અથવા "વર્ચ્યુઅલાઇઝેશન" કહેવામાં આવે છે. 10,000 લિસ્ટ આઇટમ્સ રેન્ડર કરવાને બદલે, તમે ફક્ત તે 20 જ રેન્ડર કરો છો જે સ્ક્રીન પર ફિટ થાય છે. આ DOM નોડ્સની સંખ્યા અને રેન્ડરિંગમાં વિતાવેલા સમયને નાટકીય રીતે ઘટાડે છે.

આને શરૂઆતથી અમલમાં મૂકવું જટિલ હોઈ શકે છે, પરંતુ એવી ઉત્તમ લાઇબ્રેરીઓ છે જે તેને સરળ બનાવે છે:

  • `react-window` અને `react-virtualized` વર્ચ્યુઅલાઇઝ્ડ લિસ્ટ અને ગ્રીડ બનાવવા માટે લોકપ્રિય, શક્તિશાળી લાઇબ્રેરીઓ છે.
  • તાજેતરમાં, `TanStack Virtual` જેવી લાઇબ્રેરીઓ હેડલેસ, હુક-આધારિત અભિગમો પ્રદાન કરે છે જે અત્યંત લવચીક છે.

સમસ્યા 3: કોન્ટેક્સ્ટ API ની મુશ્કેલીઓ

રિએક્ટ કોન્ટેક્સ્ટ API પ્રોપ ડ્રિલિંગને ટાળવા માટે એક શક્તિશાળી સાધન છે, પરંતુ તેની એક નોંધપાત્ર પર્ફોર્મન્સ મર્યાદા છે: કોઈપણ કમ્પોનન્ટ જે કોન્ટેક્સ્ટનો ઉપયોગ કરે છે તે જ્યારે પણ તે કોન્ટેક્સ્ટમાં કોઈપણ વેલ્યુ બદલાય ત્યારે ફરીથી રેન્ડર થશે, ભલે કમ્પોનન્ટ તે ચોક્કસ ડેટાનો ઉપયોગ ન કરતું હોય.

નિદાન:

  • તમે તમારા ગ્લોબલ કોન્ટેક્સ્ટમાં એક જ વેલ્યુ અપડેટ કરો છો (દા.ત., થીમ ટોગલ).
  • પ્રોફાઇલર બતાવે છે કે તમારી સમગ્ર એપ્લિકેશનમાં મોટી સંખ્યામાં કમ્પોનન્ટ્સ ફરીથી રેન્ડર થાય છે, તે કમ્પોનન્ટ્સ પણ જે થીમ સાથે સંપૂર્ણપણે અસંબંધિત છે.
  • "આ શા માટે રેન્ડર થયું?" પેન આ કમ્પોનન્ટ્સ માટે "કોન્ટેક્સ્ટ બદલાયું" બતાવે છે.

ઉકેલ: તમારા કોન્ટેક્સ્ટ્સને વિભાજીત કરો

આને ઉકેલવાનો શ્રેષ્ઠ માર્ગ એ છે કે એક વિશાળ, મોનોલિથિક `AppContext` બનાવવાનું ટાળવું. તેના બદલે, તમારા ગ્લોબલ સ્ટેટને બહુવિધ, નાના, વધુ દાણાદાર કોન્ટેક્સ્ટ્સમાં વિભાજીત કરો.

પહેલાં (ખરાબ પ્રથા):**

// 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);

એડવાન્સ્ડ પ્રોફાઇલિંગ ટેકનિક અને શ્રેષ્ઠ પ્રથાઓ

પ્રોડક્શન પ્રોફાઇલિંગ માટે બિલ્ડિંગ

ડિફૉલ્ટ રૂપે, `` કમ્પોનન્ટ પ્રોડક્શન બિલ્ડમાં કંઈ કરતું નથી. તેને સક્ષમ કરવા માટે, તમારે તમારી એપ્લિકેશનને વિશેષ `react-dom/profiling` બિલ્ડનો ઉપયોગ કરીને બિલ્ડ કરવાની જરૂર છે. આ એક પ્રોડક્શન-રેડી બંડલ બનાવે છે જેમાં હજી પણ પ્રોફાઇલિંગ ઇન્સ્ટ્રુમેન્ટેશન શામેલ છે.

તમે આને કેવી રીતે સક્ષમ કરો છો તે તમારા બિલ્ડ ટૂલ પર આધાર રાખે છે. ઉદાહરણ તરીકે, વેબપેક સાથે, તમે તમારા કન્ફિગરેશનમાં એલિયાસનો ઉપયોગ કરી શકો છો:

// webpack.config.js
module.exports = {
  // ... other config
  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
    },
  },
};

આ તમને તમારી ડિપ્લોય કરેલી, પ્રોડક્શન-ઓપ્ટિમાઇઝ્ડ સાઇટ પર વાસ્તવિક-દુનિયાની પર્ફોર્મન્સ સમસ્યાઓને ડિબગ કરવા માટે રિએક્ટ ડેવટૂલ્સ પ્રોફાઇલરનો ઉપયોગ કરવાની મંજૂરી આપે છે.

પર્ફોર્મન્સ માટે એક સક્રિય અભિગમ

યુઝર્સ ધીમાપણાની ફરિયાદ કરે તેની રાહ ન જુઓ. તમારા ડેવલપમેન્ટ વર્કફ્લોમાં પર્ફોર્મન્સ માપનને એકીકૃત કરો:

  • વહેલું પ્રોફાઇલ કરો, વારંવાર પ્રોફાઇલ કરો: નવા ફીચર્સ બનાવતી વખતે નિયમિતપણે પ્રોફાઇલ કરો. જ્યારે કોડ તમારા મગજમાં તાજો હોય ત્યારે સમસ્યાને ઠીક કરવી ખૂબ સરળ છે.
  • પર્ફોર્મન્સ બજેટ સ્થાપિત કરો: ગંભીર ઇન્ટરેક્શન્સ માટે બજેટ સેટ કરવા માટે પ્રોગ્રામેટિક `` API નો ઉપયોગ કરો. ઉદાહરણ તરીકે, તમે દાવો કરી શકો છો કે તમારા મુખ્ય ડેશબોર્ડને માઉન્ટ કરવામાં ક્યારેય 200ms કરતાં વધુ સમય ન લાગવો જોઈએ.
  • પર્ફોર્મન્સ ટેસ્ટને ઓટોમેટ કરો: તમે જેસ્ટ અથવા પ્લેરાઇટ જેવા ટેસ્ટિંગ ફ્રેમવર્ક સાથે પ્રોગ્રામેટિક API નો ઉપયોગ કરીને ઓટોમેટેડ ટેસ્ટ બનાવી શકો છો જે જો રેન્ડર થવામાં ખૂબ લાંબો સમય લાગે તો નિષ્ફળ જાય, જેનાથી પર્ફોર્મન્સ રિગ્રેશન્સને મર્જ થતા અટકાવી શકાય.

નિષ્કર્ષ

પર્ફોર્મન્સ ઓપ્ટિમાઇઝેશન એ પાછળથી વિચારવાની બાબત નથી; તે ઉચ્ચ-ગુણવત્તાવાળી, પ્રોફેશનલ વેબ એપ્લિકેશન્સ બનાવવાનું એક મુખ્ય પાસું છે. રિએક્ટ પ્રોફાઇલર API, તેના ડેવટૂલ્સ અને પ્રોગ્રામેટિક બંને સ્વરૂપોમાં, રેન્ડરિંગ પ્રક્રિયાને સ્પષ્ટ કરે છે અને જાણકાર નિર્ણયો લેવા માટે જરૂરી નક્કર ડેટા પ્રદાન કરે છે.

આ ટૂલમાં નિપુણતા મેળવીને, તમે પર્ફોર્મન્સ વિશે અનુમાન લગાવવાથી આગળ વધીને વ્યવસ્થિત રીતે સમસ્યાઓ ઓળખી શકો છો, `React.memo`, `useCallback`, અને વર્ચ્યુઅલાઇઝેશન જેવા લક્ષિત ઓપ્ટિમાઇઝેશન લાગુ કરી શકો છો, અને અંતે, ઝડપી, સરળ અને આનંદદાયક યુઝર એક્સપિરિયન્સ બનાવી શકો છો જે તમારી એપ્લિકેશનને અલગ પાડે છે. આજે જ પ્રોફાઇલિંગ શરૂ કરો, અને તમારા રિએક્ટ પ્રોજેક્ટ્સમાં પર્ફોર્મન્સના આગલા સ્તરને અનલોક કરો.