ರಿಯಾಕ್ಟ್ ಯೂಸ್ ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್: ಟೈಮರ್‌ಗಳು, ಕೇಳುಗರು ಮತ್ತು ರೇಸ್‌ಗಳನ್ನು ಪಡೆದುಕೊಳ್ಳಿ

ಕೋಡ್ ಉದಾಹರಣೆಗಳಿಗೆ ರಿಯಾಕ್ಟ್ 18+ ಅಗತ್ಯವಿದೆ. StrictMode ಡಬಲ್-ಆಹ್ವಾನ ವರ್ತನೆಯನ್ನು ರಿಯಾಕ್ಟ್ 18 ರಲ್ಲಿ ಪರಿಚಯಿಸಲಾಯಿತು.

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

ಪರಿವಿಡಿ

ಯೂಸ್ ಎಫೆಕ್ಟ್ ಕ್ಲೀನಪ್ ನಿಜವಾಗಿ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಒಂದು ವಾಕ್ಯದಲ್ಲಿ ಸೆಟಪ್-ಕ್ಲೀನಪ್ ಲೈಫ್ಸೈಕಲ್

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

ಏಕೆ ಸ್ಟ್ರಿಕ್ಟ್‌ಮೋಡ್ ನಿಮ್ಮ ಪರಿಣಾಮಗಳನ್ನು ಡಬಲ್-ಆಹ್ವಾನಿಸುತ್ತದೆ

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

ಸ್ಟ್ರಿಕ್ಟ್‌ಮೋಡ್‌ನ ಡಬಲ್-ಮೌಂಟ್ ಅಡಿಯಲ್ಲಿ ತಪ್ಪಾಗಿ ವರ್ತಿಸುವ ಘಟಕವು ಸುಪ್ತ ಕ್ಲೀನಪ್ ದೋಷವನ್ನು ಹೊಂದಿದೆ, ಅದು ನ್ಯಾವಿಗೇಷನ್, ಷರತ್ತುಬದ್ಧ ರೆಂಡರಿಂಗ್ ಅಥವಾ ಪೋಷಕ ಮರು-ರೆಂಡರ್‌ಗಳ ಕಾರಣದಿಂದಾಗಿ ಘಟಕವನ್ನು ಮರುಸ್ಥಾಪಿಸಿದಾಗ ಉತ್ಪಾದನೆಯಲ್ಲಿ ಪ್ರಕಟವಾಗುತ್ತದೆ.

import { useEffect } from 'react';

function ExampleComponent({ dependency }) {
  useEffect(() => {
    
    
    
    console.log('Effect setup with dependency:', dependency);

    return () => {
      
      
      
      console.log('Effect cleanup for dependency:', dependency);
    };
  }, [dependency]); 
  
  

  return <div>Anatomy of useEffectdiv>;
}

ಪ್ಯಾಟರ್ನ್ 1: ಟೈಮರ್‌ಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವುದು (ಸೆಟ್ಇಂಟರ್ವಲ್ / ಸೆಟ್ಟೈಮ್ಔಟ್)

ಬಗ್: ಮರು-ಸಲ್ಲಿಕೆಯಲ್ಲಿ ಮಧ್ಯಂತರಗಳನ್ನು ಜೋಡಿಸುವುದು

ಯಾವಾಗ ಎ setInterval ಪ್ರಾಪ್ ಅಥವಾ ಸ್ಟೇಟ್ ಮೌಲ್ಯವನ್ನು ಅವಲಂಬಿಸಿರುವ useEffect ಒಳಗೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ, ಪ್ರತಿ ಬಾರಿ ಅವಲಂಬನೆ ಬದಲಾದಾಗ, ರಿಯಾಕ್ಟ್ ಪರಿಣಾಮವನ್ನು ಮರು-ರನ್ ಮಾಡುತ್ತದೆ. ಶುದ್ಧೀಕರಣವಿಲ್ಲದೆ, ಹಿಂದಿನ ಮಧ್ಯಂತರವು ಚಾಲನೆಯಲ್ಲಿದೆ. ಎರಡನೇ ಮಧ್ಯಂತರ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ನಂತರ ಮೂರನೇ. ಗಮನಿಸಬಹುದಾದ ರೋಗಲಕ್ಷಣವು ಮಧ್ಯಂತರವು ಏನು ಮಾಡುತ್ತದೆ ಎಂಬುದರ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ: ಕೌಂಟರ್ ಪ್ರತಿ ಟಿಕ್‌ಗೆ N ಪಟ್ಟು ಹೆಚ್ಚಾಗುತ್ತದೆ (ಇಲ್ಲಿ N ಎಂಬುದು ಅನಾಥ ಮಧ್ಯಂತರಗಳ ಸಂಖ್ಯೆ), ಮತದಾನದ ಕಾಲ್‌ಬ್ಯಾಕ್ ಪ್ರತಿ ಟಿಕ್‌ಗೆ ಅನೇಕ ಬಾರಿ ಉರಿಯುತ್ತದೆ ಅಥವಾ UI ಅನಿಮೇಷನ್ ಅನಿಯಮಿತವಾಗಿ ವೇಗಗೊಳ್ಳುತ್ತದೆ. ಪ್ರತಿ ಅನಾಥ ಮಧ್ಯಂತರವು ಸ್ಥಬ್ದ ಸ್ಥಿತಿಯ ಮೇಲೆ ಮುಚ್ಚುವಿಕೆಯನ್ನು ಹೊಂದಿದೆ, ಸಮಸ್ಯೆಯನ್ನು ಸಂಕೀರ್ಣಗೊಳಿಸುತ್ತದೆ. ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಸ್ಟ್ರಿಕ್ಟ್‌ಮೋಡ್‌ನ ಡಬಲ್-ಮೌಂಟ್ ಅಡಿಯಲ್ಲಿ, ಈ ದೋಷವು ಮೊದಲ ರೆಂಡರ್‌ನಿಂದ ಚಾಲನೆಯಲ್ಲಿರುವ ಎರಡು ಮಧ್ಯಂತರಗಳಂತೆ ತಕ್ಷಣವೇ ಹೊರಹೊಮ್ಮುತ್ತದೆ.

ಫಿಕ್ಸ್: ಕ್ಲೀನಪ್ ರಿಟರ್ನ್‌ನಲ್ಲಿ ಕ್ಲಿಯರ್ ಇಂಟರ್‌ವಲ್

ಸರಿಯಾದ ಮಾದರಿಯು ಸೆಟಪ್‌ನಲ್ಲಿ ಮಧ್ಯಂತರವನ್ನು ರಚಿಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವಲ್ಲಿ ತೆರವುಗೊಳಿಸುತ್ತದೆ. ಅವಲಂಬನೆ ಬದಲಾದಾಗ, ನವೀಕರಿಸಿದ ಮೌಲ್ಯದೊಂದಿಗೆ ಹೊಸದನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ರಿಯಾಕ್ಟ್ ಹಳೆಯ ಮಧ್ಯಂತರವನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ. ಇದು ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ನಿಖರವಾಗಿ ಒಂದು ಸಕ್ರಿಯ ಮಧ್ಯಂತರವನ್ನು ಖಾತರಿಪಡಿಸುತ್ತದೆ.

import { useEffect, useState } from 'react';

function PollingComponent({ delay }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    
    if (!delay || delay <= 0 || !Number.isFinite(delay)) return;

    
    
    
    

    
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, delay);

    return () => {
      clearInterval(id);
    };
  }, [delay]); 

  return <div>Count: {count}div>;
}

ಅದೇ ತತ್ವವು ಅನ್ವಯಿಸುತ್ತದೆ setTimeout. ಬದಲಾಯಿಸಿ setInterval ಜೊತೆಗೆ setTimeout ಮತ್ತು clearInterval ಜೊತೆಗೆ clearTimeout. ಶೆಡ್ಯೂಲಿಂಗ್ ಫಂಕ್ಷನ್‌ನಿಂದ ಹಿಂತಿರುಗಿಸಿದ ಟೈಮರ್ ಐಡಿಯನ್ನು ಸಂಗ್ರಹಿಸಿ, ನಂತರ ಕ್ಲೀನಪ್ ರಿಟರ್ನ್‌ನಲ್ಲಿ ಅದನ್ನು ತೆರವುಗೊಳಿಸಿ.

ಪ್ಯಾಟರ್ನ್ 2: ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವುದು

ಬಗ್: ವಿಂಡೋ/ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಲಿಸನರ್ ಪೈಲ್-ಅಪ್

ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಸೇರಿಸಲಾಗುತ್ತಿದೆ window, documentಅಥವಾ ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ವಂತ ರೆಂಡರ್ ಟ್ರೀಯ ಹೊರಗಿರುವ ಯಾವುದೇ DOM ನೋಡ್‌ಗೆ ಹಸ್ತಚಾಲಿತವಾಗಿ ಸ್ವಚ್ಛಗೊಳಿಸುವ ಅಗತ್ಯವಿದೆ. ಹೊಂದಾಣಿಕೆ ಇಲ್ಲದೆ removeEventListener ಕ್ಲೀನಪ್ ರಿಟರ್ನ್‌ನಲ್ಲಿ, ಪ್ರತಿ ಮರು-ರೆಂಡರ್ (ಅಥವಾ ಸ್ಟ್ರಿಕ್ಟ್‌ಮೋಡ್ ಡಬಲ್-ಮೌಂಟ್) ಹೆಚ್ಚುವರಿ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಲಗತ್ತಿಸುತ್ತದೆ. ನಿರ್ವಾಹಕರು ಸಂಗ್ರಹಿಸುತ್ತಾರೆ. ಸ್ಥಿತಿಯನ್ನು ನವೀಕರಿಸುವ ಮರುಗಾತ್ರಗೊಳಿಸುವ ಕೇಳುಗನು ಪ್ರತಿ ಮರುಗಾತ್ರಗೊಳಿಸುವ ಈವೆಂಟ್‌ಗೆ ಹಲವಾರು ಬಾರಿ ಸೆಟ್‌ಸ್ಟೇಟ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ, ಪ್ರತಿ ಅನಾಥ ಕೇಳುಗನಿಗೆ ಒಮ್ಮೆ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಕುಗ್ಗಿಸುತ್ತದೆ ಮತ್ತು ಒಂದೇ ಸ್ಟೇಟ್ ವೇರಿಯೇಬಲ್ ಅನ್ನು ನವೀಕರಿಸಲು ಬಹು ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ರೇಸ್ ಮಾಡಿದಾಗ ಸೂಕ್ಷ್ಮ ಸ್ಥಿತಿಯ ಭ್ರಷ್ಟಾಚಾರವನ್ನು ಉಂಟುಮಾಡಬಹುದು.

ಫಿಕ್ಸ್: ಮ್ಯಾಚಿಂಗ್ ಸೇರಿಸಿ ಮತ್ತು ಅದೇ ಉಲ್ಲೇಖದೊಂದಿಗೆ ತೆಗೆದುಹಾಕಿ

ನಿರ್ಣಾಯಕ ವಿವರ ಅದು removeEventListener ರವಾನಿಸಲಾದ ಅದೇ ಕಾರ್ಯದ ಉಲ್ಲೇಖವನ್ನು ಸ್ವೀಕರಿಸಬೇಕು addEventListener. ಪರಿಣಾಮದ ದೇಹದೊಳಗೆ ರಚಿಸಲಾದ ಇನ್‌ಲೈನ್ ಬಾಣದ ಕಾರ್ಯವು ಪ್ರತಿ ಆಹ್ವಾನದ ಮೇಲೆ ಹೊಸ ಉಲ್ಲೇಖವನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಕರೆ ಮಾಡುತ್ತದೆ removeEventListener ಬೇರೆ ಇನ್‌ಲೈನ್ ಬಾಣದೊಂದಿಗೆ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ. ಕೇಳುಗನನ್ನು ಎಂದಿಗೂ ತೆಗೆದುಹಾಕಲಾಗುವುದಿಲ್ಲ. ಪರಿಣಾಮದ ಒಳಗೆ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಹೆಸರಿಸಲಾದ ಫಂಕ್ಷನ್ (ಅಥವಾ ಕಾರ್ಯವನ್ನು ಹೊಂದಿರುವ ವೇರಿಯಬಲ್) ಎಂದು ಘೋಷಿಸಿ, ನಂತರ ಅದೇ ವೇರಿಯಬಲ್ ಅನ್ನು ಎರಡಕ್ಕೂ ರವಾನಿಸಿ addEventListener ಮತ್ತು removeEventListener.

ನಿರ್ಣಾಯಕ ವಿವರ ಅದು removeEventListener ರವಾನಿಸಲಾದ ಅದೇ ಕಾರ್ಯದ ಉಲ್ಲೇಖವನ್ನು ಸ್ವೀಕರಿಸಬೇಕು addEventListener.

import { useEffect, useState } from 'react';

function WindowSizeTracker() {
  
  
  
  const [width, setWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 0); 

  useEffect(() => {
    if (typeof window === 'undefined') return;

    
    function handleResize() {
      setWidth(window.innerWidth);
    }

    window.addEventListener('resize', handleResize);

    return () => {
      
      window.removeEventListener('resize', handleResize);
    };
  }, []); 

  return <div>Window width: {width}pxdiv>;
}

ಹ್ಯಾಂಡ್ಲರ್ ಪ್ರಾಪ್ ಅಥವಾ ಸ್ಟೇಟ್ ಮೌಲ್ಯವನ್ನು ಅವಲಂಬಿಸಿದ್ದರೆ ಮತ್ತು ಪರಿಣಾಮದ ಹೊರಗೆ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ (ಉದಾಹರಣೆಗೆ, ಜೊತೆಗೆ useCallback), ಆ ಹ್ಯಾಂಡ್ಲರ್ ಅವಲಂಬನೆ ರಚನೆಯಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕು. ಉಲ್ಲೇಖ ಬದಲಾದಾಗ, ರಿಯಾಕ್ಟ್ ಹಳೆಯ ಕೇಳುಗನನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಹೊಸದನ್ನು ಲಗತ್ತಿಸುತ್ತದೆ. ಪ್ರತಿ ಅವಲಂಬನೆ ಬದಲಾವಣೆಯ ಮೇಲೆ ಕೇಳುಗರನ್ನು ಮರು-ಸೇರಿಸುವುದು ಸರಿಯಾದ ನಡವಳಿಕೆಯಾಗಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ: ಹಳೆಯ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು (ಹಳೆಯ ಮುಚ್ಚುವಿಕೆಯೊಂದಿಗೆ) ತೆಗೆದುಹಾಕಲಾಗಿದೆ ಮತ್ತು ಹೊಸ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು (ತಾಜಾ ಮೌಲ್ಯಗಳೊಂದಿಗೆ) ಲಗತ್ತಿಸಲಾಗಿದೆ.

ಪ್ಯಾಟರ್ನ್ 3: AbortController ನೊಂದಿಗೆ ರೇಸ್ ಷರತ್ತುಗಳನ್ನು ತರುವುದನ್ನು ರದ್ದುಗೊಳಿಸಲಾಗುತ್ತಿದೆ

ದ ಬಗ್: ಸ್ಟಾಲ್ ರೆಸ್ಪಾನ್ಸ್‌ಗಳು ಓವರ್‌ರೈಟಿಂಗ್ ಫ್ರೆಶ್ ಸ್ಟೇಟ್

ಬಳಕೆದಾರರು ತ್ವರಿತವಾಗಿ ಟೈಪ್ ಮಾಡುವ ಹುಡುಕಾಟ ಘಟಕವನ್ನು ಪರಿಗಣಿಸಿ. ಪ್ರತಿ ಕೀಸ್ಟ್ರೋಕ್ ಹೊಸ ತರುವಿಕೆಯನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ. “ರಿಯಾ” ಗಾಗಿ ವಿನಂತಿಯು 300ms ತೆಗೆದುಕೊಳ್ಳಬಹುದು ಆದರೆ “ಪ್ರತಿಕ್ರಿಯೆ” ಗಾಗಿ ವಿನಂತಿಯು 50ms ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. “ಪ್ರತಿಕ್ರಿಯಿಸುವ” ಪ್ರತಿಕ್ರಿಯೆಯು ಮೊದಲು ಬರುತ್ತದೆ ಮತ್ತು UI ಸರಿಯಾದ ಫಲಿತಾಂಶಗಳನ್ನು ತೋರಿಸುತ್ತದೆ. ನಂತರ “rea” ಪ್ರತಿಕ್ರಿಯೆಯು ಬರುತ್ತದೆ, ಮತ್ತು ಯಾವುದೂ ಅದನ್ನು setState ಗೆ ಕರೆ ಮಾಡುವುದನ್ನು ತಡೆಯದ ಕಾರಣ, ಇದು UI ಅನ್ನು ಹಳೆಯ, ತಪ್ಪಾದ ಫಲಿತಾಂಶಗಳೊಂದಿಗೆ ತಿದ್ದಿ ಬರೆಯುತ್ತದೆ. ಇದು ಕ್ಲಾಸಿಕ್ ಓಟದ ಸ್ಥಿತಿಯಾಗಿದೆ. ನಿಧಾನಗತಿಯ ಪ್ರತಿಕ್ರಿಯೆಯು ಗೆಲ್ಲುತ್ತದೆ ಏಕೆಂದರೆ ಅದು ತೀರಾ ಇತ್ತೀಚಿನದು ಅಲ್ಲ, ಆದರೆ ಅದು ನಂತರ ಪರಿಹರಿಸುತ್ತದೆ. ರದ್ದುಗೊಳಿಸದೆಯೇ, ಇನ್-ಫ್ಲೈಟ್ ವಿನಂತಿಯನ್ನು ತಿರಸ್ಕರಿಸಲು ಬ್ರೌಸರ್‌ಗೆ ಹೇಳಲು ಯಾವುದೇ ಕಾರ್ಯವಿಧಾನವಿಲ್ಲ, ಅದರ ಫಲಿತಾಂಶಗಳು ಇನ್ನು ಮುಂದೆ ಪ್ರಸ್ತುತವಾಗಿರುವುದಿಲ್ಲ.

ಫಿಕ್ಸ್: AbortController Signal in Cleanup

ಆಧುನಿಕ ಪರಿಹಾರವೆಂದರೆ AbortController. ಪ್ರತಿ ಪರಿಣಾಮದ ಆಹ್ವಾನವು ಹೊಸ ನಿಯಂತ್ರಕ ನಿದರ್ಶನವನ್ನು ರಚಿಸುತ್ತದೆ. ನಿಯಂತ್ರಕ ನ signal ಆಸ್ತಿಯನ್ನು ರವಾನಿಸಲಾಗಿದೆ fetch ಒಂದು ಆಯ್ಕೆಯಾಗಿ. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ರನ್ ಆಗುವಾಗ (ಅವಲಂಬನೆ ಬದಲಾಗಿರುವುದರಿಂದ ಅಥವಾ ಘಟಕವನ್ನು ಅನ್‌ಮೌಂಟ್ ಮಾಡಿರುವುದರಿಂದ), ಅದು ಕರೆ ಮಾಡುತ್ತದೆ controller.abort()ಇದು ವಿಮಾನದಲ್ಲಿನ ವಿನಂತಿಯನ್ನು ರದ್ದುಗೊಳಿಸುತ್ತದೆ. ಪಡೆಯುವ ಭರವಸೆ ಒಂದು ಜೊತೆ ತಿರಸ್ಕರಿಸುತ್ತದೆ AbortError. ಬ್ರೌಸರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಆಧಾರವಾಗಿರುವ ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಯನ್ನು ರದ್ದುಗೊಳಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತವೆ, ಆದರೂ ವರ್ತನೆಯು ಎಂಜಿನ್‌ನಿಂದ ಬದಲಾಗುತ್ತದೆ (AbortSignal ಮತ್ತು MDN ನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಕೋಷ್ಟಕಗಳಲ್ಲಿ ಪಡೆದುಕೊಳ್ಳಿ ಸ್ಪೆಕ್ ಅನ್ನು ನೋಡಿ). ತೀರಾ ಇತ್ತೀಚಿನ ವಿನಂತಿಯು ಮಾತ್ರ ಸ್ಥಿತಿಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಹೊಂದಿಸಬಹುದು ಎಂದು ಇದು ಖಾತರಿಪಡಿಸುತ್ತದೆ.

ಅಬಾರ್ಟ್ ಎರರ್ ಅನ್ನು ಆಕರ್ಷಕವಾಗಿ ನಿರ್ವಹಿಸುವುದು

ಕರೆ ಮಾಡಲಾಗುತ್ತಿದೆ abort() ಭರವಸೆಯನ್ನು ತಿರಸ್ಕರಿಸುತ್ತದೆ. ಇದು ಸಾಮಾನ್ಯ, ದೋಷ ಸ್ಥಿತಿಯಲ್ಲ. ಕ್ಯಾಚ್ ಬ್ಲಾಕ್ ಅನ್ನು ಪ್ರತ್ಯೇಕಿಸಬೇಕು AbortError ನಿಜವಾದ ನೆಟ್ವರ್ಕ್ ವೈಫಲ್ಯಗಳಿಂದ. ಈ ಸಿಬ್ಬಂದಿ ಇಲ್ಲದೆ, UI ಪ್ರತಿ ಉದ್ದೇಶಪೂರ್ವಕ ರದ್ದತಿಗೆ ದೋಷವನ್ನು ಫ್ಲಾಶ್ ಮಾಡುತ್ತದೆ, ಅಥವಾ ನಿರಾಕರಣೆ ದೋಷ-ಲಾಗಿಂಗ್ ಮೂಲಸೌಕರ್ಯವನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ. ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಚೆಕ್ ದೋಷವನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ name ಆಸ್ತಿ: ಅದು ಸಮನಾಗಿದ್ದರೆ 'AbortError'ಕ್ಯಾಚ್ ಬ್ಲಾಕ್ ಸ್ಥಿತಿಯನ್ನು ನವೀಕರಿಸದೆ ಅಥವಾ ದೋಷವನ್ನು ಹೊರತೆಗೆಯದೆ ಬೇಗನೆ ಹಿಂತಿರುಗುತ್ತದೆ.

import { useEffect, useState } from 'react';

function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!query) {
      setResults([]);
      setError(null);
      setLoading(false);
      return;
    }

    
    const controller = new AbortController();

    async function fetchResults() {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
          signal: controller.signal,
        });
        if (!response.ok) {
          throw new Error(`HTTP ${response.status}`);
        }
        const data = await response.json();
        const items = Array.isArray(data?.items) ? data.items : [];
        setResults(items);
      } catch (err) {
        if (err.name === 'AbortError') {
          
          return;
        }
        
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchResults();

    return () => {
      controller.abort();
    };
  }, [query]); 

  if (error) return <div>Error: {error}div>;
  if (loading) return <div>Loading...div>;
  return (
    <ul>
      {results.map((item, index) => (
        <li key={item.id ?? `item-${index}`}>{item.title ?? '(Untitled)'}li>
      ))}
    ul>
  );
}

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

ಉಲ್ಲೇಖ ಕೋಷ್ಟಕ: ಒಂದು ನೋಟದಲ್ಲಿ ಸೆಟಪ್, ಕ್ಲೀನಪ್ ಮತ್ತು ಮೋಸಗಳು

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

ಸನ್ನಿವೇಶ	ಸೆಟಪ್ ಕ್ರಿಯೆ	ನಿರ್ಮಲೀಕರಣ ಕ್ರಿಯೆ	ಸಾಮಾನ್ಯ ಪಿಟ್ಫಾಲ್
`setInterval` / `setTimeout`	ಟೈಮರ್ ಪ್ರಾರಂಭಿಸಿ	`clearInterval` / `clearTimeout`	ಅವಲಂಬನೆ ಬದಲಾವಣೆಯ ಮೇಲೆ ಮಧ್ಯಂತರಗಳನ್ನು ಜೋಡಿಸುವುದು
`addEventListener`	ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಲಗತ್ತಿಸಿ	`removeEventListener` ಅದೇ ಉಲ್ಲೇಖದೊಂದಿಗೆ	ಇನ್‌ಲೈನ್ ಬಾಣ ≠ ಅದೇ ಉಲ್ಲೇಖ
`fetch`	ಇದರೊಂದಿಗೆ ಬೆಂಕಿಯ ವಿನಂತಿ `signal`	`controller.abort()`	ಹಳೆಯ ಪ್ರತಿಕ್ರಿಯೆಯು ಸ್ಥಿತಿಯನ್ನು ತಿದ್ದಿ ಬರೆಯುತ್ತದೆ
ವೆಬ್ಸಾಕೆಟ್	`new WebSocket(url)` + ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಲಗತ್ತಿಸಿ	ಶೂನ್ಯ ನಿರ್ವಾಹಕರು, ನಂತರ `ws.close()`	ಅನ್‌ಮೌಂಟ್‌ನಲ್ಲಿ ಸಂಪರ್ಕ ಸೋರಿಕೆ
ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಚಂದಾದಾರಿಕೆ (ಉದಾ, Firebase `onSnapshot`)	ಚಂದಾದಾರರಾಗಿ	ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಕಾರ್ಯಕ್ಕೆ ಕರೆ ಮಾಡಿ	ಹಿಂತಿರುಗಿಸುವ ಮೌಲ್ಯವನ್ನು ಮರೆತುಬಿಡುವುದು ಅನ್‌ಸಬ್ ಆಗಿದೆ

ವೆಬ್‌ಸಾಕೆಟ್ ಮತ್ತು ಫೈರ್‌ಬೇಸ್ ಮಾದರಿಗಳು ಉಲ್ಲೇಖಕ್ಕಾಗಿ ಇಲ್ಲಿ ಗೋಚರಿಸುತ್ತವೆ; ಪೂರ್ಣ ಅನುಷ್ಠಾನದ ವಿವರಗಳಿಗಾಗಿ MDN ನ WebSocket API ಡಾಕ್ಸ್ ಮತ್ತು Firebase ದಸ್ತಾವೇಜನ್ನು ನೋಡಿ.

ಮಾದರಿಯು ಯಾವಾಗಲೂ ಒಂದೇ ಆಗಿರುತ್ತದೆ: ಸಂಪನ್ಮೂಲವನ್ನು ಪಡೆದುಕೊಳ್ಳಿ, ಸಂಪನ್ಮೂಲವನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿ, ಅವಲಂಬನೆಗಳನ್ನು ಪ್ರಾಮಾಣಿಕವಾಗಿ ಘೋಷಿಸಿ. ಸೆಟಪ್ ಏನನ್ನಾದರೂ ರಚಿಸಿದರೆ, ಸ್ವಚ್ಛಗೊಳಿಸುವಿಕೆಯು ಅದನ್ನು ನಾಶಪಡಿಸುತ್ತದೆ. ಸೆಟಪ್ ಸಂಪರ್ಕಗೊಂಡರೆ, ಕ್ಲೀನಪ್ ಸಂಪರ್ಕ ಕಡಿತಗೊಳ್ಳುತ್ತದೆ. ಈ ಸಮ್ಮಿತಿಯನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳಿ ಮತ್ತು ಪ್ರತಿ ಹೊಸ ಅಡ್ಡ ಪರಿಣಾಮವು ಅದೇ ತತ್ವದ ನೇರ ಅನ್ವಯವಾಗುತ್ತದೆ.

ಬಳಕೆಯ ಪರಿಣಾಮ ನಿರ್ಮಲೀಕರಣಕ್ಕಾಗಿ PR ವಿಮರ್ಶೆ ಪರಿಶೀಲನಾಪಟ್ಟಿ

ಈ ಪರಿಶೀಲನಾಪಟ್ಟಿಯನ್ನು ನೇರವಾಗಿ ತಂಡದ ಕೊಡುಗೆ ಮಾರ್ಗಸೂಚಿಗಳಿಗೆ ಬಿಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಅಥವಾ ಕೋಡ್ ಪರಿಶೀಲನೆಯ ಸಮಯದಲ್ಲಿ ಮಾನಸಿಕ ದರ್ಶನವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಪ್ರತಿ ಪ್ರಶ್ನೆಯು ಕ್ಲೀನಪ್ ದೋಷದ ನಿರ್ದಿಷ್ಟ ವರ್ಗವನ್ನು ಗುರಿಯಾಗಿಸುತ್ತದೆ.

ಪ್ರತಿ ಮಾಡುತ್ತದೆ useEffect ಇದು ಅಡ್ಡ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ ಸ್ವಚ್ಛಗೊಳಿಸುವ ಕಾರ್ಯವನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆಯೇ?
ಶುಚಿಗೊಳಿಸುವಿಕೆಯು ಸೆಟಪ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಹಿಮ್ಮೆಟ್ಟಿಸುತ್ತದೆಯೇ (ಟೈಮರ್ ತೆರವುಗೊಳಿಸಿ, ಕೇಳುಗರನ್ನು ತೆಗೆದುಹಾಕಿ, ಪಡೆಯುವುದನ್ನು ನಿಲ್ಲಿಸಿ)?
ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಉಲ್ಲೇಖಗಳು ಸ್ಥಿರವಾಗಿದೆಯೇ (ಹೆಸರಿನ ಕಾರ್ಯ ಅಥವಾ useCallback) ಆದ್ದರಿಂದ removeEventListener ವಾಸ್ತವವಾಗಿ ಹೊಂದಾಣಿಕೆಗಳು?
ಆಗಿದೆ AbortError ನಿಜವಾದ ನೆಟ್‌ವರ್ಕ್ ದೋಷಗಳಿಂದ ಪ್ರತ್ಯೇಕವಾಗಿ ಹಿಡಿಯಲಾಗಿದೆ ಮತ್ತು ನಿರ್ವಹಿಸಲಾಗಿದೆ (ಉದಾ, ದೋಷ ಸ್ಥಿತಿಯನ್ನು ಹೊಂದಿಸದೆ ಅಥವಾ ಲಾಗಿಂಗ್ ಮಾಡದೆ ಬೇಗನೆ ಹಿಂತಿರುಗುವುದು)?
ಅವಲಂಬನೆ ರಚನೆಯು ಪರಿಣಾಮದೊಳಗೆ ಉಲ್ಲೇಖಿಸಲಾದ ಪ್ರತಿಯೊಂದು ಮೌಲ್ಯವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆಯೇ?
ರಿಯಾಕ್ಟ್ ಸ್ಟ್ರಿಕ್ಟ್‌ಮೋಡ್ ಡಬಲ್-ಮೌಂಟ್ ಅಡಿಯಲ್ಲಿ ಘಟಕವನ್ನು ಪರೀಕ್ಷಿಸಲಾಗಿದೆಯೇ?
ಯಾವುದಾದರೂ ಇವೆಯೇ eslint-disable react-hooks/exhaustive-deps ಕಾಮೆಂಟ್‌ಗಳು? ಹಾಗಿದ್ದಲ್ಲಿ, ನಿಗ್ರಹವು ಏಕೆ ಸುರಕ್ಷಿತವಾಗಿದೆ ಎಂಬುದನ್ನು ವಿವರಿಸುವ ಜೊತೆಯಲ್ಲಿರುವ ಕೋಡ್ ಕಾಮೆಂಟ್‌ನೊಂದಿಗೆ ಪ್ರತಿಯೊಂದನ್ನು ಸಮರ್ಥಿಸಲಾಗುತ್ತದೆಯೇ?

ಎಲ್ಲಾ ಏಳು ಚೆಕ್‌ಗಳನ್ನು ಹಾದುಹೋಗುವ PR, ಉತ್ಪಾದನೆಯನ್ನು ತಲುಪುವ ಮೊದಲು ಕ್ಲೀನಪ್-ಸಂಬಂಧಿತ ದೋಷಗಳ ಆಗಾಗ್ಗೆ ವರದಿ ಮಾಡಲಾದ ವರ್ಗಗಳನ್ನು ಒಳಗೊಳ್ಳುತ್ತದೆ.

ಎಕ್ಸಾಸ್ಟಿವ್-ಡೆಪ್ಸ್ ಲಿಂಟ್ ನಿಯಮವನ್ನು ನಿಗ್ರಹಿಸುವುದು

ದಿ react-hooks/exhaustive-deps ಹಳೆಯ ಮುಚ್ಚುವಿಕೆಗೆ ಕಾರಣವಾಗುವ ಕಾಣೆಯಾದ ಅವಲಂಬನೆಗಳನ್ನು ಹಿಡಿಯಲು ESLint ನಿಯಮವು ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ. ನಿಯಮವನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದರಿಂದ ದೋಷವನ್ನು ಸರಿಪಡಿಸುವ ಬದಲು ಮರೆಮಾಡುತ್ತದೆ. ಪರಿಣಾಮವು ಹಳೆಯ ಮೌಲ್ಯದ ಮೇಲೆ ಮುಚ್ಚುತ್ತದೆ ಮತ್ತು ಆ ಮೌಲ್ಯದ ಬದಲಾವಣೆಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಎಂದಿಗೂ ಮರು-ರನ್ ಆಗುವುದಿಲ್ಲ, ಮರುಉತ್ಪಾದಿಸಲು ಮತ್ತು ಡೀಬಗ್ ಮಾಡಲು ಕಷ್ಟಕರವಾದ ಹಳೆಯ ಮುಚ್ಚುವಿಕೆಯನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ. ನಿಯಮವು ಅವಲಂಬನೆಯನ್ನು ಫ್ಲ್ಯಾಗ್ ಮಾಡಿದಾಗ, ಅದನ್ನು ಸೇರಿಸಿ. ಅದು ಅನಗತ್ಯ ಮರು-ರನ್‌ಗಳನ್ನು ಉಂಟುಮಾಡಿದರೆ, ಪರಿಣಾಮವನ್ನು ಪುನರ್ರಚಿಸಿ: ತರ್ಕವನ್ನು ಹೊರತೆಗೆಯಿರಿ, ಬಹು ಪರಿಣಾಮಗಳಾಗಿ ವಿಭಜಿಸಿ, ಅಥವಾ ಇದರೊಂದಿಗೆ ಉಲ್ಲೇಖಗಳನ್ನು ಸ್ಥಿರಗೊಳಿಸಿ useCallback ಅಥವಾ useMemo. ನಿಗ್ರಹವು ಕೊನೆಯ ಉಪಾಯವಾಗಿರಬೇಕು, ಲೋಪವು ಏಕೆ ಉದ್ದೇಶಪೂರ್ವಕ ಮತ್ತು ಸುರಕ್ಷಿತವಾಗಿದೆ ಎಂಬುದನ್ನು ವಿವರಿಸುವ ಕಾಮೆಂಟ್‌ನೊಂದಿಗೆ ಯಾವಾಗಲೂ ಜೋಡಿಯಾಗಿರಬೇಕು.

ಕಾರ್ಯದ ಬದಲಿಗೆ ಭರವಸೆಯನ್ನು ಹಿಂದಿರುಗಿಸುವುದು

ಪರಿಣಾಮ ಕಾಲ್‌ಬ್ಯಾಕ್ ಎಂದು ಗುರುತಿಸಲಾಗುತ್ತಿದೆ async ಸಾಮಾನ್ಯ ಬಲೆಯಾಗಿದೆ. ಎ async ಕಾರ್ಯವು ಸೂಚ್ಯವಾಗಿ ಭರವಸೆಯನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ. ರಿಯಾಕ್ಟ್ ರಿಟರ್ನ್ ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ undefined ಅಥವಾ ಸಿಂಕ್ರೊನಸ್ ಕ್ಲೀನಪ್ ಕಾರ್ಯ. ರಿಯಾಕ್ಟ್ ಹಿಂತಿರುಗಿದ ಭರವಸೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ ಮತ್ತು ಸ್ವಚ್ಛಗೊಳಿಸುವ ಕಾರ್ಯವನ್ನು ಎಂದಿಗೂ ನೋಂದಾಯಿಸುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ಅನ್‌ಮೌಂಟ್ ಅಥವಾ ಅವಲಂಬನೆ ಬದಲಾವಣೆಯಲ್ಲಿ ಯಾವುದೂ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ. ಸರಿಪಡಿಸುವಿಕೆಯು ಯಾವಾಗಲೂ ಒಂದೇ ಆಗಿರುತ್ತದೆ: ಪರಿಣಾಮದ ಒಳಗೆ ಒಳಗಿನ ಅಸಿಂಕ್ ಕಾರ್ಯವನ್ನು ವಿವರಿಸಿ ಮತ್ತು ತಕ್ಷಣವೇ ಅದನ್ನು ಆಹ್ವಾನಿಸಿ, ಹೊರಗಿನ ಪರಿಣಾಮದ ಕಾರ್ಯವನ್ನು ಸಿಂಕ್ರೊನಸ್ ಆಗಿ ಇರಿಸಿಕೊಳ್ಳಿ ಇದರಿಂದ ರಿಟರ್ನ್ ಸ್ಟೇಟ್‌ಮೆಂಟ್ ಸರಿಯಾದ ಶುದ್ಧೀಕರಣ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಹಿಂತಿರುಗಿದ ಭರವಸೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ ಮತ್ತು ಸ್ವಚ್ಛಗೊಳಿಸುವ ಕಾರ್ಯವನ್ನು ಎಂದಿಗೂ ನೋಂದಾಯಿಸುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ಅನ್‌ಮೌಂಟ್ ಅಥವಾ ಅವಲಂಬನೆ ಬದಲಾವಣೆಯಲ್ಲಿ ಯಾವುದೂ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.

ಪ್ರಮುಖ ಟೇಕ್ಅವೇಗಳು

ಪ್ರತಿ useEffect ಒಂದು ಸಂಪನ್ಮೂಲವನ್ನು ಪಡೆದುಕೊಳ್ಳುವುದು ಅದನ್ನು ಬಿಡುಗಡೆ ಮಾಡುವ ಕ್ಲೀನಪ್ ಕಾರ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು. ಒಂದೇ ವಿನಾಯಿತಿ: ಯಾವುದೇ ನಿರಂತರ ಅಡ್ಡ ಪರಿಣಾಮವನ್ನು ಉಂಟುಮಾಡುವ ಪರಿಣಾಮ (ಉದಾ, ಒಂದು ಬಾರಿ ಬೆಂಕಿ ಮತ್ತು ಮರೆತುಹೋಗುವ ವಿಶ್ಲೇಷಣೆಯ ಕರೆ).
AbortController ಪಡೆಯುವಿಕೆ ವಿನಂತಿಗಳನ್ನು ರದ್ದುಗೊಳಿಸಲು ಆಧುನಿಕ, ಬ್ರೌಸರ್-ಸ್ಥಳೀಯ ಸಾಧನವಾಗಿದೆ. ಇದು ಬೂಲಿಯನ್ ಧ್ವಜಗಳು ಅಥವಾ ಅನುಕ್ರಮ ಕೌಂಟರ್‌ಗಳಿಲ್ಲದೆ ಓಟದ ಪರಿಸ್ಥಿತಿಗಳನ್ನು ನಿವಾರಿಸುತ್ತದೆ.
ಸಂಪನ್ಮೂಲವನ್ನು ಪಡೆದುಕೊಳ್ಳಿ, ಸಂಪನ್ಮೂಲವನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿ, ಅವಲಂಬನೆಗಳನ್ನು ಪ್ರಾಮಾಣಿಕವಾಗಿ ಘೋಷಿಸಿ. ಆ ತತ್ವವು ಟೈಮರ್‌ಗಳು, ಕೇಳುಗರು, ಪಡೆದುಕೊಳ್ಳುವಿಕೆಗಳು, ವೆಬ್‌ಸಾಕೆಟ್‌ಗಳು ಮತ್ತು ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಚಂದಾದಾರಿಕೆಗಳಿಗೆ ಸಮಾನವಾಗಿ ಅನ್ವಯಿಸುತ್ತದೆ.
ನಿಮ್ಮ ಕೊಡುಗೆ ಮಾರ್ಗಸೂಚಿಗಳಲ್ಲಿ ಏಳು-ಐಟಂ PR ವಿಮರ್ಶೆ ಪರಿಶೀಲನಾ ಪಟ್ಟಿಯನ್ನು ಬಿಡಿ ಅಥವಾ ವಿನಂತಿಯ ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ಎಳೆಯಿರಿ. ಉತ್ಪಾದನೆಯನ್ನು ತಲುಪುವ ಮೊದಲು ಇದು ಸಾಮಾನ್ಯವಾಗಿ ವರದಿ ಮಾಡಲಾದ ಕ್ಲೀನಪ್ ದೋಷಗಳನ್ನು ಹಿಡಿಯುತ್ತದೆ.

Source link