ರಿಯಾಕ್ಟ್ experimental_useSubscription: ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರಭಾವವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ತಗ್ಗಿಸುವುದು

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

experimental_useSubscription ಎಂದರೇನು?

experimental_useSubscription, ಪ್ರಸ್ತುತ ರಿಯಾಕ್ಟ್‌ನ ಪ್ರಾಯೋಗಿಕ API ಗಳ ಭಾಗವಾಗಿದ್ದು, ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಬಾಹ್ಯ ಡೇಟಾ ಸ್ಟೋರ್‌ಗಳಿಗೆ (ಉದಾಹರಣೆಗೆ Redux ಸ್ಟೋರ್‌ಗಳು, Zustand, ಅಥವಾ ಕಸ್ಟಮ್ ಡೇಟಾ ಮೂಲಗಳು) ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಲು ಮತ್ತು ಡೇಟಾ ಬದಲಾದಾಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರು-ರೆಂಡರ್ ಮಾಡಲು ಒಂದು ವ್ಯವಸ್ಥೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಹಸ್ತಚಾಲಿತ ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್ ನಿರ್ವಹಣೆಯ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುತ್ತದೆ ಮತ್ತು ಡೇಟಾ ಸಿಂಕ್ರೊನೈಸೇಶನ್‌ಗೆ ಸ್ವಚ್ಛ, ಹೆಚ್ಚು ಘೋಷಣಾತ್ಮಕ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದನ್ನು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನಿರಂತರವಾಗಿ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತಿರುವ ಮಾಹಿತಿಗೆ ಮನಬಂದಂತೆ ಸಂಪರ್ಕಿಸುವ ಒಂದು ಮೀಸಲಾದ ಸಾಧನವೆಂದು ಭಾವಿಸಿ.

ಈ ಹೂಕ್ ಎರಡು ಪ್ರಾಥಮಿಕ ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ:

• dataSource: subscribe ವಿಧಾನ (ಅಬ್ಸರ್ವಬಲ್ ಲೈಬ್ರರಿಗಳಲ್ಲಿ ಕಂಡುಬರುವಂತೆಯೇ) ಮತ್ತು getSnapshot ವಿಧಾನವನ್ನು ಹೊಂದಿರುವ ಒಂದು ಆಬ್ಜೆಕ್ಟ್. subscribe ವಿಧಾನವು ಡೇಟಾ ಮೂಲ ಬದಲಾದಾಗ ಕರೆಯಲಾಗುವ ಕಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. getSnapshot ವಿಧಾನವು ಡೇಟಾದ ಪ್ರಸ್ತುತ ಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
• getSnapshot (ಐಚ್ಛಿಕ): ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಡೇಟಾ ಮೂಲದಿಂದ ಅಗತ್ಯವಿರುವ ನಿರ್ದಿಷ್ಟ ಡೇಟಾವನ್ನು ಹೊರತೆಗೆಯುವ ಒಂದು ಫಂಕ್ಷನ್. ಒಟ್ಟಾರೆ ಡೇಟಾ ಮೂಲ ಬದಲಾದಾಗ, ಆದರೆ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಅಗತ್ಯವಿರುವ ನಿರ್ದಿಷ್ಟ ಡೇಟಾ ಒಂದೇ ಆಗಿದ್ದಾಗ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯಲು ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

ಒಂದು ಕಾಲ್ಪನಿಕ ಡೇಟಾ ಮೂಲದೊಂದಿಗೆ ಅದರ ಬಳಕೆಯನ್ನು ಪ್ರದರ್ಶಿಸುವ ಸರಳ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

import { experimental_useSubscription as useSubscription } from 'react';

const myDataSource = {
  subscribe(callback) {
    // Logic to subscribe to data changes (e.g., using WebSockets, RxJS, etc.)
    // Example: setInterval(() => callback(), 1000); // Simulate changes every second
  },
  getSnapshot() {
    // Logic to retrieve the current data from the source
    return myData;
  }
};

function MyComponent() {
  const data = useSubscription(myDataSource);

  return (
    <div>
      <p>Data: {data}</p>
    </div>
  );
}

ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್ ಪ್ರೊಸೆಸಿಂಗ್ ಓವರ್‌ಹೆಡ್: ಮೂಲ ಸಮಸ್ಯೆ

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

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

ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸುವುದು

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

1. ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್

ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್, ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್‌ನಲ್ಲಿ ಲಭ್ಯವಿದ್ದು, ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮ್ಮ ಪ್ರಾಥಮಿಕ ಸಾಧನವಾಗಿದೆ. ಇದನ್ನು ಬಳಸಿ:

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

ಡೇಟಾ ಮೂಲದಲ್ಲಿನ ಬದಲಾವಣೆಗಳಿಂದಾಗಿ ಆಗಾಗ್ಗೆ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚು ಗಮನ ಕೊಡಿ. ಮರು-ರೆಂಡರ್‌ಗಳು ನಿಜವಾಗಿಯೂ ಅಗತ್ಯವಿದೆಯೇ (ಅಂದರೆ, ಕಾಂಪೊನೆಂಟ್‌ನ ಪ್ರಾಪ್ಸ್ ಅಥವಾ ಸ್ಟೇಟ್ ಗಮನಾರ್ಹವಾಗಿ ಬದಲಾಗಿದೆಯೇ) ಎಂದು ನೋಡಲು ಆಳವಾಗಿ ಪರಿಶೀಲಿಸಿ.

2. ಕಾರ್ಯಕ್ಷಮತೆ ಮಾನಿಟರಿಂಗ್ ಪರಿಕರಗಳು

ಪ್ರೊಡಕ್ಷನ್ ಪರಿಸರಗಳಿಗಾಗಿ, ಕಾರ್ಯಕ್ಷಮತೆ ಮಾನಿಟರಿಂಗ್ ಪರಿಕರಗಳನ್ನು (ಉದಾ., Sentry, New Relic, Datadog) ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಈ ಪರಿಕರಗಳು ಇವುಗಳ ಬಗ್ಗೆ ಒಳನೋಟಗಳನ್ನು ಒದಗಿಸಬಹುದು:

• ನೈಜ-ಪ್ರಪಂಚದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್‌ಗಳು: ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರ್ ಸಮಯಗಳು, ಸಂವಹನ ಲೇಟೆನ್ಸಿ, ಮತ್ತು ಒಟ್ಟಾರೆ ಅಪ್ಲಿಕೇಶನ್ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕತೆಯಂತಹ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿ.
• ನಿಧಾನಗತಿಯ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಗುರುತಿಸಿ: ನೈಜ-ಪ್ರಪಂಚದ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಸ್ಥಿರವಾಗಿ ಕಳಪೆ ಪ್ರದರ್ಶನ ನೀಡುತ್ತಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಗುರುತಿಸಿ.
• ಬಳಕೆದಾರರ ಅನುಭವದ ಮೇಲೆ ಪರಿಣಾಮ: ನಿಧಾನ ಲೋಡಿಂಗ್ ಸಮಯಗಳು ಅಥವಾ ಪ್ರತಿಕ್ರಿಯಿಸದ ಸಂವಹನಗಳಂತಹ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳು ಬಳಕೆದಾರರ ಅನುಭವದ ಮೇಲೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ.

3. ಕೋಡ್ ವಿಮರ್ಶೆಗಳು ಮತ್ತು ಸ್ಥಿರ ವಿಶ್ಲೇಷಣೆ

ಕೋಡ್ ವಿಮರ್ಶೆಗಳ ಸಮಯದಲ್ಲಿ, experimental_useSubscription ಅನ್ನು ಹೇಗೆ ಬಳಸಲಾಗುತ್ತಿದೆ ಎಂಬುದರ ಬಗ್ಗೆ ಹೆಚ್ಚು ಗಮನ ಕೊಡಿ:

• ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್ ವ್ಯಾಪ್ತಿಯನ್ನು ನಿರ್ಣಯಿಸಿ: ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತುಂಬಾ ವಿಶಾಲವಾದ ಡೇಟಾ ಮೂಲಗಳಿಗೆ ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡುತ್ತಿವೆಯೇ, ಇದು ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆಯೇ?
• getSnapshot ಅನುಷ್ಠಾನಗಳನ್ನು ಪರಿಶೀಲಿಸಿ: getSnapshot ಫಂಕ್ಷನ್ ಅಗತ್ಯ ಡೇಟಾವನ್ನು ಸಮರ್ಥವಾಗಿ ಹೊರತೆಗೆಯುತ್ತಿದೆಯೇ?
• ಸಂಭಾವ್ಯ ರೇಸ್ ಕಂಡೀಷನ್‌ಗಳನ್ನು ಹುಡುಕಿ: ಅಸಮಕಾಲಿಕ ಡೇಟಾ ಮೂಲ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ವಿಶೇಷವಾಗಿ ಕನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್‌ನೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ.

ಸ್ಥಿರ ವಿಶ್ಲೇಷಣಾ ಪರಿಕರಗಳು (ಉದಾ., ಸೂಕ್ತ ಪ್ಲಗಿನ್‌ಗಳೊಂದಿಗೆ ESLint) ನಿಮ್ಮ ಕೋಡ್‌ನಲ್ಲಿ useCallback ಅಥವಾ useMemo ಹೂಕ್ಸ್‌ಗಳಲ್ಲಿ ಕಾಣೆಯಾದ ಡಿಪೆಂಡೆನ್ಸಿಗಳಂತಹ ಸಂಭಾವ್ಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಸಹ ಸಹಾಯ ಮಾಡಬಹುದು.

ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳು: ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರಭಾವವನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು

ನೀವು ಸಂಭಾವ್ಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಿದ ನಂತರ, experimental_useSubscription ನ ಪ್ರಭಾವವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನೀವು ಹಲವಾರು ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಬಳಸಬಹುದು.

1. getSnapshot ಜೊತೆಗೆ ಆಯ್ದ ಡೇಟಾ ಫೆಚಿಂಗ್

ಅತ್ಯಂತ ನಿರ್ಣಾಯಕ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರವೆಂದರೆ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಅಗತ್ಯವಿರುವ ನಿರ್ದಿಷ್ಟ ಡೇಟಾವನ್ನು ಮಾತ್ರ ಹೊರತೆಗೆಯಲು getSnapshot ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸುವುದು. ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯಲು ಇದು ಅತ್ಯಗತ್ಯ. ಸಂಪೂರ್ಣ ಡೇಟಾ ಮೂಲಕ್ಕೆ ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡುವ ಬದಲು, ಸಂಬಂಧಿತ ಡೇಟಾದ ಉಪವಿಭಾಗಕ್ಕೆ ಮಾತ್ರ ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಿ.

ಉದಾಹರಣೆ:

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

const userDataSource = {
  subscribe(callback) { /* ... */ },
  getSnapshot() {
    return {
      name: "Alice Smith",
      email: "alice.smith@example.com",
      profilePicture: "/images/alice.jpg"
    };
  }
};

function NameComponent() {
  const name = useSubscription(userDataSource, () => userDataSource.getSnapshot().name);

  return <p>User Name: {name}</p>;
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, userDataSource ಆಬ್ಜೆಕ್ಟ್‌ನಲ್ಲಿನ ಇತರ ಪ್ರಾಪರ್ಟಿಗಳು ಅಪ್‌ಡೇಟ್ ಆದರೂ, ಬಳಕೆದಾರರ ಹೆಸರು ಬದಲಾದರೆ ಮಾತ್ರ NameComponent ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.

2. useMemo ಮತ್ತು useCallback ಜೊತೆಗೆ ಮೆಮೊೈಸೇಶನ್

ಮೆಮೊೈಸೇಶನ್ ಎಂಬುದು ದುಬಾರಿ ಗಣನೆಗಳು ಅಥವಾ ಫಂಕ್ಷನ್‌ಗಳ ಫಲಿತಾಂಶಗಳನ್ನು ಕ್ಯಾಶ್ ಮಾಡುವ ಮೂಲಕ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲು ಒಂದು ಶಕ್ತಿಶಾಲಿ ತಂತ್ರವಾಗಿದೆ. getSnapshot ಫಂಕ್ಷನ್‌ನ ಫಲಿತಾಂಶವನ್ನು ಮೆಮೊಯಿಸ್ ಮಾಡಲು useMemo ಬಳಸಿ, ಮತ್ತು subscribe ವಿಧಾನಕ್ಕೆ ರವಾನಿಸಲಾದ ಕಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ಮೆಮೊಯಿಸ್ ಮಾಡಲು useCallback ಬಳಸಿ.

ಉದಾಹರಣೆ:

import { experimental_useSubscription as useSubscription } from 'react';
import { useCallback, useMemo } from 'react';

const myDataSource = {
  subscribe(callback) { /* ... */ },
  getSnapshot() {
    // Expensive data processing logic
    return processData(myData);
  }
};

function MyComponent({ prop1, prop2 }) {
  const getSnapshot = useCallback(() => {
    return myDataSource.getSnapshot();
  }, []);

  const data = useSubscription(myDataSource, getSnapshot);

  const memoizedValue = useMemo(() => {
    // Expensive calculation based on data
    return calculateValue(data, prop1, prop2);
  }, [data, prop1, prop2]);

  return <div>{memoizedValue}</div>;
}

getSnapshot ಫಂಕ್ಷನ್ ಮತ್ತು ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದ ಮೌಲ್ಯವನ್ನು ಮೆಮೊಯಿಸ್ ಮಾಡುವ ಮೂಲಕ, ಡಿಪೆಂಡೆನ್ಸಿಗಳು ಬದಲಾಗದಿದ್ದಾಗ ನೀವು ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳು ಮತ್ತು ದುಬಾರಿ ಗಣನೆಗಳನ್ನು ತಡೆಯಬಹುದು. ಮೆಮೊಯಿಸ್ ಮಾಡಿದ ಮೌಲ್ಯಗಳು ಅಗತ್ಯವಿದ್ದಾಗ ಸರಿಯಾಗಿ ಅಪ್‌ಡೇಟ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು useCallback ಮತ್ತು useMemo ನ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಗಳಲ್ಲಿ ಸಂಬಂಧಿತ ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಸೇರಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

3. ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್

ವೇಗವಾಗಿ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತಿರುವ ಡೇಟಾ ಮೂಲಗಳೊಂದಿಗೆ (ಉದಾ., ಸೆನ್ಸರ್ ಡೇಟಾ, ರಿಯಲ್-ಟೈಮ್ ಫೀಡ್‌ಗಳು) ವ್ಯವಹರಿಸುವಾಗ, ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್ ಮರು-ರೆಂಡರ್‌ಗಳ ಆವರ್ತನವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

• ಡಿಬೌನ್ಸಿಂಗ್: ಕೊನೆಯ ಅಪ್‌ಡೇಟ್‌ನ ನಂತರ ನಿರ್ದಿಷ್ಟ ಸಮಯ ಕಳೆದ ಮೇಲೆ ಕಾಲ್‌ಬ್ಯಾಕ್‌ನ ಆಹ್ವಾನವನ್ನು ವಿಳಂಬಗೊಳಿಸುತ್ತದೆ. ನಿಷ್ಕ್ರಿಯತೆಯ ಅವಧಿಯ ನಂತರ ನಿಮಗೆ ಇತ್ತೀಚಿನ ಮೌಲ್ಯ ಮಾತ್ರ ಬೇಕಾದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
• ಥ್ರಾಟ್ಲಿಂಗ್: ನಿರ್ದಿಷ್ಟ ಸಮಯದ ಅವಧಿಯಲ್ಲಿ ಕಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ಎಷ್ಟು ಬಾರಿ ಕರೆಯಬಹುದು ಎಂಬುದನ್ನು ಮಿತಿಗೊಳಿಸುತ್ತದೆ. ನೀವು ಯುಐ ಅನ್ನು ನಿಯತಕಾಲಿಕವಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡಬೇಕಾದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ, ಆದರೆ ಡೇಟಾ ಮೂಲದಿಂದ ಪ್ರತಿ ಅಪ್‌ಡೇಟ್‌ನಲ್ಲಿ ಅಗತ್ಯವಿಲ್ಲ.

ನೀವು Lodash ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಿ ಅಥವಾ setTimeout ಬಳಸಿ ಕಸ್ಟಮ್ ಅನುಷ್ಠಾನಗಳ ಮೂಲಕ ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು.

ಉದಾಹರಣೆ (ಥ್ರಾಟ್ಲಿಂಗ್):

import { experimental_useSubscription as useSubscription } from 'react';
import { useRef, useCallback } from 'react';

function MyComponent() {
  const lastUpdate = useRef(0);

  const throttledGetSnapshot = useCallback(() => {
    const now = Date.now();
    if (now - lastUpdate.current > 100) { // Update at most every 100ms
      lastUpdate.current = now;
      return myDataSource.getSnapshot();
    }
    return null; // Or a default value
  }, []);

  const data = useSubscription(myDataSource, throttledGetSnapshot);

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

ಈ ಉದಾಹರಣೆಯು getSnapshot ಫಂಕ್ಷನ್ ಅನ್ನು ಪ್ರತಿ 100 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಿಗೆ ಗರಿಷ್ಠ ಒಂದು ಬಾರಿ ಕರೆಯಲಾಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಡೇಟಾ ಮೂಲವು ವೇಗವಾಗಿ ಅಪ್‌ಡೇಟ್ ಆದಾಗ ಅತಿಯಾದ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ.

4. React.memo ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುವುದು

React.memo ಒಂದು ಹೈಯರ್-ಆರ್ಡರ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದ್ದು ಅದು ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮೆಮೊಯಿಸ್ ಮಾಡುತ್ತದೆ. experimental_useSubscription ಬಳಸುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು React.memo ನೊಂದಿಗೆ ಸುತ್ತುವ ಮೂಲಕ, ಕಾಂಪೊನೆಂಟ್‌ನ ಪ್ರಾಪ್ಸ್ ಬದಲಾಗದಿದ್ದರೆ ನೀವು ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯಬಹುದು.

ಉದಾಹರಣೆ:

import React, { experimental_useSubscription as useSubscription, memo } from 'react';

function MyComponent({ prop1, prop2 }) {
  const data = useSubscription(myDataSource);

  return <div>{data}, {prop1}, {prop2}</div>;
}

export default memo(MyComponent, (prevProps, nextProps) => {
  // Custom comparison logic (optional)
  return prevProps.prop1 === nextProps.prop1 && prevProps.prop2 === nextProps.prop2;
});

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, useSubscription ನಿಂದ ಡೇಟಾ ಅಪ್‌ಡೇಟ್ ಆದರೂ, prop1 ಅಥವಾ prop2 ಬದಲಾದರೆ ಮಾತ್ರ MyComponent ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ ಯಾವಾಗ ಮರು-ರೆಂಡರ್ ಆಗಬೇಕು ಎಂಬುದರ ಮೇಲೆ ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ನೀವು React.memo ಗೆ ಕಸ್ಟಮ್ ಹೋಲಿಕೆ ಫಂಕ್ಷನ್ ಅನ್ನು ಒದಗಿಸಬಹುದು.

5. ಇಮ್ಮ್ಯೂಟಬಿಲಿಟಿ ಮತ್ತು ಸ್ಟ್ರಕ್ಚರಲ್ ಶೇರಿಂಗ್

ಸಂಕೀರ್ಣ ಡೇಟಾ ರಚನೆಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಇಮ್ಮ್ಯೂಟಬಲ್ ಡೇಟಾ ರಚನೆಗಳನ್ನು ಬಳಸುವುದು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು. ಇಮ್ಮ್ಯೂಟಬಲ್ ಡೇಟಾ ರಚನೆಗಳು ಯಾವುದೇ ಮಾರ್ಪಾಡು ಹೊಸ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಇದು ಬದಲಾವಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ. Immutable.js ಅಥವಾ Immer ನಂತಹ ಲೈಬ್ರರಿಗಳು ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಇಮ್ಮ್ಯೂಟಬಲ್ ಡೇಟಾ ರಚನೆಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಬಹುದು.

ಸ್ಟ್ರಕ್ಚರಲ್ ಶೇರಿಂಗ್, ಒಂದು ಸಂಬಂಧಿತ ಪರಿಕಲ್ಪನೆ, ಬದಲಾಗದ ಡೇಟಾ ರಚನೆಯ ಭಾಗಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಇದು ಹೊಸ ಇಮ್ಮ್ಯೂಟಬಲ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ರಚಿಸುವ ಓವರ್‌ಹೆಡ್ ಅನ್ನು ಮತ್ತಷ್ಟು ಕಡಿಮೆ ಮಾಡಬಹುದು.

6. ಬ್ಯಾಚ್ಡ್ ಅಪ್‌ಡೇಟ್‌ಗಳು ಮತ್ತು ಶೆಡ್ಯೂಲಿಂಗ್

ರಿಯಾಕ್ಟ್‌ನ ಬ್ಯಾಚ್ಡ್ ಅಪ್‌ಡೇಟ್‌ಗಳ ಯಾಂತ್ರಿಕತೆಯು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬಹು ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಒಂದೇ ಮರು-ರೆಂಡರ್ ಚಕ್ರಕ್ಕೆ ಗುಂಪು ಮಾಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಅಸಮಕಾಲಿಕ ಅಪ್‌ಡೇಟ್‌ಗಳು (ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್‌ಗಳಿಂದ ಪ್ರಚೋದಿಸಲ್ಪಟ್ಟಂತೆ) ಕೆಲವೊಮ್ಮೆ ಈ ಯಾಂತ್ರಿಕತೆಯನ್ನು ಬೈಪಾಸ್ ಮಾಡಬಹುದು. ರಿಯಾಕ್ಟ್‌ಗೆ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬ್ಯಾಚ್ ಮಾಡಲು ಅನುಮತಿಸಲು ನಿಮ್ಮ ಡೇಟಾ ಮೂಲ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು requestAnimationFrame ಅಥವಾ setTimeout ನಂತಹ ತಂತ್ರಗಳನ್ನು ಬಳಸಿ ಸೂಕ್ತವಾಗಿ ನಿಗದಿಪಡಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಉದಾಹರಣೆ:

const myDataSource = {
  subscribe(callback) {
    setInterval(() => {
      requestAnimationFrame(() => {
        callback(); // Schedule the update for the next animation frame
      });
    }, 100);
  },
  getSnapshot() { /* ... */ }
};

7. ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳಿಗಾಗಿ ವರ್ಚುವಲೈಸೇಶನ್

ನೀವು ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್‌ಗಳ ಮೂಲಕ ಅಪ್‌ಡೇಟ್ ಆಗುವ ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತಿದ್ದರೆ (ಉದಾ., ಐಟಂಗಳ ದೀರ್ಘ ಪಟ್ಟಿ), ವರ್ಚುವಲೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು (ಉದಾ., react-window ಅಥವಾ react-virtualized ನಂತಹ ಲೈಬ್ರರಿಗಳು) ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ವರ್ಚುವಲೈಸೇಶನ್ ಡೇಟಾಸೆಟ್‌ನ ಗೋಚರ ಭಾಗವನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ, ರೆಂಡರಿಂಗ್ ಓವರ್‌ಹೆಡ್ ಅನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಬಳಕೆದಾರರು ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಂತೆ, ಗೋಚರ ಭಾಗವು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತದೆ.

8. ಡೇಟಾ ಮೂಲ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು

ಬಹುಶಃ ಅತ್ಯಂತ ನೇರವಾದ ಆಪ್ಟಿಮೈಸೇಶನ್ ಎಂದರೆ ಡೇಟಾ ಮೂಲದಿಂದಲೇ ಅಪ್‌ಡೇಟ್‌ಗಳ ಆವರ್ತನ ಮತ್ತು ವ್ಯಾಪ್ತಿಯನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು. ಇದು ಒಳಗೊಂಡಿರಬಹುದು:

• ಅಪ್‌ಡೇಟ್ ಆವರ್ತನವನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು: ಸಾಧ್ಯವಾದರೆ, ಡೇಟಾ ಮೂಲವು ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಕಳುಹಿಸುವ ಆವರ್ತನವನ್ನು ಕಡಿಮೆ ಮಾಡಿ.
• ಡೇಟಾ ಮೂಲದ ತರ್ಕವನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡುವುದು: ಡೇಟಾ ಮೂಲವು ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತಿದೆಯೇ ಮತ್ತು ಅಪ್‌ಡೇಟ್‌ಗಳು ಸಾಧ್ಯವಾದಷ್ಟು ಸಮರ್ಥವಾಗಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಸರ್ವರ್-ಸೈಡ್‌ನಲ್ಲಿ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುವುದು: ಪ್ರಸ್ತುತ ಬಳಕೆದಾರ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಟೇಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಮಾತ್ರ ಕ್ಲೈಂಟ್‌ಗೆ ಕಳುಹಿಸಿ.

9. Redux ಅಥವಾ ಇತರ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸುವುದು

ನೀವು Redux (ಅಥವಾ ಇತರ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಲೈಬ್ರರಿಗಳು) ಜೊತೆಯಲ್ಲಿ experimental_useSubscription ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಸೆಲೆಕ್ಟರ್‌ಗಳು ಜಾಗತಿಕ ಸ್ಟೇಟ್‌ನಿಂದ ನಿರ್ದಿಷ್ಟ ಡೇಟಾ ತುಣುಕುಗಳನ್ನು ಪಡೆಯುವ ಶುದ್ಧ ಫಂಕ್ಷನ್‌ಗಳಾಗಿವೆ. ಇದು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ತಮಗೆ ಬೇಕಾದ ಡೇಟಾಗೆ ಮಾತ್ರ ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಸ್ಟೇಟ್‌ನ ಇತರ ಭಾಗಗಳು ಬದಲಾದಾಗ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ.

ಉದಾಹರಣೆ (Reselect ಜೊತೆಗೆ Redux):

import { useSelector } from 'react-redux';
import { createSelector } from 'reselect';

// Selector to extract user name
const selectUserName = createSelector(
  state => state.user,
  user => user.name
);

function NameComponent() {
  // Subscribe to only the user name using useSelector and the selector
  const userName = useSelector(selectUserName);

  return <p>User Name: {userName}</p>;
}

ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುವ ಮೂಲಕ, user ಆಬ್ಜೆಕ್ಟ್‌ನ ಇತರ ಭಾಗಗಳು ಅಪ್‌ಡೇಟ್ ಆದರೂ, Redux ಸ್ಟೋರ್‌ನಲ್ಲಿ user.name ಪ್ರಾಪರ್ಟಿ ಬದಲಾದಾಗ ಮಾತ್ರ NameComponent ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು

• ಬೆಂಚ್‌ಮಾರ್ಕ್ ಮತ್ತು ಪ್ರೊಫೈಲ್: ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೊದಲು ಮತ್ತು ನಂತರ ಯಾವಾಗಲೂ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಬೆಂಚ್‌ಮಾರ್ಕ್ ಮಾಡಿ ಮತ್ತು ಪ್ರೊಫೈಲ್ ಮಾಡಿ. ಇದು ನಿಮ್ಮ ಬದಲಾವಣೆಗಳು ನಿಜವಾಗಿಯೂ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತಿವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
• ಪ್ರಗತಿಶೀಲ ಆಪ್ಟಿಮೈಸೇಶನ್: ಅತ್ಯಂತ ಪ್ರಭಾವಶಾಲಿ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳಿಂದ (ಉದಾ., getSnapshot ನೊಂದಿಗೆ ಆಯ್ದ ಡೇಟಾ ಫೆಚಿಂಗ್) ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ನಂತರ ಅಗತ್ಯವಿರುವಂತೆ ಇತರ ತಂತ್ರಗಳನ್ನು ಹಂತಹಂತವಾಗಿ ಅನ್ವಯಿಸಿ.
• ಪರ್ಯಾಯಗಳನ್ನು ಪರಿಗಣಿಸಿ: ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, experimental_useSubscription ಬಳಸುವುದು ಉತ್ತಮ ಪರಿಹಾರವಾಗಿರಬಾರದು. ಸಾಂಪ್ರದಾಯಿಕ ಡೇಟಾ ಫೆಚಿಂಗ್ ತಂತ್ರಗಳು ಅಥವಾ ಅಂತರ್ನಿರ್ಮಿತ ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್ ಯಾಂತ್ರಿಕತೆಗಳೊಂದಿಗೆ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸುವಂತಹ ಪರ್ಯಾಯ ವಿಧಾನಗಳನ್ನು ಅನ್ವೇಷಿಸಿ.
• ಅಪ್‌ಡೇಟ್ ಆಗಿರಿ: experimental_useSubscription ಒಂದು ಪ್ರಾಯೋಗಿಕ API ಆಗಿದೆ, ಆದ್ದರಿಂದ ಅದರ ನಡವಳಿಕೆ ಮತ್ತು API ಭವಿಷ್ಯದ ರಿಯಾಕ್ಟ್ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಬದಲಾಗಬಹುದು. ಇತ್ತೀಚಿನ ರಿಯಾಕ್ಟ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಮತ್ತು ಸಮುದಾಯ ಚರ್ಚೆಗಳೊಂದಿಗೆ ಅಪ್‌ಡೇಟ್ ಆಗಿರಿ.
• ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್: ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ, ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಮತ್ತು ಒಟ್ಟಾರೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಲೋಡ್ ಆಗುವ ಸಣ್ಣ ತುಣುಕುಗಳಾಗಿ ವಿಭಜಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.

ತೀರ್ಮಾನ

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