M

MLOG

ಕನ್ನಡ

ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ತಡೆಯಲು ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ರಿಯಾಕ್ಟ್ ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಹೇಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ. ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್‌ಗಳಿಗಾಗಿ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ.

ರಿಯಾಕ್ಟ್ ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್: ಮೆಮೊರಿ ಲೀಕ್ ತಡೆಗಟ್ಟುವಿಕೆಯಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ

ರಿಯಾಕ್ಟ್‌ನ useEffect ಹುಕ್ ನಿಮ್ಮ ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಒಂದು ಶಕ್ತಿಶಾಲಿ ಸಾಧನವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಇದನ್ನು ಸರಿಯಾಗಿ ಬಳಸದಿದ್ದರೆ, ಇದು ಮೆಮೊರಿ ಲೀಕ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸ್ಥಿರತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ರಿಯಾಕ್ಟ್ ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್‌ನ ಜಟಿಲತೆಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ, ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ತಡೆಯಲು ಮತ್ತು ಹೆಚ್ಚು ದೃಢವಾದ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಬರೆಯಲು ನಿಮಗೆ ಜ್ಞಾನ ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ಎಂದರೇನು ಮತ್ತು ಅವು ಏಕೆ ಕೆಟ್ಟವು?

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಮೆಮೊರಿಯನ್ನು ನಿಯೋಜಿಸಿದಾಗ ಆದರೆ ಅದು ಇನ್ನು ಮುಂದೆ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದಾಗ ಅದನ್ನು ಸಿಸ್ಟಮ್‌ಗೆ ಹಿಂತಿರುಗಿಸಲು ವಿಫಲವಾದಾಗ ಮೆಮೊರಿ ಲೀಕ್ ಸಂಭವಿಸುತ್ತದೆ. ಕಾಲಾನಂತರದಲ್ಲಿ, ಈ ಬಿಡುಗಡೆಯಾಗದ ಮೆಮೊರಿ ಬ್ಲಾಕ್‌ಗಳು ಸಂಗ್ರಹಗೊಳ್ಳುತ್ತವೆ, ಹೆಚ್ಚು ಹೆಚ್ಚು ಸಿಸ್ಟಮ್ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಳಸುತ್ತವೆ. ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ಈ ಕೆಳಗಿನಂತೆ ಕಾಣಿಸಿಕೊಳ್ಳಬಹುದು:

ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ, ಅಸಿಂಕ್ರೊನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳು, ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್‌ಗಳು, ಅಥವಾ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ useEffect ಹುಕ್‌ಗಳಲ್ಲಿ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ಹೆಚ್ಚಾಗಿ ಸಂಭವಿಸುತ್ತವೆ. ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಅಥವಾ ಪುನಃ ರೆಂಡರ್ ಆದಾಗ ಈ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಸರಿಯಾಗಿ ಕ್ಲೀನ್ ಅಪ್ ಮಾಡದಿದ್ದರೆ, ಅವು ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಚಾಲನೆಯಾಗುತ್ತಲೇ ಇರುತ್ತವೆ, ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಳಸುತ್ತವೆ ಮತ್ತು ಸಂಭಾವ್ಯವಾಗಿ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.

useEffect ಮತ್ತು ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್ ಬಗ್ಗೆ ಆಳವಾಗಿ ತಿಳಿಯುವ ಮೊದಲು, useEffect ನ ಉದ್ದೇಶವನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಪರಿಶೀಲಿಸೋಣ. useEffect ಹುಕ್ ನಿಮ್ಮ ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳು ಬಾಹ್ಯ ಪ್ರಪಂಚದೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವ ಕಾರ್ಯಾಚರಣೆಗಳಾಗಿವೆ, ಉದಾಹರಣೆಗೆ:

useEffect ಹುಕ್ ಎರಡು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ:

  1. ಸೈಡ್ ಎಫೆಕ್ಟ್ ಹೊಂದಿರುವ ಫಂಕ್ಷನ್.
  2. ಡಿಪೆಂಡೆನ್ಸಿಗಳ ಒಂದು ಐಚ್ಛಿಕ ಅರೇ.

ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರ್ ಆದ ನಂತರ ಸೈಡ್ ಎಫೆಕ್ಟ್ ಫಂಕ್ಷನ್ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಯು ಎಫೆಕ್ಟ್ ಅನ್ನು ಯಾವಾಗ ಪುನಃ ಚಲಾಯಿಸಬೇಕು ಎಂದು ರಿಯಾಕ್ಟ್‌ಗೆ ಹೇಳುತ್ತದೆ. ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇ ಖಾಲಿಯಾಗಿದ್ದರೆ ([]), ಎಫೆಕ್ಟ್ ಆರಂಭಿಕ ರೆಂಡರ್ ನಂತರ ಒಮ್ಮೆ ಮಾತ್ರ ಚಲಿಸುತ್ತದೆ. ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಯನ್ನು ಬಿಟ್ಟುಬಿಟ್ಟರೆ, ಪ್ರತಿ ರೆಂಡರ್ ನಂತರ ಎಫೆಕ್ಟ್ ಚಲಿಸುತ್ತದೆ.

ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್‌ನ ಪ್ರಾಮುಖ್ಯತೆ

ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ತಡೆಯುವ ಕೀಲಿಯು ಯಾವುದೇ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳು ಇನ್ನು ಮುಂದೆ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದಾಗ ಅವುಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವುದಾಗಿದೆ. ಇಲ್ಲಿಯೇ ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಬರುತ್ತದೆ. useEffect ಹುಕ್ ಸೈಡ್ ಎಫೆಕ್ಟ್ ಫಂಕ್ಷನ್‌ನಿಂದ ಫಂಕ್ಷನ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ಹಿಂತಿರುಗಿಸಿದ ಫಂಕ್ಷನ್ ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಆಗಿದೆ, ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಅಥವಾ ಎಫೆಕ್ಟ್ ಪುನಃ ಚಲಾಯಿಸುವ ಮೊದಲು (ಡಿಪೆಂಡೆನ್ಸಿಗಳಲ್ಲಿನ ಬದಲಾವಣೆಗಳಿಂದಾಗಿ) ಇದು ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ.

ಇಲ್ಲಿ ಒಂದು ಮೂಲಭೂತ ಉದಾಹರಣೆ ಇದೆ:


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

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

  useEffect(() => {
    console.log('Effect ran');

    // ಇದು ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಆಗಿದೆ
    return () => {
      console.log('Cleanup ran');
    };
  }, []); // ಖಾಲಿ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇ: ಮೌಂಟ್ ಆದಾಗ ಒಮ್ಮೆ ಮಾತ್ರ ರನ್ ಆಗುತ್ತದೆ

  return (
    

      
Count: {count}

      
    

  );
}

export default MyComponent;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆದಾಗ console.log('Effect ran') ಒಮ್ಮೆ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ console.log('Cleanup ran') ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ.

ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್ ಅಗತ್ಯವಿರುವ ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶಗಳು

ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್ ನಿರ್ಣಾಯಕವಾಗಿರುವ ಕೆಲವು ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ:

1. ಟೈಮರ್‌ಗಳು (setTimeout ಮತ್ತು setInterval)

ನಿಮ್ಮ useEffect ಹುಕ್‌ನಲ್ಲಿ ನೀವು ಟೈಮರ್‌ಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಅವುಗಳನ್ನು ತೆರವುಗೊಳಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಇಲ್ಲದಿದ್ದರೆ, ಕಾಂಪೊನೆಂಟ್ ಹೋದ ನಂತರವೂ ಟೈಮರ್‌ಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಲೇ ಇರುತ್ತವೆ, ಇದು ಮೆಮೊರಿ ಲೀಕ್‌ಗಳಿಗೆ ಮತ್ತು ಸಂಭಾವ್ಯವಾಗಿ ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಿಯತಕಾಲಿಕವಾಗಿ ವಿನಿಮಯ ದರಗಳನ್ನು ಪಡೆಯುವ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅಪ್‌ಡೇಟ್ ಆಗುವ ಕರೆನ್ಸಿ ಪರಿವರ್ತಕವನ್ನು ಪರಿಗಣಿಸಿ:


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

function CurrencyConverter() {
  const [exchangeRate, setExchangeRate] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      // API ನಿಂದ ವಿನಿಮಯ ದರವನ್ನು ಪಡೆಯುವುದನ್ನು ಅನುಕರಿಸಿ
      const newRate = Math.random() * 1.2;  // ಉದಾಹರಣೆ: 0 ಮತ್ತು 1.2 ನಡುವಿನ ಯಾದೃಚ್ಛಿಕ ದರ
      setExchangeRate(newRate);
    }, 2000); // ಪ್ರತಿ 2 ಸೆಕೆಂಡುಗಳಿಗೆ ಅಪ್‌ಡೇಟ್ ಮಾಡಿ

    return () => {
      clearInterval(intervalId);
      console.log('Interval cleared!');
    };
  }, []);

  return (
    

      
Current Exchange Rate: {exchangeRate.toFixed(2)}

    

  );
}

export default CurrencyConverter;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಪ್ರತಿ 2 ಸೆಕೆಂಡುಗಳಿಗೆ exchangeRate ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು setInterval ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ, ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ clearInterval ಅನ್ನು ಬಳಸಿ ಇಂಟರ್ವಲ್ ಅನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ, ಇದು ಟೈಮರ್ ಮುಂದುವರಿದು ಮೆಮೊರಿ ಲೀಕ್‌ಗೆ ಕಾರಣವಾಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

2. ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳು

ನಿಮ್ಮ useEffect ಹುಕ್‌ನಲ್ಲಿ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಸೇರಿಸುವಾಗ, ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ನೀವು ಅವುಗಳನ್ನು ತೆಗೆದುಹಾಕಬೇಕು. ಹಾಗೆ ಮಾಡಲು ವಿಫಲವಾದರೆ ಒಂದೇ ಎಲಿಮೆಂಟ್‌ಗೆ ಬಹು ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಲಗತ್ತಿಸಲು ಕಾರಣವಾಗಬಹುದು, ಇದು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆ ಮತ್ತು ಮೆಮೊರಿ ಲೀಕ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗೆ ತನ್ನ ಲೇಔಟ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಲು ವಿಂಡೋ ರಿಸೈಜ್ ಈವೆಂಟ್‌ಗಳನ್ನು ಕೇಳುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ:


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

function ResponsiveComponent() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      console.log('Event listener removed!');
    };
  }, []);

  return (
    

      
Window Width: {windowWidth}

    

  );
}

export default ResponsiveComponent;

ಈ ಕೋಡ್ ವಿಂಡೋಗೆ ಒಂದು resize ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಲಿಸನರ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು removeEventListener ಅನ್ನು ಬಳಸುತ್ತದೆ, ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ.

3. ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್‌ಗಳು (ವೆಬ್‌ಸಾಕೆಟ್‌ಗಳು, RxJS ಅಬ್ಸರ್ವಬಲ್ಸ್, ಇತ್ಯಾದಿ)

ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ವೆಬ್‌ಸಾಕೆಟ್‌ಗಳು, RxJS ಅಬ್ಸರ್ವಬಲ್ಸ್, ಅಥವಾ ಇತರ ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್ ಯಾಂತ್ರಿಕತೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಡೇಟಾ ಸ್ಟ್ರೀಮ್‌ಗೆ ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಆಗಿದ್ದರೆ, ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್‌ಗಳನ್ನು ಸಕ್ರಿಯವಾಗಿ ಬಿಡುವುದು ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ಮತ್ತು ಅನಗತ್ಯ ನೆಟ್‌ವರ್ಕ್ ಟ್ರಾಫಿಕ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು. ನೈಜ-ಸಮಯದ ಸ್ಟಾಕ್ ಉಲ್ಲೇಖಗಳಿಗಾಗಿ ಕಾಂಪೊನೆಂಟ್ ವೆಬ್‌ಸಾಕೆಟ್ ಫೀಡ್‌ಗೆ ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಆಗುವ ಒಂದು ಉದಾಹರಣೆಯನ್ನು ಪರಿಗಣಿಸಿ:


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

function StockTicker() {
  const [stockPrice, setStockPrice] = useState(0);
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    // WebSocket ಸಂಪರ್ಕವನ್ನು ರಚಿಸುವುದನ್ನು ಅನುಕರಿಸಿ
    const newSocket = new WebSocket('wss://example.com/stock-feed');
    setSocket(newSocket);

    newSocket.onopen = () => {
      console.log('WebSocket connected');
    };

    newSocket.onmessage = (event) => {
      // ಸ್ಟಾಕ್ ಬೆಲೆ ಡೇಟಾವನ್ನು ಸ್ವೀಕರಿಸುವುದನ್ನು ಅನುಕರಿಸಿ
      const price = parseFloat(event.data);
      setStockPrice(price);
    };

    newSocket.onclose = () => {
      console.log('WebSocket disconnected');
    };

    newSocket.onerror = (error) => {
      console.error('WebSocket error:', error);
    };

    return () => {
      newSocket.close();
      console.log('WebSocket closed!');
    };
  }, []);

  return (
    

      
Stock Price: {stockPrice}

    

  );
}

export default StockTicker;

ಈ ಸನ್ನಿವೇಶದಲ್ಲಿ, ಕಾಂಪೊನೆಂಟ್ ಸ್ಟಾಕ್ ಫೀಡ್‌ಗೆ WebSocket ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಸಂಪರ್ಕವನ್ನು ಮುಚ್ಚಲು ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ socket.close() ಅನ್ನು ಬಳಸುತ್ತದೆ, ಸಂಪರ್ಕವು ಸಕ್ರಿಯವಾಗಿ ಉಳಿದು ಮೆಮೊರಿ ಲೀಕ್‌ಗೆ ಕಾರಣವಾಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

4. AbortController ಬಳಸಿ ಡೇಟಾ ಫೆಚಿಂಗ್

useEffect ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಪಡೆಯುವಾಗ, ವಿಶೇಷವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸಲು ಸ್ವಲ್ಪ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ APIಗಳಿಂದ, ವಿನಂತಿಯು ಪೂರ್ಣಗೊಳ್ಳುವ ಮೊದಲು ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದರೆ ಫೆಚ್ ವಿನಂತಿಯನ್ನು ರದ್ದುಗೊಳಿಸಲು ನೀವು AbortController ಅನ್ನು ಬಳಸಬೇಕು. ಇದು ಅನಗತ್ಯ ನೆಟ್‌ವರ್ಕ್ ಟ್ರಾಫಿಕ್ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದ ನಂತರ ಅದರ ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವುದರಿಂದ ಉಂಟಾಗುವ ಸಂಭಾವ್ಯ ದೋಷಗಳನ್ನು ತಡೆಯುತ್ತದೆ. ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಪಡೆಯುವ ಒಂದು ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:


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

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/user', { signal });
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (err) {
        if (err.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      controller.abort();
      console.log('Fetch aborted!');
    };
  }, []);

  if (loading) {
    return 
Loading...
;
  }

  if (error) {
    return 
Error: {error.message}
;
  }

  return (
    

      
User Profile

      
Name: {user.name}

      
Email: {user.email}

    

  );
}

export default UserProfile;

ಈ ಕೋಡ್ ಡೇಟಾವನ್ನು ಹಿಂಪಡೆಯುವ ಮೊದಲು ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದರೆ ಫೆಚ್ ವಿನಂತಿಯನ್ನು ರದ್ದುಗೊಳಿಸಲು AbortController ಅನ್ನು ಬಳಸುತ್ತದೆ. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ವಿನಂತಿಯನ್ನು ರದ್ದುಗೊಳಿಸಲು controller.abort() ಅನ್ನು ಕರೆಯುತ್ತದೆ.

useEffect ನಲ್ಲಿ ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

useEffect ನಲ್ಲಿನ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಯು ಎಫೆಕ್ಟ್ ಯಾವಾಗ ಪುನಃ ಚಲಾಯಿಸಲ್ಪಡುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುವಲ್ಲಿ ನಿರ್ಣಾಯಕ ಪಾತ್ರ ವಹಿಸುತ್ತದೆ. ಇದು ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಮೇಲೂ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ. ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಯನ್ನು ತಪ್ಪಿಸಲು ಮತ್ತು ಸರಿಯಾದ ಕ್ಲೀನಪ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಡಿಪೆಂಡೆನ್ಸಿಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯವಾಗಿದೆ.

ಖಾಲಿ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇ ([])

ನೀವು ಖಾಲಿ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇ ([]) ನೀಡಿದಾಗ, ಎಫೆಕ್ಟ್ ಆರಂಭಿಕ ರೆಂಡರ್ ನಂತರ ಒಮ್ಮೆ ಮಾತ್ರ ಚಲಿಸುತ್ತದೆ. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಮಾತ್ರ ಚಲಿಸುತ್ತದೆ. ಒಮ್ಮೆ ಮಾತ್ರ ಸ್ಥಾಪಿಸಬೇಕಾದ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳಿಗೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ, ಉದಾಹರಣೆಗೆ ವೆಬ್‌ಸಾಕೆಟ್ ಸಂಪರ್ಕವನ್ನು ಪ್ರಾರಂಭಿಸುವುದು ಅಥವಾ ಜಾಗತಿಕ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಸೇರಿಸುವುದು.

ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಡಿಪೆಂಡೆನ್ಸಿಗಳು

ನೀವು ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಯನ್ನು ಒದಗಿಸಿದಾಗ, ಅರೇಯಲ್ಲಿನ ಯಾವುದೇ ಮೌಲ್ಯಗಳು ಬದಲಾದಾಗ ಎಫೆಕ್ಟ್ ಪುನಃ ಚಲಿಸುತ್ತದೆ. ಎಫೆಕ್ಟ್ ಪುನಃ ಚಲಾಯಿಸುವ *ಮೊದಲು* ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ, ಹೊಸದನ್ನು ಸ್ಥಾಪಿಸುವ ಮೊದಲು ಹಿಂದಿನ ಎಫೆಕ್ಟ್ ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯಗಳನ್ನು ಅವಲಂಬಿಸಿರುವ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳಿಗೆ ಇದು ಮುಖ್ಯವಾಗಿದೆ, ಉದಾಹರಣೆಗೆ ಬಳಕೆದಾರರ ID ಆಧಾರದ ಮೇಲೆ ಡೇಟಾವನ್ನು ಪಡೆಯುವುದು ಅಥವಾ ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ ಆಧಾರದ ಮೇಲೆ DOM ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವುದು.

ಈ ಉದಾಹರಣೆಯನ್ನು ಪರಿಗಣಿಸಿ:


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

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

  useEffect(() => {
    let didCancel = false;

    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        const result = await response.json();
        if (!didCancel) {
          setData(result);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();

    return () => {
      didCancel = true;
      console.log('Fetch cancelled!');
    };
  }, [userId]);

  return (
    

      {data ? 
User Data: {data.name}
 : 
Loading...
}
    

  );
}

export default DataFetcher;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಎಫೆಕ್ಟ್ userId ಪ್ರೊಪ್ ಅನ್ನು ಅವಲಂಬಿಸಿದೆ. userId ಬದಲಾದಾಗಲೆಲ್ಲಾ ಎಫೆಕ್ಟ್ ಪುನಃ ಚಲಿಸುತ್ತದೆ. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ didCancel ಫ್ಲ್ಯಾಗ್ ಅನ್ನು true ಗೆ ಹೊಂದಿಸುತ್ತದೆ, ಇದು ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದ ನಂತರ ಅಥವಾ userId ಬದಲಾದ ನಂತರ ಫೆಚ್ ವಿನಂತಿಯು ಪೂರ್ಣಗೊಂಡರೆ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್ ಆಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಇದು "Can't perform a React state update on an unmounted component" ಎಚ್ಚರಿಕೆಯನ್ನು ತಡೆಯುತ್ತದೆ.

ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಯನ್ನು ಬಿಟ್ಟುಬಿಡುವುದು (ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಿ)

ನೀವು ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಯನ್ನು ಬಿಟ್ಟುಬಿಟ್ಟರೆ, ಪ್ರತಿ ರೆಂಡರ್ ನಂತರ ಎಫೆಕ್ಟ್ ಚಲಿಸುತ್ತದೆ. ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಶಿಫಾರಸು ಮಾಡಲಾಗುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳು ಮತ್ತು ಅನಂತ ಲೂಪ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಆದಾಗ್ಯೂ, ಕೆಲವು ಅಪರೂಪದ ಸಂದರ್ಭಗಳಲ್ಲಿ ಇದು ಅಗತ್ಯವಾಗಬಹುದು, ಉದಾಹರಣೆಗೆ ನೀವು ಪ್ರಾಪ್ಸ್ ಅಥವಾ ಸ್ಟೇಟ್‌ನ ಇತ್ತೀಚಿನ ಮೌಲ್ಯಗಳನ್ನು ಎಫೆಕ್ಟ್‌ನಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ಡಿಪೆಂಡೆನ್ಸಿಗಳಾಗಿ ಪಟ್ಟಿ ಮಾಡದೆಯೇ ಪ್ರವೇಶಿಸಬೇಕಾದಾಗ.

ಪ್ರಮುಖ: ನೀವು ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಯನ್ನು ಬಿಟ್ಟುಬಿಟ್ಟರೆ, ಯಾವುದೇ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವ ಬಗ್ಗೆ ನೀವು *ಅತ್ಯಂತ* ಜಾಗರೂಕರಾಗಿರಬೇಕು. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ *ಪ್ರತಿ* ರೆಂಡರ್‌ಗೆ ಮೊದಲು ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ, ಇದು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸದಿದ್ದರೆ ಅಸಮರ್ಥ ಮತ್ತು ಸಂಭಾವ್ಯವಾಗಿ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.

ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್ ಬಳಸುವಾಗ ಅನುಸರಿಸಬೇಕಾದ ಕೆಲವು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:

ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚುವ ಸಾಧನಗಳು

ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಹಲವಾರು ಸಾಧನಗಳು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಬಹುದು:

ತೀರ್ಮಾನ

ದೃಢವಾದ, ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ, ಮತ್ತು ಮೆಮೊರಿ-ದಕ್ಷ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ರಿಯಾಕ್ಟ್ ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್‌ನಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ ಸಾಧಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್‌ನ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ವಿವರಿಸಲಾದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ತಡೆಯಬಹುದು ಮತ್ತು ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಯಾವಾಗಲೂ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಲು, ಡಿಪೆಂಡೆನ್ಸಿಗಳ ಬಗ್ಗೆ ಗಮನಹರಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್‌ನಲ್ಲಿ ಯಾವುದೇ ಸಂಭಾವ್ಯ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಪರಿಹರಿಸಲು ಲಭ್ಯವಿರುವ ಸಾಧನಗಳನ್ನು ಬಳಸಲು ಮರೆಯದಿರಿ.

ಈ ತಂತ್ರಗಳನ್ನು ಶ್ರದ್ಧೆಯಿಂದ ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳನ್ನು ನೀವು ಹೆಚ್ಚಿಸಬಹುದು ಮತ್ತು ಕೇವಲ ಕ್ರಿಯಾತ್ಮಕವಲ್ಲದೆ, ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು, ಇದು ಜಗತ್ತಿನಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ಒಟ್ಟಾರೆ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕೊಡುಗೆ ನೀಡುತ್ತದೆ. ಮೆಮೊರಿ ನಿರ್ವಹಣೆಗೆ ಈ ಪೂರ್ವಭಾವಿ ವಿಧಾನವು ಅನುಭವಿ ಡೆವಲಪರ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಯೋಜನೆಗಳ ದೀರ್ಘಾವಧಿಯ ನಿರ್ವಹಣೆ ಮತ್ತು ವಿಸ್ತರಣೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.