રિએક્ટ રેન્ડર: કમ્પોનન્ટ રેન્ડરિંગ અને લાઇફસાઇકલ મેનેજમેન્ટ

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

રિએક્ટ રેન્ડરિંગ પ્રક્રિયાને સમજવું

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

વર્ચ્યુઅલ DOM અને રિકન્સિલિએશન

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

આ સરળ ઉદાહરણને ધ્યાનમાં લો:

પરિદૃશ્ય: એક બટન ક્લિક કરવાથી સ્ક્રીન પર પ્રદર્શિત કાઉન્ટર અપડેટ થાય છે.

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

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

રિએક્ટ ફેરફારો કેવી રીતે નક્કી કરે છે: ડિફિંગ એલ્ગોરિધમ

રિએક્ટનો ડિફિંગ એલ્ગોરિધમ રિકન્સિલિએશન પ્રક્રિયાનું હૃદય છે. તે તફાવતોને ઓળખવા માટે નવા અને જૂના વર્ચ્યુઅલ DOM ટ્રીની તુલના કરે છે. એલ્ગોરિધમ તુલનાને ઑપ્ટિમાઇઝ કરવા માટે ઘણી ધારણાઓ કરે છે:

• વિવિધ પ્રકારના બે એલિમેન્ટ્સ અલગ-અલગ ટ્રી બનાવશે. જો રૂટ એલિમેન્ટ્સના પ્રકારો અલગ હોય (દા.ત., <div> ને <span> માં બદલવું), તો રિએક્ટ જૂના ટ્રીને અનમાઉન્ટ કરશે અને શરૂઆતથી નવું ટ્રી બનાવશે.
• જ્યારે સમાન પ્રકારના બે એલિમેન્ટ્સની તુલના કરવામાં આવે છે, ત્યારે રિએક્ટ ફેરફારો છે કે નહીં તે નક્કી કરવા માટે તેમના એટ્રિબ્યુટ્સને જુએ છે. જો ફક્ત એટ્રિબ્યુટ્સ બદલાયા હોય, તો રિએક્ટ હાલના DOM નોડના એટ્રિબ્યુટ્સને અપડેટ કરશે.
• રિએક્ટ લિસ્ટ આઇટમ્સને અનન્ય રીતે ઓળખવા માટે કી પ્રોપનો ઉપયોગ કરે છે. કી પ્રોપ પ્રદાન કરવાથી રિએક્ટને આખી લિસ્ટને ફરીથી રેન્ડર કર્યા વિના અસરકારક રીતે અપડેટ કરવાની મંજૂરી મળે છે.

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

રિએક્ટ કમ્પોનન્ટ લાઇફસાઇકલ

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

ક્લાસ કમ્પોનન્ટ્સમાં લાઇફસાઇકલ મેથડ્સ

ક્લાસ-આધારિત કમ્પોનન્ટ્સમાં, લાઇફસાઇકલ મેથડ્સનો ઉપયોગ કમ્પોનન્ટના જીવનના વિવિધ તબક્કે કોડ ચલાવવા માટે થાય છે. અહીં મુખ્ય લાઇફસાઇકલ મેથડ્સની ઝાંખી છે:

• constructor(props): કમ્પોનન્ટ માઉન્ટ થાય તે પહેલાં કોલ થાય છે. તેનો ઉપયોગ સ્ટેટને પ્રારંભ કરવા અને ઇવેન્ટ હેન્ડલર્સને બાઇન્ડ કરવા માટે થાય છે.
• static getDerivedStateFromProps(props, state): રેન્ડરિંગ પહેલાં, પ્રારંભિક માઉન્ટ અને અનુગામી અપડેટ્સ બંને પર કોલ થાય છે. તેણે સ્ટેટને અપડેટ કરવા માટે એક ઓબ્જેક્ટ પરત કરવો જોઈએ, અથવા null સૂચવવા માટે કે નવા પ્રોપ્સને કોઈ સ્ટેટ અપડેટની જરૂર નથી. આ મેથડ પ્રોપ ફેરફારોના આધારે અનુમાનિત સ્ટેટ અપડેટ્સને પ્રોત્સાહન આપે છે.
• render(): આવશ્યક મેથડ જે રેન્ડર કરવા માટે JSX પરત કરે છે. તે પ્રોપ્સ અને સ્ટેટનું શુદ્ધ ફંક્શન હોવું જોઈએ.
• componentDidMount(): કમ્પોનન્ટ માઉન્ટ થયા પછી (ટ્રીમાં દાખલ થયા પછી) તરત જ કોલ થાય છે. તે સાઇડ ઇફેક્ટ્સ કરવા માટે એક સારી જગ્યા છે, જેમ કે ડેટા મેળવવો અથવા સબ્સ્ક્રિપ્શન્સ સેટ કરવું.
• shouldComponentUpdate(nextProps, nextState): જ્યારે નવા પ્રોપ્સ અથવા સ્ટેટ પ્રાપ્ત થાય છે ત્યારે રેન્ડરિંગ પહેલાં કોલ થાય છે. તે તમને બિનજરૂરી રી-રેન્ડર્સ અટકાવીને પર્ફોર્મન્સને ઑપ્ટિમાઇઝ કરવાની મંજૂરી આપે છે. જો કમ્પોનન્ટ અપડેટ થવો જોઈએ તો true પરત કરવું જોઈએ, અથવા જો ન થવો જોઈએ તો false.
• getSnapshotBeforeUpdate(prevProps, prevState): DOM અપડેટ થાય તે પહેલાં જ કોલ થાય છે. DOM માંથી માહિતી (દા.ત., સ્ક્રોલ પોઝિશન) કેપ્ચર કરવા માટે ઉપયોગી છે તે બદલાય તે પહેલાં. પરત મૂલ્ય componentDidUpdate() માં પેરામીટર તરીકે પસાર કરવામાં આવશે.
• componentDidUpdate(prevProps, prevState, snapshot): અપડેટ થયા પછી તરત જ કોલ થાય છે. કમ્પોનન્ટ અપડેટ થયા પછી DOM ઓપરેશન્સ કરવા માટે તે એક સારી જગ્યા છે.
• componentWillUnmount(): કમ્પોનન્ટ અનમાઉન્ટ અને નષ્ટ થાય તે પહેલાં તરત જ કોલ થાય છે. તે સંસાધનોને સાફ કરવા માટે એક સારી જગ્યા છે, જેમ કે ઇવેન્ટ લિસનર્સ દૂર કરવા અથવા નેટવર્ક વિનંતીઓ રદ કરવી.
• static getDerivedStateFromError(error): રેન્ડરિંગ દરમિયાન ભૂલ પછી કોલ થાય છે. તે ભૂલને દલીલ તરીકે મેળવે છે અને સ્ટેટને અપડેટ કરવા માટે એક મૂલ્ય પરત કરવું જોઈએ. તે કમ્પોનન્ટને ફોલબેક UI પ્રદર્શિત કરવાની મંજૂરી આપે છે.
• componentDidCatch(error, info): વંશજ કમ્પોનન્ટમાં રેન્ડરિંગ દરમિયાન ભૂલ પછી કોલ થાય છે. તે ભૂલ અને કમ્પોનન્ટ સ્ટેક માહિતીને દલીલો તરીકે મેળવે છે. ભૂલોને એરર રિપોર્ટિંગ સેવામાં લોગ કરવા માટે તે એક સારી જગ્યા છે.

લાઇફસાઇકલ મેથડ્સનું એક કાર્યરત ઉદાહરણ

એક એવા કમ્પોનન્ટને ધ્યાનમાં લો જે માઉન્ટ થાય ત્યારે API માંથી ડેટા મેળવે છે અને તેના પ્રોપ્સ બદલાય ત્યારે ડેટાને અપડેટ કરે છે:

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (this.props.url !== prevProps.url) {
      this.fetchData();
    }
  }

  fetchData = async () => {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  render() {
    if (!this.state.data) {
      return <p>લોડ થઈ રહ્યું છે...</p>;
    }

    return <div>{this.state.data.message}</div>;
  }
}

આ ઉદાહરણમાં:

• componentDidMount() કમ્પોનન્ટ પ્રથમ માઉન્ટ થાય ત્યારે ડેટા મેળવે છે.
• componentDidUpdate() જો url પ્રોપ બદલાય તો ફરીથી ડેટા મેળવે છે.
• render() મેથડ ડેટા મેળવતી વખતે લોડિંગ સંદેશ પ્રદર્શિત કરે છે અને પછી જ્યારે તે ઉપલબ્ધ થાય ત્યારે ડેટા રેન્ડર કરે છે.

લાઇફસાઇકલ મેથડ્સ અને એરર હેન્ડલિંગ

રિએક્ટ રેન્ડરિંગ દરમિયાન થતી ભૂલોને હેન્ડલ કરવા માટે લાઇફસાઇકલ મેથડ્સ પણ પ્રદાન કરે છે:

• static getDerivedStateFromError(error): રેન્ડરિંગ દરમિયાન ભૂલ થાય તે પછી કોલ થાય છે. તે ભૂલને દલીલ તરીકે મેળવે છે અને સ્ટેટને અપડેટ કરવા માટે એક મૂલ્ય પરત કરવું જોઈએ. આ કમ્પોનન્ટને ફોલબેક UI પ્રદર્શિત કરવાની મંજૂરી આપે છે.
• componentDidCatch(error, info): વંશજ કમ્પોનન્ટમાં રેન્ડરિંગ દરમિયાન ભૂલ થાય તે પછી કોલ થાય છે. તે ભૂલ અને કમ્પોનન્ટ સ્ટેક માહિતીને દલીલો તરીકે મેળવે છે. ભૂલોને એરર રિપોર્ટિંગ સેવામાં લોગ કરવા માટે આ એક સારી જગ્યા છે.

આ મેથડ્સ તમને ભૂલોને સરળતાથી હેન્ડલ કરવાની અને તમારી એપ્લિકેશનને ક્રેશ થતી અટકાવવાની મંજૂરી આપે છે. ઉદાહરણ તરીકે, તમે વપરાશકર્તાને ભૂલ સંદેશ પ્રદર્શિત કરવા માટે getDerivedStateFromError() નો અને સર્વર પર ભૂલ લોગ કરવા માટે componentDidCatch() નો ઉપયોગ કરી શકો છો.

હુક્સ અને ફંક્શનલ કમ્પોનન્ટ્સ

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

• useState(): તમને ફંક્શનલ કમ્પોનન્ટ્સમાં સ્ટેટ ઉમેરવાની મંજૂરી આપે છે.
• useEffect(): તમને ફંક્શનલ કમ્પોનન્ટ્સમાં સાઇડ ઇફેક્ટ્સ કરવાની મંજૂરી આપે છે, જે componentDidMount(), componentDidUpdate(), અને componentWillUnmount() જેવું જ છે.
• useContext(): તમને રિએક્ટ કન્ટેક્સ્ટનો ઉપયોગ કરવાની મંજૂરી આપે છે.
• useReducer(): તમને રિડ્યુસર ફંક્શનનો ઉપયોગ કરીને જટિલ સ્ટેટનું સંચાલન કરવાની મંજૂરી આપે છે.
• useCallback(): ફંક્શનનું મેમોઇઝ્ડ વર્ઝન પરત કરે છે જે ફક્ત ત્યારે જ બદલાય છે જો કોઈ એક ડિપેન્ડન્સી બદલાઈ હોય.
• useMemo(): એક મેમોઇઝ્ડ મૂલ્ય પરત કરે છે જે ફક્ત ત્યારે જ ફરીથી ગણતરી કરે છે જ્યારે કોઈ એક ડિપેન્ડન્સી બદલાઈ હોય.
• useRef(): તમને રેન્ડર્સ વચ્ચે મૂલ્યોને જાળવી રાખવાની મંજૂરી આપે છે.
• useImperativeHandle(): ref નો ઉપયોગ કરતી વખતે પેરેન્ટ કમ્પોનન્ટ્સને એક્સપોઝ કરવામાં આવતા ઇન્સ્ટન્સ વેલ્યુને કસ્ટમાઇઝ કરે છે.
• useLayoutEffect(): useEffect નું એક વર્ઝન જે બધા DOM મ્યુટેશન્સ પછી સિંક્રનસ રીતે ફાયર થાય છે.
• useDebugValue(): રિએક્ટ DevTools માં કસ્ટમ હુક્સ માટે મૂલ્ય પ્રદર્શિત કરવા માટે વપરાય છે.

useEffect હૂકનું ઉદાહરણ

અહીં તમે ફંક્શનલ કમ્પોનન્ટમાં ડેટા મેળવવા માટે useEffect() હૂકનો ઉપયોગ કેવી રીતે કરી શકો છો:

import React, { useState, useEffect } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  }, [url]); // ફક્ત URL બદલાય તો જ ઇફેક્ટને ફરીથી ચલાવો

  if (!data) {
    return <p>લોડ થઈ રહ્યું છે...</p>;
  }

  return <div>{data.message}</div>;
}

આ ઉદાહરણમાં:

• useEffect() કમ્પોનન્ટ પ્રથમ રેન્ડર થાય ત્યારે અને જ્યારે પણ url પ્રોપ બદલાય ત્યારે ડેટા મેળવે છે.
• useEffect() નો બીજો આર્ગ્યુમેન્ટ ડિપેન્ડન્સીઝનો એરે છે. જો કોઈ પણ ડિપેન્ડન્સી બદલાય, તો ઇફેક્ટ ફરીથી ચલાવવામાં આવશે.
• useState() હૂકનો ઉપયોગ કમ્પોનન્ટની સ્ટેટનું સંચાલન કરવા માટે થાય છે.

રિએક્ટ રેન્ડરિંગ પર્ફોર્મન્સને ઑપ્ટિમાઇઝ કરવું

પર્ફોર્મન્ટ રિએક્ટ એપ્લિકેશન્સ બનાવવા માટે કાર્યક્ષમ રેન્ડરિંગ નિર્ણાયક છે. અહીં રેન્ડરિંગ પર્ફોર્મન્સને ઑપ્ટિમાઇઝ કરવા માટેની કેટલીક તકનીકો છે:

૧. બિનજરૂરી રી-રેન્ડર્સ અટકાવવું

રેન્ડરિંગ પર્ફોર્મન્સને ઑપ્ટિમાઇઝ કરવાની સૌથી અસરકારક રીતોમાંની એક બિનજરૂરી રી-રેન્ડર્સ અટકાવવી છે. અહીં રી-રેન્ડર્સ અટકાવવા માટેની કેટલીક તકનીકો છે:

• React.memo() નો ઉપયોગ: React.memo() એક ઉચ્ચ-ક્રમનો કમ્પોનન્ટ છે જે ફંક્શનલ કમ્પોનન્ટને મેમોઇઝ કરે છે. તે ફક્ત ત્યારે જ કમ્પોનન્ટને રી-રેન્ડર કરે છે જો તેના પ્રોપ્સ બદલાયા હોય.
• shouldComponentUpdate() નો અમલ: ક્લાસ કમ્પોનન્ટ્સમાં, તમે પ્રોપ અથવા સ્ટેટ ફેરફારોના આધારે રી-રેન્ડર્સ અટકાવવા માટે shouldComponentUpdate() લાઇફસાઇકલ મેથડનો અમલ કરી શકો છો.
• useMemo() અને useCallback() નો ઉપયોગ: આ હુક્સનો ઉપયોગ મૂલ્યો અને ફંક્શન્સને મેમોઇઝ કરવા માટે થઈ શકે છે, જે બિનજરૂરી રી-રેન્ડર્સ અટકાવે છે.
• ઇમ્યુટેબલ ડેટા સ્ટ્રક્ચર્સનો ઉપયોગ: ઇમ્યુટેબલ ડેટા સ્ટ્રક્ચર્સ ખાતરી કરે છે કે ડેટામાં ફેરફારો હાલના ઓબ્જેક્ટ્સમાં ફેરફાર કરવાને બદલે નવા ઓબ્જેક્ટ્સ બનાવે છે. આનાથી ફેરફારો શોધવામાં અને બિનજરૂરી રી-રેન્ડર્સ અટકાવવામાં સરળતા રહે છે.

૨. કોડ-સ્પ્લિટિંગ

કોડ-સ્પ્લિટિંગ એ તમારી એપ્લિકેશનને નાના ટુકડાઓમાં વિભાજિત કરવાની પ્રક્રિયા છે જે માંગ પર લોડ કરી શકાય છે. આ તમારી એપ્લિકેશનના પ્રારંભિક લોડ સમયને નોંધપાત્ર રીતે ઘટાડી શકે છે.

રિએક્ટ કોડ-સ્પ્લિટિંગના અમલ માટે ઘણા માર્ગો પ્રદાન કરે છે:

• React.lazy() અને Suspense નો ઉપયોગ: આ સુવિધાઓ તમને કમ્પોનન્ટ્સને ગતિશીલ રીતે આયાત કરવાની મંજૂરી આપે છે, જ્યારે તેમની જરૂર હોય ત્યારે જ તેમને લોડ કરે છે.
• ડાયનેમિક ઇમ્પોર્ટ્સનો ઉપયોગ: તમે માંગ પર મોડ્યુલ્સ લોડ કરવા માટે ડાયનેમિક ઇમ્પોર્ટ્સનો ઉપયોગ કરી શકો છો.

૩. લિસ્ટ વર્ચ્યુઅલાઈઝેશન

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

ત્યાં ઘણી લાઇબ્રેરીઓ છે જે લિસ્ટ વર્ચ્યુઅલાઈઝેશન કમ્પોનન્ટ્સ પ્રદાન કરે છે, જેમ કે:

• react-window
• react-virtualized

૪. ઇમેજને ઑપ્ટિમાઇઝ કરવી

ઇમેજ ઘણીવાર પર્ફોર્મન્સ સમસ્યાઓનો નોંધપાત્ર સ્ત્રોત બની શકે છે. અહીં ઇમેજને ઑપ્ટિમાઇઝ કરવા માટેની કેટલીક ટિપ્સ છે:

• ઑપ્ટિમાઇઝ્ડ ઇમેજ ફોર્મેટ્સનો ઉપયોગ કરો: વધુ સારા કમ્પ્રેશન અને ગુણવત્તા માટે WebP જેવા ફોર્મેટ્સનો ઉપયોગ કરો.
• ઇમેજનું કદ બદલો: ઇમેજને તેમના પ્રદર્શન કદ માટે યોગ્ય પરિમાણોમાં બદલો.
• લેઝી લોડ ઇમેજ: ઇમેજ ફક્ત ત્યારે જ લોડ કરો જ્યારે તે સ્ક્રીન પર દેખાય.
• CDN નો ઉપયોગ કરો: તમારા વપરાશકર્તાઓની ભૌગોલિક રીતે નજીક હોય તેવા સર્વર્સથી ઇમેજ સર્વ કરવા માટે કન્ટેન્ટ ડિલિવરી નેટવર્ક (CDN) નો ઉપયોગ કરો.

૫. પ્રોફાઇલિંગ અને ડિબગીંગ

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

રિએક્ટ DevTools બ્રાઉઝર એક્સ્ટેંશન રિએક્ટ કમ્પોનન્ટ્સ, સ્ટેટ અને પ્રોપ્સનું નિરીક્ષણ કરવા માટેના સાધનો પ્રદાન કરે છે.

વ્યવહારુ ઉદાહરણો અને શ્રેષ્ઠ પદ્ધતિઓ

ઉદાહરણ: ફંક્શનલ કમ્પોનન્ટને મેમોઇઝ કરવું

એક સરળ ફંક્શનલ કમ્પોનન્ટને ધ્યાનમાં લો જે વપરાશકર્તાનું નામ પ્રદર્શિત કરે છે:

function UserProfile({ user }) {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
}

આ કમ્પોનન્ટને બિનજરૂરી રીતે રી-રેન્ડર થતું અટકાવવા માટે, તમે React.memo() નો ઉપયોગ કરી શકો છો:

import React from 'react';

const UserProfile = React.memo(({ user }) => {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
});

હવે, UserProfile ફક્ત ત્યારે જ રી-રેન્ડર થશે જો user પ્રોપ બદલાય.

ઉદાહરણ: useCallback() નો ઉપયોગ

એક એવા કમ્પોનન્ટને ધ્યાનમાં લો જે ચાઇલ્ડ કમ્પોનન્ટને કોલબેક ફંક્શન પાસ કરે છે:

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>કાઉન્ટ: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>મને ક્લિક કરો</button>;
}

આ ઉદાહરણમાં, handleClick ફંક્શન ParentComponent ના દરેક રેન્ડર પર ફરીથી બનાવવામાં આવે છે. આનાથી ChildComponent બિનજરૂરી રીતે રી-રેન્ડર થાય છે, ભલે તેના પ્રોપ્સ બદલાયા ન હોય.

આને અટકાવવા માટે, તમે handleClick ફંક્શનને મેમોઇઝ કરવા માટે useCallback() નો ઉપયોગ કરી શકો છો:

import React, { useState, useCallback } from 'react';

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // ફક્ત કાઉન્ટ બદલાય તો જ ફંક્શનને ફરીથી બનાવો

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>કાઉન્ટ: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>મને ક્લિક કરો</button>;
}

હવે, handleClick ફંક્શન ફક્ત ત્યારે જ ફરીથી બનાવવામાં આવશે જો count સ્ટેટ બદલાય.

ઉદાહરણ: useMemo() નો ઉપયોગ

એક એવા કમ્પોનન્ટને ધ્યાનમાં લો જે તેના પ્રોપ્સના આધારે એક વ્યુત્પન્ન મૂલ્યની ગણતરી કરે છે:

import React, { useState } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = items.filter(item => item.name.includes(filter));

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

આ ઉદાહરણમાં, filteredItems એરે MyComponent ના દરેક રેન્ડર પર ફરીથી ગણતરી કરવામાં આવે છે, ભલે items પ્રોપ બદલાયો ન હોય. જો items એરે મોટો હોય તો આ બિનકાર્યક્ષમ હોઈ શકે છે.

આને અટકાવવા માટે, તમે filteredItems એરેને મેમોઇઝ કરવા માટે useMemo() નો ઉપયોગ કરી શકો છો:

import React, { useState, useMemo } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]); // ફક્ત આઇટમ્સ અથવા ફિલ્ટર બદલાય તો જ ફરીથી ગણતરી કરો

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

હવે, filteredItems એરે ફક્ત ત્યારે જ ફરીથી ગણતરી કરવામાં આવશે જો items પ્રોપ અથવા filter સ્ટેટ બદલાય.

નિષ્કર્ષ

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

વધુ સંસાધનો

• રેન્ડરિંગ એલિમેન્ટ્સ પર રિએક્ટ ડોક્યુમેન્ટેશન
• સ્ટેટ અને લાઇફસાઇકલ પર રિએક્ટ ડોક્યુમેન્ટેશન
• હુક્સ પર રિએક્ટ ડોક્યુમેન્ટેશન
• પર્ફોર્મન્સ ઑપ્ટિમાઇઝ કરવા પર રિએક્ટ ડોક્યુમેન્ટેશન