React Scheduler API: ಕಾರ್ಯ ಆದ್ಯತೆ ಮತ್ತು ಸಮಯ ವಿಭಜನೆಯನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು

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

Scheduling ನ ಅಗತ್ಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

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

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

ರಿಯಾಕ್ಟ್ ಶೆಡ್ಯೂಲರ್ API ಅನ್ನು ಪರಿಚಯಿಸಲಾಗುತ್ತಿದೆ

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

ಪ್ರಮುಖ ಟಿಪ್ಪಣಿ: ಹೆಸರೇ ಸೂಚಿಸುವಂತೆ, unstable_ API ಗಳು ಬದಲಾವಣೆಗೆ ಒಳಪಟ್ಟಿರುತ್ತವೆ. ಅತ್ಯಂತ ನವೀಕೃತ ಮಾಹಿತಿಗಾಗಿ ಯಾವಾಗಲೂ ಅಧಿಕೃತ ರಿಯಾಕ್ಟ್ ದಸ್ತಾವೇಜನ್ನು ಸಂಪರ್ಕಿಸಿ.

ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು:

• ಕಾರ್ಯಗಳು: ಘಟಕವನ್ನು ರೆಂಡರ್ ಮಾಡುವುದು ಅಥವಾ DOM ಅನ್ನು ನವೀಕರಿಸುವಂತಹ ನಿರ್ವಹಿಸಬೇಕಾದ ವೈಯಕ್ತಿಕ ಕೆಲಸದ ಘಟಕಗಳನ್ನು ಪ್ರತಿನಿಧಿಸಿ.
• ಆದ್ಯತೆಗಳು: ಪ್ರತಿ ಕಾರ್ಯಕ್ಕೆ ಪ್ರಾಮುಖ್ಯತೆಯ ಮಟ್ಟವನ್ನು ನಿಯೋಜಿಸಿ, ಅವುಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಕ್ರಮದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ.
• ಸಮಯ ವಿಭಜನೆ: ದೀರ್ಘಾವಧಿಯ ಕಾರ್ಯಗಳನ್ನು ಸಣ್ಣ ತುಣುಕುಗಳಾಗಿ ವಿಭಜಿಸುವುದು, ಅದನ್ನು ಅನೇಕ ಫ್ರೇಮ್‌ಗಳಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು, ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
• ಶೆಡ್ಯೂಲರ್‌ಗಳು: ಕಾರ್ಯಗಳ ಆದ್ಯತೆಗಳು ಮತ್ತು ಸಮಯದ ನಿರ್ಬಂಧಗಳ ಆಧಾರದ ಮೇಲೆ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಕಾರ್ಯವಿಧಾನಗಳು.

ಕಾರ್ಯ ಆದ್ಯತೆಗಳು: ಪ್ರಾಮುಖ್ಯತೆಯ ಶ್ರೇಣಿ

ಶೆಡ್ಯೂಲರ್ API ಹಲವಾರು ಆದ್ಯತೆಯ ಹಂತಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಅದನ್ನು ನಿಮ್ಮ ಕಾರ್ಯಗಳಿಗೆ ನೀವು ನಿಯೋಜಿಸಬಹುದು. ಈ ಆದ್ಯತೆಗಳು ಶೆಡ್ಯೂಲರ್ ಕಾರ್ಯಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಕ್ರಮವನ್ನು ನಿರ್ಧರಿಸುತ್ತವೆ. ನೀವು ಬಳಸಬಹುದಾದ ಪೂರ್ವನಿರ್ಧರಿತ ಆದ್ಯತೆಯ ಸ್ಥಿರಾಂಕಗಳನ್ನು ರಿಯಾಕ್ಟ್ ಒದಗಿಸುತ್ತದೆ:

• ImmediatePriority: ಅತ್ಯುನ್ನತ ಆದ್ಯತೆ. ಈ ಆದ್ಯತೆಯ ಕಾರ್ಯಗಳನ್ನು ತಕ್ಷಣವೇ ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ. ಬಳಕೆದಾರರ ಸಂವಹನದ ಮೇಲೆ ನೇರವಾಗಿ ಪರಿಣಾಮ ಬೀರುವ ನಿರ್ಣಾಯಕ ನವೀಕರಣಗಳಿಗಾಗಿ ಮಿತವಾಗಿ ಬಳಸಿ.
• UserBlockingPriority: ಕೀಬೋರ್ಡ್ ಇನ್‌ಪುಟ್ ಅಥವಾ ಮೌಸ್ ಕ್ಲಿಕ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವಂತಹ ಬಳಕೆದಾರರ ಪ್ರಸ್ತುತ ಸಂವಹನದ ಮೇಲೆ ನೇರವಾಗಿ ಪರಿಣಾಮ ಬೀರುವ ಕಾರ್ಯಗಳಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ. ಸಾಧ್ಯವಾದಷ್ಟು ಬೇಗ ಪೂರ್ಣಗೊಳಿಸಬೇಕು.
• NormalPriority: ಹೆಚ್ಚಿನ ನವೀಕರಣಗಳಿಗೆ ಡೀಫಾಲ್ಟ್ ಆದ್ಯತೆ. ಮುಖ್ಯವಾದ ಆದರೆ ತಕ್ಷಣವೇ ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕಾಗಿಲ್ಲದ ಕಾರ್ಯಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ.
• LowPriority: ಕಡಿಮೆ ನಿರ್ಣಾಯಕವಾದ ಕಾರ್ಯಗಳಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವದ ಮೇಲೆ ಗಮನಾರ್ಹವಾಗಿ ಪರಿಣಾಮ ಬೀರದಂತೆ ಮುಂದೂಡಬಹುದು. ವಿಶ್ಲೇಷಣೆಗಳನ್ನು ನವೀಕರಿಸುವುದು ಅಥವಾ ಡೇಟಾವನ್ನು ಮೊದಲೇ ಪಡೆದುಕೊಳ್ಳುವುದು ಉದಾಹರಣೆಗಳಾಗಿವೆ.
• IdlePriority: ಕಡಿಮೆ ಆದ್ಯತೆ. ಈ ಆದ್ಯತೆಯ ಕಾರ್ಯಗಳನ್ನು ಬ್ರೌಸರ್ ನಿಷ್ಕ್ರಿಯವಾಗಿದ್ದಾಗ ಮಾತ್ರ ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ, ಅವು ಹೆಚ್ಚು ಮುಖ್ಯವಾದ ಕಾರ್ಯಗಳಿಗೆ ಅಡ್ಡಿಯಾಗದಂತೆ ನೋಡಿಕೊಳ್ಳುತ್ತದೆ.

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

ಉದಾಹರಣೆ: ಬಳಕೆದಾರ ಇನ್‌ಪುಟ್‌ಗೆ ಆದ್ಯತೆ ನೀಡುವುದು

ನೀವು ಹುಡುಕಾಟ ಪಟ್ಟಿ ಮತ್ತು ಸಂಕೀರ್ಣ ಡೇಟಾ ದೃಶ್ಯೀಕರಣವನ್ನು ಹೊಂದಿರುವ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ. ದೃಶ್ಯೀಕರಣವನ್ನು ನವೀಕರಿಸಲಾಗುತ್ತಿದ್ದರೂ ಹುಡುಕಾಟ ಪಟ್ಟಿ ಸ್ಪಂದಿಸುವಂತಿರಬೇಕು ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಬಯಸುತ್ತೀರಿ. ಹುಡುಕಾಟ ಪಟ್ಟಿ ನವೀಕರಣಕ್ಕೆ ಹೆಚ್ಚಿನ ಆದ್ಯತೆ ಮತ್ತು ದೃಶ್ಯೀಕರಣ ನವೀಕರಣಕ್ಕೆ ಕಡಿಮೆ ಆದ್ಯತೆಯನ್ನು ನಿಯೋಜಿಸುವ ಮೂಲಕ ನೀವು ಇದನ್ನು ಸಾಧಿಸಬಹುದು.

import { unstable_scheduleCallback as scheduleCallback, unstable_UserBlockingPriority as UserBlockingPriority, unstable_NormalPriority as NormalPriority } from 'scheduler';

function updateSearchTerm(searchTerm) {
  scheduleCallback(UserBlockingPriority, () => {
    // Update the search term in the state
    setSearchTerm(searchTerm);
  });
}

function updateVisualizationData(data) {
  scheduleCallback(NormalPriority, () => {
    // Update the visualization data
    setVisualizationData(data);
  });
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಬಳಕೆದಾರ ಇನ್‌ಪುಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುವ updateSearchTerm ಕಾರ್ಯವನ್ನು UserBlockingPriority ನೊಂದಿಗೆ ನಿಗದಿಪಡಿಸಲಾಗಿದೆ, ಇದು updateVisualizationData ಕಾರ್ಯಕ್ಕಿಂತ ಮೊದಲು ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಇದನ್ನು NormalPriority ನೊಂದಿಗೆ ನಿಗದಿಪಡಿಸಲಾಗಿದೆ.

ಸಮಯ ವಿಭಜನೆ: ದೀರ್ಘಾವಧಿಯ ಕಾರ್ಯಗಳನ್ನು ವಿಭಜಿಸುವುದು

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

ಶೆಡ್ಯೂಲರ್ API unstable_shouldYield ಕಾರ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಪ್ರಸ್ತುತ ಕಾರ್ಯವು ಬ್ರೌಸರ್‌ಗೆ ಬಿಟ್ಟುಕೊಡಬೇಕೆ ಎಂದು ನಿರ್ಧರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದು ಅಥವಾ ಪ್ರದರ್ಶನವನ್ನು ನವೀಕರಿಸುವಂತಹ ಇತರ ಕಾರ್ಯಗಳನ್ನು ಬ್ರೌಸರ್ ನಿರ್ವಹಿಸಬೇಕಾದರೆ ಈ ಕಾರ್ಯವು true ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ನಿಮ್ಮ ದೀರ್ಘಾವಧಿಯ ಕಾರ್ಯಗಳಲ್ಲಿ ನಿಯತಕಾಲಿಕವಾಗಿ unstable_shouldYield ಅನ್ನು ಕರೆಯುವ ಮೂಲಕ, ಬ್ರೌಸರ್ ಸ್ಪಂದಿಸುವಂತಿದೆ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.

ಉದಾಹರಣೆ: ದೊಡ್ಡ ಪಟ್ಟಿಯನ್ನು ರೆಂಡರ್ ಮಾಡುವುದು

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

import { unstable_scheduleCallback as scheduleCallback, unstable_NormalPriority as NormalPriority, unstable_shouldYield as shouldYield } from 'scheduler';

function renderListItems(items) {
  scheduleCallback(NormalPriority, () => {
    let i = 0;
    while (i < items.length) {
      // Render a small batch of items
      for (let j = 0; j < 10 && i < items.length; j++) {
        renderListItem(items[i]);
        i++;
      }

      // Check if we should yield to the browser
      if (shouldYield()) {
        return () => renderListItems(items.slice(i)); // Reschedule the remaining items
      }
    }
  });
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, renderListItems ಕಾರ್ಯವು ಪ್ರತಿ ಬಾರಿ 10 ಐಟಂಗಳ ಬ್ಯಾಚ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಪ್ರತಿ ಬ್ಯಾಚ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡಿದ ನಂತರ, ಬ್ರೌಸರ್ ಇತರ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸಬೇಕೆ ಎಂದು ಪರಿಶೀಲಿಸಲು ಅದು shouldYield ಅನ್ನು ಕರೆಯುತ್ತದೆ. shouldYield true ಅನ್ನು ಹಿಂತಿರುಗಿಸಿದರೆ, ಕಾರ್ಯವು ಉಳಿದ ಐಟಂಗಳೊಂದಿಗೆ ತನ್ನನ್ನು ಮರುಹೊಂದಿಸುತ್ತದೆ. ಇದು ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದು ಅಥವಾ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವಂತಹ ಇತರ ಕಾರ್ಯಗಳನ್ನು ಸೇರಿಸಲು ಬ್ರೌಸರ್‌ಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಇದು ಹೆಚ್ಚು ಸ್ಪಂದಿಸುವ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳು

ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕತೆಯನ್ನು ಸುಧಾರಿಸಲು ರಿಯಾಕ್ಟ್ ಶೆಡ್ಯೂಲರ್ API ಅನ್ನು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸನ್ನಿವೇಶಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು. ಕೆಲವು ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:

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

ಉದಾಹರಣೆ: ಡಿಬೌನ್ಸ್ಡ್ ಸರ್ಚ್ ಬಾರ್ ಅನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವುದು

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

import { unstable_scheduleCallback as scheduleCallback, unstable_UserBlockingPriority as UserBlockingPriority, unstable_cancelCallback as cancelCallback } from 'scheduler';
import { useState, useRef, useEffect } from 'react';

function DebouncedSearchBar() {
  const [searchTerm, setSearchTerm] = useState('');
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
  const scheduledCallbackRef = useRef(null);

  useEffect(() => {
    if (scheduledCallbackRef.current) {
      cancelCallback(scheduledCallbackRef.current);
    }

    scheduledCallbackRef.current = scheduleCallback(UserBlockingPriority, () => {
      setDebouncedSearchTerm(searchTerm);
      scheduledCallbackRef.current = null;
    });

    return () => {
      if (scheduledCallbackRef.current) {
        cancelCallback(scheduledCallbackRef.current);
      }
    };
  }, [searchTerm]);

  // Simulate a search function
  useEffect(() => {
    if (debouncedSearchTerm) {
      console.log('Searching for:', debouncedSearchTerm);
      // Perform your actual search logic here
    }
  }, [debouncedSearchTerm]);

  return (
     setSearchTerm(e.target.value)}
    />
  );
}

export default DebouncedSearchBar;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, DebouncedSearchBar ಘಟಕವು UserBlockingPriority ನೊಂದಿಗೆ ಹುಡುಕಾಟ ಕಾರ್ಯವನ್ನು ನಿಗದಿಪಡಿಸಲು scheduleCallback ಕಾರ್ಯವನ್ನು ಬಳಸುತ್ತದೆ. ಹಿಂದೆ ನಿಗದಿಪಡಿಸಿದ ಯಾವುದೇ ಹುಡುಕಾಟ ಕಾರ್ಯಗಳನ್ನು ರದ್ದುಗೊಳಿಸಲು cancelCallback ಕಾರ್ಯವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, ಕೇವಲ ಇತ್ತೀಚಿನ ಹುಡುಕಾಟ ಪದವನ್ನು ಮಾತ್ರ ಬಳಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ಅನಗತ್ಯ ಹುಡುಕಾಟ ವಿನಂತಿಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಹುಡುಕಾಟ ಪಟ್ಟಿಯ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.

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

ರಿಯಾಕ್ಟ್ ಶೆಡ್ಯೂಲರ್ API ಅನ್ನು ಬಳಸುವಾಗ, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ:

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

ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಶೆಡ್ಯೂಲಿಂಗ್‌ನ ಭವಿಷ್ಯ

ರಿಯಾಕ್ಟ್ ತಂಡವು ರಿಯಾಕ್ಟ್‌ನ ಶೆಡ್ಯೂಲಿಂಗ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಸುಧಾರಿಸಲು ನಿರಂತರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆ. ಶೆಡ್ಯೂಲರ್ API ಮೇಲೆ ನಿರ್ಮಿಸಲಾದ ಕಾನ್ಕರೆಂಟ್ ಮೋಡ್, ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಇನ್ನಷ್ಟು ಸ್ಪಂದಿಸುವಂತೆ ಮತ್ತು ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀಡುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ. ರಿಯಾಕ್ಟ್ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದ್ದಂತೆ, ನಾವು ಹೆಚ್ಚು ಸುಧಾರಿತ ಶೆಡ್ಯೂಲಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಸುಧಾರಿತ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ನೋಡಲು ನಿರೀಕ್ಷಿಸಬಹುದು.

ತೀರ್ಮಾನ

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