ರಿಯಾಕ್ಟ್‌ನ ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ಅನ್ವೇಷಿಸಿ, ವಿಶ್ವಾದ್ಯಂತ ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವಗಳಿಗಾಗಿ ಫ್ರೇಮ್ ಬಜೆಟ್ ನಿರ್ವಹಣೆಯ ಮೇಲೆ ಗಮನಹರಿಸಿ. ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಮತ್ತು ಸ್ಪಂದನಶೀಲತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಪ್ರಾಯೋಗಿಕ ತಂತ್ರಗಳನ್ನು ಕಲಿಯಿರಿ.
ರಿಯಾಕ್ಟ್‌ನ ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್‌ನಲ್ಲಿ ಪರಿಣತಿ: ಫ್ರೇಮ್ ಬಜೆಟ್ ನಿರ್ವಹಣೆಗೆ ಒಂದು ಮಾರ್ಗದರ್ಶಿ
ಇಂದಿನ ಡೈನಾಮಿಕ್ ವೆಬ್ ಜಗತ್ತಿನಲ್ಲಿ, ಸುಗಮ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡುವುದು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರು ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಸರಾಗವಾಗಿ, ಸಂವಾದಾತ್ಮಕವಾಗಿ ಮತ್ತು ಯಾವುದೇ ಅಡೆತಡೆ ಇಲ್ಲದೆ ಕಾರ್ಯನಿರ್ವಹಿಸಬೇಕೆಂದು ನಿರೀಕ್ಷಿಸುತ್ತಾರೆ. ರಿಯಾಕ್ಟ್‌ನ ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಪರಿಚಯವು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಾವು ನೋಡುವ ದೃಷ್ಟಿಕೋನವನ್ನೇ ಬದಲಾಯಿಸಿದೆ, ಈ ಗುರಿಗಳನ್ನು ಸಾಧಿಸಲು ಶಕ್ತಿಯುತ ಸಾಧನಗಳನ್ನು ನೀಡಿದೆ. ಈ ಮಾದರಿಯ ಬದಲಾವಣೆಯ ಹೃದಯಭಾಗದಲ್ಲಿ ಫ್ರೇಮ್ ಬಜೆಟ್ ನಿರ್ವಹಣೆ ಎಂಬ ಪರಿಕಲ್ಪನೆ ಇದೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ರಿಯಾಕ್ಟ್‌ನ ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ಪರಿಶೋಧಿಸುತ್ತದೆ, ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ ಸ್ಥಿರವಾಗಿ ಸುಗಮವಾದ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಫ್ರೇಮ್ ಬಜೆಟ್ ಅನ್ನು ಹೇಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸುವುದು ಎಂಬುದರ ಮೇಲೆ ಗಮನಹರಿಸುತ್ತದೆ.
ಫ್ರೇಮ್ ಬಜೆಟ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ರಿಯಾಕ್ಟ್‌ನ ನಿರ್ದಿಷ್ಟ ಯಾಂತ್ರಿಕತೆಗಳನ್ನು ಅರಿಯುವ ಮೊದಲು, ಫ್ರೇಮ್ ಬಜೆಟ್‌ನ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಯನ್ನು ಗ್ರಹಿಸುವುದು ಬಹಳ ಮುಖ್ಯ. ಕಂಪ್ಯೂಟರ್ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು UI ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ, ಫ್ರೇಮ್ ಎಂದರೆ ಪರದೆಯ ಮೇಲೆ ಪ್ರದರ್ಶಿಸಲಾಗುವ ಒಂದು ಚಿತ್ರ. ಚಲನೆ ಮತ್ತು ಸಂವಾದಾತ್ಮಕತೆಯ ಭ್ರಮೆಯನ್ನು ಸಾಧಿಸಲು, ಈ ಫ್ರೇಮ್‌ಗಳನ್ನು ವೇಗವಾಗಿ ಒಂದರ ನಂತರ ಒಂದರಂತೆ ರೆಂಡರ್ ಮಾಡಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಡಿಸ್ಪ್ಲೇಗಳಿಗೆ ಗುರಿಯಾಗಿರುವ ಫ್ರೇಮ್ ದರವು ಸೆಕೆಂಡಿಗೆ 60 ಫ್ರೇಮ್‌ಗಳು (FPS). ಇದರರ್ಥ ಪ್ರತಿ ಫ್ರೇಮ್ ಅನ್ನು ಸುಮಾರು 16.67 ಮಿಲಿಸೆಕೆಂಡುಗಳ (1000ms / 60 FPS) ಒಳಗೆ ರೆಂಡರ್ ಮಾಡಿ ಬಳಕೆದಾರರಿಗೆ ಪ್ರಸ್ತುತಪಡಿಸಬೇಕು.
ಆದ್ದರಿಂದ, ಫ್ರೇಮ್ ಬಜೆಟ್ ಎಂದರೆ ಒಂದು ಫ್ರೇಮ್‌ಗೆ ಬೇಕಾದ ಎಲ್ಲಾ ಕೆಲಸಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ನಿಗದಿಪಡಿಸಲಾದ ಸಮಯ. ಈ ಕೆಲಸವು ಸಾಮಾನ್ಯವಾಗಿ ಇವುಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ:
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಶನ್: ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು, ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಮತ್ತು ಬಿಸಿನೆಸ್ ಲಾಜಿಕ್ ಅನ್ನು ರನ್ ಮಾಡುವುದು.
- ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರ (ರಿಫ್ಲೋ): ಪರದೆಯ ಮೇಲೆ ಎಲಿಮೆಂಟ್‌ಗಳ ಸ್ಥಾನ ಮತ್ತು ಆಯಾಮಗಳನ್ನು ನಿರ್ಧರಿಸುವುದು.
- ಪೇಂಟಿಂಗ್ (ರಿಪೇಂಟ್): UI ಅನ್ನು ರೂಪಿಸುವ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಚಿತ್ರಿಸುವುದು.
- ಕಂಪೋಸಿಟಿಂಗ್: ವಿವಿಧ ದೃಶ್ಯ ಅಂಶಗಳನ್ನು ಪದರ ಪದರವಾಗಿ ಜೋಡಿಸುವುದು ಮತ್ತು ಸಂಯೋಜಿಸುವುದು.
ಈ ಯಾವುದೇ ಹಂತಗಳು ನಿಗದಿತ ಸಮಯಕ್ಕಿಂತ ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಂಡರೆ, ಬ್ರೌಸರ್ ಹೊಸ ಫ್ರೇಮ್ ಅನ್ನು ಸಮಯಕ್ಕೆ ಸರಿಯಾಗಿ ಪ್ರಸ್ತುತಪಡಿಸಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ, ಇದು ಫ್ರೇಮ್‌ಗಳು ಡ್ರಾಪ್ ಆಗಲು ಮತ್ತು ಅಸಮ, ಸ್ಪಂದಿಸದ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ. ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಜ್ಯಾಂಕ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ.
ರಿಯಾಕ್ಟ್‌ನ ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್ ವಿವರಿಸಲಾಗಿದೆ
ಸಾಂಪ್ರದಾಯಿಕ ರಿಯಾಕ್ಟ್ ರೆಂಡರಿಂಗ್ ಹೆಚ್ಚಾಗಿ ಸಿಂಕ್ರೊನಸ್ ಮತ್ತು ಬ್ಲಾಕಿಂಗ್ ಆಗಿತ್ತು. ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್ ಸಂಭವಿಸಿದಾಗ, ರಿಯಾಕ್ಟ್ DOMಗೆ ಬದಲಾವಣೆಗಳನ್ನು ಕಮಿಟ್ ಮಾಡುತ್ತಿತ್ತು, ಮತ್ತು ಈ ಪ್ರಕ್ರಿಯೆಯು ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ಬ್ಲಾಕ್ ಮಾಡಬಹುದಿತ್ತು, ಇದರಿಂದಾಗಿ ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಅಥವಾ ಅನಿಮೇಷನ್‌ಗಳಂತಹ ಇತರ ಪ್ರಮುಖ ಕಾರ್ಯಗಳು ಕಾರ್ಯಗತಗೊಳ್ಳದಂತೆ ತಡೆಯುತ್ತಿತ್ತು. ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್, ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಗಳನ್ನು ಅಡ್ಡಿಪಡಿಸುವ ಮತ್ತು ಪುನರಾರಂಭಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಪರಿಚಯಿಸುವ ಮೂಲಕ ಇದನ್ನು ಮೂಲಭೂತವಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ.
ರಿಯಾಕ್ಟ್‌ನ ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್‌ನ ಪ್ರಮುಖ ಲಕ್ಷಣಗಳು:
- ಆದ್ಯತೆ: ರಿಯಾಕ್ಟ್ ಈಗ ವಿವಿಧ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಬಲ್ಲದು. ಉದಾಹರಣೆಗೆ, ತುರ್ತು ಅಪ್‌ಡೇಟ್‌ಗೆ (ಬಳಕೆದಾರರು ಟೈಪ್ ಮಾಡುವಂತಹ) ಕಡಿಮೆ ತುರ್ತಾದ ಅಪ್‌ಡೇಟ್‌ಗಿಂತ (ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಡೇಟಾ ತರುವಂತಹ) ಹೆಚ್ಚಿನ ಆದ್ಯತೆ ನೀಡಲಾಗುತ್ತದೆ.
- ಪ್ರಿಎಂಪ್ಟಿವ್ (ತಡೆಹಿಡಿಯುವಿಕೆ): ಹೆಚ್ಚಿನ ಆದ್ಯತೆಯ ಕಾರ್ಯ ಲಭ್ಯವಾದಾಗ, ರಿಯಾಕ್ಟ್ ಕಡಿಮೆ ಆದ್ಯತೆಯ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯವನ್ನು ಅಡ್ಡಿಪಡಿಸಬಲ್ಲದು. ಇದು ನಿರ್ಣಾಯಕ ಬಳಕೆದಾರ ಸಂವಾದಗಳು ಹೆಚ್ಚು ಸಮಯದವರೆಗೆ ಬ್ಲಾಕ್ ಆಗದಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ.
- ಟೈಮರ್‌ಗಳು: ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಕೆಲಸವನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ನಿಗದಿಪಡಿಸಲು ಆಂತರಿಕ ಟೈಮರ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ, ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ಮುಕ್ತವಾಗಿಡುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ.
- ಸಸ್ಪೆನ್ಸ್: ಈ ವೈಶಿಷ್ಟ್ಯವು ಸಂಪೂರ್ಣ UI ಅನ್ನು ಬ್ಲಾಕ್ ಮಾಡದೆ ಡೇಟಾಕ್ಕಾಗಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳು 'ಕಾಯಲು' ಅನುಮತಿಸುತ್ತದೆ, ಈ ಮಧ್ಯೆ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ತೋರಿಸುತ್ತದೆ.
ಈ ಪೈಪ್‌ಲೈನ್‌ನ ಗುರಿಯು ದೊಡ್ಡ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಗಳನ್ನು ಫ್ರೇಮ್ ಬಜೆಟ್ ಮೀರದಂತೆ ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದಾದ ಸಣ್ಣ ತುಣುಕುಗಳಾಗಿ ವಿಭಜಿಸುವುದಾಗಿದೆ. ಇಲ್ಲಿ ಶೆಡ್ಯೂಲಿಂಗ್ ನಿರ್ಣಾಯಕವಾಗುತ್ತದೆ.
ಶೆಡ್ಯೂಲರ್‌ನ ಪಾತ್ರ
ರಿಯಾಕ್ಟ್‌ನ ಶೆಡ್ಯೂಲರ್ ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಸಂಯೋಜಿಸುವ ಎಂಜಿನ್ ಆಗಿದೆ. ಇದು ಇದಕ್ಕೆ ಜವಾಬ್ದಾರವಾಗಿದೆ:
- ಅಪ್‌ಡೇಟ್ ವಿನಂತಿಗಳನ್ನು ಸ್ವೀಕರಿಸುವುದು (ಉದಾಹರಣೆಗೆ, `setState` ನಿಂದ).
- ಪ್ರತಿ ಅಪ್‌ಡೇಟ್‌ಗೆ ಆದ್ಯತೆಯನ್ನು ನಿಗದಿಪಡಿಸುವುದು.
- ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ಬ್ಲಾಕ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಲು ರೆಂಡರಿಂಗ್ ಕೆಲಸವನ್ನು ಯಾವಾಗ ಪ್ರಾರಂಭಿಸಬೇಕು ಮತ್ತು ನಿಲ್ಲಿಸಬೇಕು ಎಂದು ನಿರ್ಧರಿಸುವುದು.
- ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಬ್ಯಾಚ್ ಮಾಡುವುದು.
ಶೆಡ್ಯೂಲರ್ ಪ್ರತಿ ಫ್ರೇಮ್‌ನಲ್ಲಿ ಮಾಡಲಾಗುವ ಕೆಲಸದ ಪ್ರಮಾಣವನ್ನು ಸಮಂಜಸವಾದ ಮಿತಿಯೊಳಗೆ ಇರಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ, ಫ್ರೇಮ್ ಬಜೆಟ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಸಂಭಾವ್ಯವಾಗಿ ದೊಡ್ಡ ರೆಂಡರ್ ಅನ್ನು ಅಸಮಕಾಲಿಕವಾಗಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಬಹುದಾದ ಪ್ರತ್ಯೇಕ ಕೆಲಸದ ಘಟಕಗಳಾಗಿ ವಿಭಜಿಸುವ ಮೂಲಕ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಪ್ರಸ್ತುತ ಫ್ರೇಮ್‌ನ ಬಜೆಟ್ ಮೀರಲಿದೆ ಎಂದು ಶೆಡ್ಯೂಲರ್ ಪತ್ತೆ ಹಚ್ಚಿದರೆ, ಅದು ಪ್ರಸ್ತುತ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯವನ್ನು ವಿರಾಮಗೊಳಿಸಬಹುದು ಮತ್ತು ಬ್ರೌಸರ್‌ಗೆ ದಾರಿ ಮಾಡಿಕೊಡಬಹುದು, ಇದರಿಂದಾಗಿ ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅಥವಾ ಪೇಂಟಿಂಗ್‌ನಂತಹ ಇತರ ನಿರ್ಣಾಯಕ ಈವೆಂಟ್‌ಗಳನ್ನು ನಿಭಾಯಿಸಲು ಅದಕ್ಕೆ ಅವಕಾಶ ಸಿಗುತ್ತದೆ.
ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಫ್ರೇಮ್ ಬಜೆಟ್ ನಿರ್ವಹಣೆಗೆ ತಂತ್ರಗಳು
ಕಾನ್ಕರೆಂಟ್ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಫ್ರೇಮ್ ಬಜೆಟ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸುವುದು ರಿಯಾಕ್ಟ್‌ನ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ವಿನ್ಯಾಸ ಮತ್ತು ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.
1. `useDeferredValue` ಮತ್ತು `useTransition` ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ
ಈ ಹುಕ್‌ಗಳು ಕಾನ್ಕರೆಂಟ್ ಪರಿಸರದಲ್ಲಿ ದುಬಾರಿ UI ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಆಧಾರಸ್ತಂಭಗಳಾಗಿವೆ:
- `useDeferredValue`: ಈ ಹುಕ್ ನಿಮ್ಮ UIನ ತುರ್ತು-ಅಲ್ಲದ ಭಾಗವನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವುದನ್ನು ಮುಂದೂಡಲು ಅನುಮತಿಸುತ್ತದೆ. ವೇಗವಾಗಿ ಬದಲಾಗುತ್ತಿರುವ ಇನ್‌ಪುಟ್ (ಹುಡುಕಾಟ ಪ್ರಶ್ನೆಯಂತಹ) ಮತ್ತು ಆ ಇನ್‌ಪುಟ್‌ನ ಫಲಿತಾಂಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ UI ಎಲಿಮೆಂಟ್ (ಹುಡುಕಾಟ ಡ್ರಾಪ್‌ಡೌನ್‌ನಂತಹ) ಇರುವ ಸಂದರ್ಭಗಳಿಗೆ ಇದು ಸೂಕ್ತವಾಗಿದೆ. ಫಲಿತಾಂಶಗಳ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ಮುಂದೂಡುವುದರಿಂದ, ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳು ರೆಂಡರ್ ಆಗಲು ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಂಡರೂ ಇನ್‌ಪುಟ್ ಸ್ವತಃ ಸ್ಪಂದನಾಶೀಲವಾಗಿರುವುದನ್ನು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.
ಉದಾಹರಣೆ: ಒಂದು ರಿಯಲ್-ಟೈಮ್ ಸರ್ಚ್ ಬಾರ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಬಳಕೆದಾರರು ಟೈಪ್ ಮಾಡಿದಂತೆ, ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳು ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತವೆ. ಹುಡುಕಾಟದ ಲಾಜಿಕ್ ಅಥವಾ ರೆಂಡರಿಂಗ್ ಸಂಕೀರ್ಣವಾಗಿದ್ದರೆ, ಅದು ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಅನ್ನು ನಿಧಾನಗೊಳಿಸಬಹುದು. ಹುಡುಕಾಟ ಪದದ ಮೇಲೆ `useDeferredValue` ಅನ್ನು ಬಳಸುವುದು ರಿಯಾಕ್ಟ್‌ಗೆ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಆದ್ಯತೆ ನೀಡಲು ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳ ಗಣನಾತ್ಮಕವಾಗಿ ದುಬಾರಿಯಾದ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಮುಂದೂಡುತ್ತದೆ.
import React, { useState, useDeferredValue } from 'react';
function SearchComponent() {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
const handleChange = (event) => {
setQuery(event.target.value);
};
// Imagine 'searchResults' is a computationally expensive operation
const searchResults = expensiveSearch(deferredQuery);
return (
{searchResults.map(result => (
- {result.name}
))}
);
}
- `useTransition`: ಈ ಹುಕ್ ನಿಮಗೆ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು 'ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು' ಎಂದು ಗುರುತಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು ತುರ್ತು-ಅಲ್ಲದ ಅಪ್‌ಡೇಟ್‌ಗಳಾಗಿದ್ದು, ರಿಯಾಕ್ಟ್ ಅವುಗಳನ್ನು ಅಡ್ಡಿಪಡಿಸಬಹುದು. ದೊಡ್ಡ ಪಟ್ಟಿಯನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುವುದು ಅಥವಾ ಸಂಕೀರ್ಣ ವೀಕ್ಷಣೆಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಂತಹ ರೆಂಡರ್ ಮಾಡಲು ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳಬಹುದಾದ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. `useTransition` ಒಂದು `startTransition` ಫಂಕ್ಷನ್ ಮತ್ತು `isPending` ಬೂಲಿಯನ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಟ್ರಾನ್ಸಿಶನ್ ಪ್ರಗತಿಯಲ್ಲಿರುವಾಗ ಲೋಡಿಂಗ್ ಸೂಚಕವನ್ನು ತೋರಿಸಲು `isPending` ಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಬಳಸಬಹುದು.
ಉದಾಹರಣೆ: ಬಳಕೆದಾರರ ಆಯ್ಕೆಯ ಆಧಾರದ ಮೇಲೆ ಫಿಲ್ಟರ್ ಮಾಡಬೇಕಾದ ದೊಡ್ಡ ಡೇಟಾ ಟೇಬಲ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ದೊಡ್ಡ ಟೇಬಲ್ ಅನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುವುದು ಮತ್ತು ಮರು-ರೆಂಡರ್ ಮಾಡುವುದು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳಬಹುದು. ಫಿಲ್ಟರಿಂಗ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್ ಅನ್ನು `startTransition` ನಲ್ಲಿ ಸುತ್ತುವರಿಯುವುದು ರಿಯಾಕ್ಟ್‌ಗೆ ಈ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ಹೆಚ್ಚು ತುರ್ತು ಘಟನೆ ಸಂಭವಿಸಿದಲ್ಲಿ ಅಡ್ಡಿಪಡಿಸಬಹುದು ಎಂದು ಹೇಳುತ್ತದೆ, ಇದರಿಂದ UI ಫ್ರೀಜ್ ಆಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
import React, { useState, useTransition } from 'react';
function DataTable() {
const [data, setData] = useState([]);
const [filter, setFilter] = useState('');
const [isPending, startTransition] = useTransition();
const handleFilterChange = (event) => {
const newFilter = event.target.value;
startTransition(() => {
setFilter(newFilter);
// Potentially expensive filtering operation happens here or is triggered
// by the state update that is now a transition.
});
};
// Assume 'filteredData' is derived from 'data' and 'filter'
const filteredData = applyFilter(data, filter);
return (
{isPending && Loading...
}
{/* Render filteredData */}
);
}
2. ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ
ಕಾನ್ಕರೆನ್ಸಿ ಇದ್ದರೂ ಸಹ, ಅಸಮರ್ಥ ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರಿಂಗ್ ನಿಮ್ಮ ಫ್ರೇಮ್ ಬಜೆಟ್ ಅನ್ನು ಶೀಘ್ರವಾಗಿ ಖಾಲಿ ಮಾಡಬಹುದು. ಈ ತಂತ್ರಗಳನ್ನು ಬಳಸಿ:
- `React.memo`: ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಾಗಿ, `React.memo` ಒಂದು ಹೈಯರ್-ಆರ್ಡರ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದ್ದು, ಅದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮೆಮೋಯಿಜ್ ಮಾಡುತ್ತದೆ. ಅದರ ಪ್ರಾಪ್ಸ್ ಬದಲಾದಾಗ ಮಾತ್ರ ಅದು ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ, ಪೇರೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆದರೂ ಕಾಂಪೊನೆಂಟ್‌ನ ಪ್ರಾಪ್ಸ್ ಒಂದೇ ಆಗಿದ್ದರೆ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ.
- `useCallback`: ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಮೆಮೋಯಿಜ್ ಮಾಡುತ್ತದೆ. ಮೆಮೋಯಿಜ್ ಮಾಡಿದ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ (`React.memo`) ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಪಾಸ್ ಮಾಡುವಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ, ಪ್ರತಿ ಪೇರೆಂಟ್ ರೆಂಡರ್‌ನಲ್ಲಿ ಹೊಸ ಫಂಕ್ಷನ್ ಇನ್‌ಸ್ಟೆನ್ಸ್ ರಚನೆಯಾಗುವುದರಿಂದ ಆ ಚೈಲ್ಡ್‌ಗಳು ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ತಡೆಯಲು.
- `useMemo`: ಒಂದು ಗಣನೆಯ ಫಲಿತಾಂಶವನ್ನು ಮೆಮೋಯಿಜ್ ಮಾಡುತ್ತದೆ. ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಸಂಕೀರ್ಣವಾದ ಲೆಕ್ಕಾಚಾರವಿದ್ದರೆ, `useMemo` ಫಲಿತಾಂಶವನ್ನು ಕ್ಯಾಶ್ ಮಾಡಬಹುದು ಮತ್ತು ಅದರ ಡಿಪೆಂಡೆನ್ಸಿಗಳು ಬದಲಾದಾಗ ಮಾತ್ರ ಅದನ್ನು ಮರು-ಲೆಕ್ಕಾಚಾರ ಮಾಡಬಹುದು, ಅಮೂಲ್ಯವಾದ ಸಿಪಿಯು ಸೈಕಲ್‌ಗಳನ್ನು ಉಳಿಸುತ್ತದೆ.
- ಕಾಂಪೊನೆಂಟ್ ರಚನೆ ಮತ್ತು ಪ್ರೊಫೈಲಿಂಗ್: ದೊಡ್ಡ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಚಿಕ್ಕ, ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾಗಿ ವಿಭಜಿಸಿ. ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಪ್ರೊಫೈಲರ್ ಬಳಸಿ. ಯಾವ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಹೆಚ್ಚು ಬಾರಿ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತಿವೆ ಅಥವಾ ರೆಂಡರ್ ಆಗಲು ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತಿವೆ ಎಂಬುದನ್ನು ನೋಡಲು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಿ.
3. ಸಮರ್ಥ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ
ನೀವು ಸ್ಟೇಟ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತೀರಿ ಎಂಬುದು ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಗಮನಾರ್ಹವಾಗಿ ಪರಿಣಾಮ ಬೀರಬಹುದು:
- ಲೋಕಲ್ ಸ್ಟೇಟ್ vs. ಗ್ಲೋಬಲ್ ಸ್ಟೇಟ್: ಸ್ಟೇಟ್ ಅನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಸ್ಥಳೀಯವಾಗಿ ಇರಿಸಿ. ಅನೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾದ್ಯಂತ ಸ್ಟೇಟ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳಬೇಕಾದಾಗ, ಗ್ಲೋಬಲ್ ಸ್ಟೇಟ್ ನಿರ್ವಹಣಾ ಪರಿಹಾರವನ್ನು ಪರಿಗಣಿಸಿ, ಆದರೆ ಗ್ಲೋಬಲ್ ಸ್ಟೇಟ್‌ಗೆ ಮಾಡುವ ಅಪ್‌ಡೇಟ್‌ಗಳು ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಹೇಗೆ ಪ್ರಚೋದಿಸುತ್ತವೆ ಎಂಬುದರ ಬಗ್ಗೆ ಗಮನವಿರಲಿ.
- ಕಾಂಟೆಕ್ಸ್ಟ್ API ಆಪ್ಟಿಮೈಸೇಶನ್: ರಿಯಾಕ್ಟ್‌ನ ಕಾಂಟೆಕ್ಸ್ಟ್ API ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೌಲ್ಯ ಬದಲಾದಾಗ ಅದನ್ನು ಬಳಸುವ ಯಾವುದೇ ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ, ಅವರು ಕಾಳಜಿವಹಿಸುವ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನ ನಿರ್ದಿಷ್ಟ ಭಾಗ ಬದಲಾಗದಿದ್ದರೂ ಸಹ. ಕಾಂಟೆಕ್ಸ್ಟ್‌ಗಳನ್ನು ವಿಭಜಿಸುವುದನ್ನು ಅಥವಾ ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೌಲ್ಯಗಳಿಗೆ ಮೆಮೋಯಿಜೇಶನ್ ತಂತ್ರಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
- ಸೆಲೆಕ್ಟರ್ ಪ್ಯಾಟರ್ನ್: Redux ಅಥವಾ Zustand ನಂತಹ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಲೈಬ್ರರಿಗಳಿಗಾಗಿ, ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಯಾವುದೇ ಗ್ಲೋಬಲ್ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ನ ಮೇಲೆ ಮರು-ರೆಂಡರ್ ಆಗುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ, ಅವರು ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಆಗಿರುವ ಸ್ಟೇಟ್‌ನ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳು ಬದಲಾದಾಗ ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸಿ.
4. ಉದ್ದನೆಯ ಪಟ್ಟಿಗಳಿಗಾಗಿ ವರ್ಚುವಲೈಸೇಶನ್
ಪಟ್ಟಿಯಲ್ಲಿ ಸಾವಿರಾರು ಐಟಂಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವುದು ಕಾನ್ಕರೆನ್ಸಿ ಇರಲಿ, ಇಲ್ಲದಿರಲಿ, ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ತೀವ್ರ ಪರಿಣಾಮ ಬೀರಬಹುದು. ವರ್ಚುವಲೈಸೇಶನ್ (ವಿಂಡೋಯಿಂಗ್ ಎಂದೂ ಕರೆಯಲ್ಪಡುತ್ತದೆ) ಒಂದು ತಂತ್ರವಾಗಿದ್ದು, ಇದರಲ್ಲಿ ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿ ಪ್ರಸ್ತುತ ಗೋಚರಿಸುವ ಐಟಂಗಳನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡಲಾಗುತ್ತದೆ. ಬಳಕೆದಾರರು ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಂತೆ, ಆಫ್-ಸ್ಕ್ರೀನ್ ಐಟಂಗಳನ್ನು ಅನ್‌ಮೌಂಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ಹೊಸ ಐಟಂಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಿ ಮೌಂಟ್ ಮಾಡಲಾಗುತ್ತದೆ. `react-window` ಮತ್ತು `react-virtualized` ನಂತಹ ಲೈಬ್ರರಿಗಳು ಇದಕ್ಕಾಗಿ ಅತ್ಯುತ್ತಮ ಸಾಧನಗಳಾಗಿವೆ.
ಉದಾಹರಣೆ: ಒಂದು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಫೀಡ್ ಅಥವಾ ಉದ್ದನೆಯ ಉತ್ಪನ್ನ ಪಟ್ಟಿ. ಒಂದೇ ಬಾರಿಗೆ 1000 ಪಟ್ಟಿ ಐಟಂಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವ ಬದಲು, ವರ್ಚುವಲೈಸೇಶನ್ ಪರದೆಯ ಮೇಲೆ ಗೋಚರಿಸುವ 10-20 ಐಟಂಗಳನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಇದು ಪ್ರತಿ ಫ್ರೇಮ್‌ಗೆ ರಿಯಾಕ್ಟ್ ಮತ್ತು ಬ್ರೌಸರ್ ಮಾಡಬೇಕಾದ ಕೆಲಸದ ಪ್ರಮಾಣವನ್ನು ನಾಟಕೀಯವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
5. ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಮತ್ತು ಲೇಜಿ ಲೋಡಿಂಗ್
ಇದು ನೇರವಾಗಿ ಫ್ರೇಮ್ ಬಜೆಟ್ ನಿರ್ವಹಣೆಯಲ್ಲದಿದ್ದರೂ, ಆರಂಭಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪೇಲೋಡ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು ಮತ್ತು ಅಗತ್ಯವಿರುವುದನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡುವುದು ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ ಮತ್ತು ಬ್ರೌಸರ್ ಮೇಲಿನ ಒಟ್ಟಾರೆ ಹೊರೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ ಪರೋಕ್ಷವಾಗಿ ಸಹಾಯ ಮಾಡಬಹುದು. ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಾಗಿ ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು `React.lazy` ಮತ್ತು `Suspense` ಬಳಸಿ.
import React, { Suspense, lazy } from 'react';
const ExpensiveComponent = lazy(() => import('./ExpensiveComponent'));
function App() {
return (
My App
Loading component... }>
6. ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್
`useDeferredValue` ಮತ್ತು `useTransition` ಅನೇಕ ಕಾನ್ಕರೆನ್ಸಿ-ಸಂಬಂಧಿತ ಮುಂದೂಡಿಕೆಗಳನ್ನು ನಿಭಾಯಿಸುತ್ತವಾದರೂ, ಸಾಂಪ್ರದಾಯಿಕ ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್ ಆಗಾಗ್ಗೆ ಸಂಭವಿಸುವ ಈವೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಇನ್ನೂ ಮೌಲ್ಯಯುತವಾಗಿವೆ:
- ಡಿಬೌನ್ಸಿಂಗ್: ನಿರ್ದಿಷ್ಟ ಅವಧಿಯ ನಿಷ್ಕ್ರಿಯತೆಯ ನಂತರ ಮಾತ್ರ ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ವಿಂಡೋ ಮರುಗಾತ್ರಗೊಳಿಸುವಿಕೆ ಅಥವಾ ಇನ್‌ಪುಟ್ ಬದಲಾವಣೆಗಳಂತಹ ಈವೆಂಟ್‌ಗಳಿಗೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ, ಅಲ್ಲಿ ಬಳಕೆದಾರರು ಸಂವಾದಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿದ ನಂತರದ ಅಂತಿಮ ಸ್ಥಿತಿಯ ಬಗ್ಗೆ ಮಾತ್ರ ನೀವು ಕಾಳಜಿ ವಹಿಸುತ್ತೀರಿ.
- ಥ್ರಾಟ್ಲಿಂಗ್: ನಿರ್ದಿಷ್ಟ ಸಮಯದ ಅಂತರದಲ್ಲಿ ಫಂಕ್ಷನ್ ಅನ್ನು ಗರಿಷ್ಠ ಒಂದು ಬಾರಿ ಕರೆಯಲಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್‌ನಂತಹ ಈವೆಂಟ್‌ಗಳಿಗೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ, ಅಲ್ಲಿ ನೀವು ನಿಯತಕಾಲಿಕವಾಗಿ UI ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಬಯಸಬಹುದು, ಆದರೆ ಪ್ರತಿ ಸ್ಕ್ರಾಲ್ ಈವೆಂಟ್‌ನಲ್ಲಿ ಅಲ್ಲ.
ಈ ತಂತ್ರಗಳು ಸಂಭಾವ್ಯವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆ-ತೀವ್ರವಾದ ಫಂಕ್ಷನ್‌ಗಳಿಗೆ ಅತಿಯಾದ ಕರೆಗಳನ್ನು ತಡೆಯುತ್ತವೆ, ಹೀಗಾಗಿ ನಿಮ್ಮ ಫ್ರೇಮ್ ಬಜೆಟ್ ಅನ್ನು ರಕ್ಷಿಸುತ್ತವೆ.
7. ಬ್ಲಾಕಿಂಗ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ತಪ್ಪಿಸಿ
ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ಬ್ಲಾಕ್ ಮಾಡುವ ದೀರ್ಘಕಾಲದ, ಸಿಂಕ್ರೊನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ನಿರ್ವಹಿಸುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಇದು ಇವುಗಳನ್ನು ಒಳಗೊಂಡಿದೆ:
- ಮುಖ್ಯ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಭಾರೀ ಗಣನೆ: ಸಂಕೀರ್ಣ ಗಣನೆಗಳನ್ನು ವೆಬ್ ವರ್ಕರ್‌ಗಳಿಗೆ ಆಫ್‌ಲೋಡ್ ಮಾಡಿ ಅಥವಾ `useDeferredValue` ಅಥವಾ `useTransition` ಬಳಸಿ ಅವುಗಳನ್ನು ಮುಂದೂಡಿ.
- ಸಿಂಕ್ರೊನಸ್ ಡೇಟಾ ಫೆಚಿಂಗ್: ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗಾಗಿ ಯಾವಾಗಲೂ ಅಸಿಂಕ್ರೊನಸ್ ವಿಧಾನಗಳನ್ನು ಬಳಸಿ.
- ರಿಯಾಕ್ಟ್‌ನ ನಿಯಂತ್ರಣದ ಹೊರಗಿನ ದೊಡ್ಡ DOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್‌ಗಳು: ನೀವು ನೇರವಾಗಿ DOM ಅನ್ನು ಮ್ಯಾನಿಪ್ಯುಲೇಟ್ ಮಾಡುತ್ತಿದ್ದರೆ, ಅದನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಮತ್ತು ಅಸಿಂಕ್ರೊನಸ್ ಆಗಿ ಮಾಡಿ.
ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಪ್ರೊಫೈಲಿಂಗ್ ಮತ್ತು ಡೀಬಗ್ ಮಾಡುವುದು
ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಉತ್ತಮ ಪ್ರೊಫೈಲಿಂಗ್ ಪರಿಕರಗಳು ಬೇಕಾಗುತ್ತವೆ:
- ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಪ್ರೊಫೈಲರ್: ಇದು ನಿಮ್ಮ ಪ್ರಾಥಮಿಕ ಸಾಧನ. ಇದು ನಿಮಗೆ ಸಂವಾದಗಳನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಲು, ಯಾವ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ರೆಂಡರ್ ಆಗಿವೆ, ಏಕೆ ರೆಂಡರ್ ಆಗಿವೆ ಮತ್ತು ಅವು ಎಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಂಡಿವೆ ಎಂಬುದನ್ನು ನೋಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಕಾನ್ಕರೆಂಟ್ ಮೋಡ್‌ನಲ್ಲಿ, ರಿಯಾಕ್ಟ್ ಹೇಗೆ ಕೆಲಸಕ್ಕೆ ಆದ್ಯತೆ ನೀಡುತ್ತದೆ ಮತ್ತು ಅಡ್ಡಿಪಡಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ಗಮನಿಸಬಹುದು. ಇವುಗಳನ್ನು ನೋಡಿ:
- ವೈಯಕ್ತಿಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ರೆಂಡರ್ ಸಮಯಗಳು.
- ಕಮಿಟ್ ಸಮಯಗಳು.
- “ಇದು ಏಕೆ ರೆಂಡರ್ ಆಯಿತು?” ಮಾಹಿತಿ.
- `useTransition` ಮತ್ತು `useDeferredValue` ನ ಪ್ರಭಾವ.
- ಬ್ರೌಸರ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೂಲ್ಸ್: ಕ್ರೋಮ್ ಡೆವ್‌ಟೂಲ್ಸ್ (ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟ್ಯಾಬ್) ಮತ್ತು ಫೈರ್‌ಫಾಕ್ಸ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಶನ್, ಲೇಔಟ್, ಪೇಂಟಿಂಗ್ ಮತ್ತು ಕಂಪೋಸಿಟಿಂಗ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ವಿವರವಾದ ಒಳನೋಟಗಳನ್ನು ನೀಡುತ್ತವೆ. ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ಬ್ಲಾಕ್ ಮಾಡುತ್ತಿರುವ ದೀರ್ಘ ಕಾರ್ಯಗಳನ್ನು ನೀವು ಗುರುತಿಸಬಹುದು.
- ಫ್ಲೇಮ್ ಚಾರ್ಟ್‌ಗಳು: ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಮತ್ತು ಬ್ರೌಸರ್ ಪರಿಕರಗಳೆರಡೂ ಫ್ಲೇಮ್ ಚಾರ್ಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ, ಇದು ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಂಕ್ಷನ್‌ಗಳ ಕಾಲ್ ಸ್ಟಾಕ್ ಮತ್ತು ಎಕ್ಸಿಕ್ಯೂಶನ್ ಸಮಯವನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಗುರುತಿಸುವುದನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
ಪ್ರೊಫೈಲಿಂಗ್ ಡೇಟಾವನ್ನು ಅರ್ಥೈಸಿಕೊಳ್ಳುವುದು
ಪ್ರೊಫೈಲಿಂಗ್ ಮಾಡುವಾಗ, ಇವುಗಳಿಗೆ ಗಮನ ಕೊಡಿ:
- ದೀರ್ಘ ಕಾರ್ಯಗಳು: ಮುಖ್ಯ ಥ್ರೆಡ್‌ನಲ್ಲಿ 50ms ಗಿಂತ ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ಯಾವುದೇ ಕಾರ್ಯವು ದೃಶ್ಯ ಜ್ಯಾಂಕ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು. ಕಾನ್ಕರೆಂಟ್ ರಿಯಾಕ್ಟ್ ಇವುಗಳನ್ನು ವಿಭಜಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ.
- ಆಗಾಗ್ಗೆ ಮರು-ರೆಂಡರ್‌ಗಳು: ಕಾಂಪೊನೆಂಟ್‌ಗಳ, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ ಅಥವಾ ಸಂಕೀರ್ಣವಾದವುಗಳ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳು ಫ್ರೇಮ್ ಬಜೆಟ್ ಅನ್ನು ಶೀಘ್ರವಾಗಿ ಬಳಸಿಕೊಳ್ಳಬಹುದು.
- ಕಮಿಟ್ ಹಂತದ ಅವಧಿ: ರಿಯಾಕ್ಟ್ DOM ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯ. ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಇದನ್ನು ನಾನ್-ಬ್ಲಾಕಿಂಗ್ ಮಾಡುವ ಗುರಿಯನ್ನು ಹೊಂದಿದ್ದರೂ, ಬಹಳ ದೀರ್ಘವಾದ ಕಮಿಟ್ ಇನ್ನೂ ಸ್ಪಂದನಶೀಲತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು.
- `interleaved` ರೆಂಡರ್‌ಗಳು: ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಪ್ರೊಫೈಲರ್‌ನಲ್ಲಿ, ನೀವು `interleaved` ಎಂದು ಗುರುತಿಸಲಾದ ರೆಂಡರ್‌ಗಳನ್ನು ನೋಡಬಹುದು. ಇದು ರಿಯಾಕ್ಟ್ ಹೆಚ್ಚಿನ ಆದ್ಯತೆಯ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ನಿಭಾಯಿಸಲು ರೆಂಡರ್ ಅನ್ನು ವಿರಾಮಗೊಳಿಸಿದೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ, ಇದು ಕಾನ್ಕರೆಂಟ್ ಮೋಡ್‌ನಲ್ಲಿ ನಿರೀಕ್ಷಿತ ಮತ್ತು ಅಪೇಕ್ಷಿತ ನಡವಳಿಕೆಯಾಗಿದೆ.
ಫ್ರೇಮ್ ಬಜೆಟ್ ನಿರ್ವಹಣೆಗಾಗಿ ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು
ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ನಿರ್ಮಿಸುವಾಗ, ನಿಮ್ಮ ಫ್ರೇಮ್ ಬಜೆಟ್ ನಿರ್ವಹಣಾ ತಂತ್ರಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದರ ಮೇಲೆ ಹಲವಾರು ಅಂಶಗಳು ಪ್ರಭಾವ ಬೀರುತ್ತವೆ:
- ಸಾಧನಗಳ ವೈವಿಧ್ಯತೆ: ಬಳಕೆದಾರರು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೈ-ಎಂಡ್ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳು ಮತ್ತು ಲ್ಯಾಪ್‌ಟಾಪ್‌ಗಳಿಂದ ಹಿಡಿದು ಬಜೆಟ್ ಸ್ಮಾರ್ಟ್‌ಫೋನ್‌ಗಳವರೆಗೆ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧನಗಳಲ್ಲಿ ಪ್ರವೇಶಿಸುತ್ತಾರೆ. ಕಡಿಮೆ ಶಕ್ತಿಯುತ ಹಾರ್ಡ್‌ವೇರ್ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳು ನಿರ್ಣಾಯಕವಾಗಿವೆ. ಮ್ಯಾಕ್‌ಬುಕ್ ಪ್ರೋನಲ್ಲಿ ಸುಗಮವಾಗಿ ಚಲಿಸುವ UI, ಕಡಿಮೆ-ಮಟ್ಟದ ಆಂಡ್ರಾಯ್ಡ್ ಸಾಧನದಲ್ಲಿ ತೊದಲಬಹುದು.
- ನೆಟ್‌ವರ್ಕ್ ವ್ಯತ್ಯಾಸ: ವಿವಿಧ ಪ್ರದೇಶಗಳಲ್ಲಿನ ಬಳಕೆದಾರರು ವಿಭಿನ್ನ ಇಂಟರ್ನೆಟ್ ವೇಗ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹತೆಯನ್ನು ಹೊಂದಿರಬಹುದು. ಫ್ರೇಮ್ ಬಜೆಟ್‌ಗೆ ನೇರವಾಗಿ ಸಂಬಂಧಿಸಿಲ್ಲವಾದರೂ, ನಿಧಾನಗತಿಯ ನೆಟ್‌ವರ್ಕ್‌ಗಳು ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ವಿಳಂಬಗೊಳಿಸುವ ಮೂಲಕ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಉಲ್ಬಣಗೊಳಿಸಬಹುದು, ಇದು ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸಬಹುದು. ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಮತ್ತು ಸಮರ್ಥ ಡೇಟಾ ಫೆಚಿಂಗ್ ಮಾದರಿಗಳಂತಹ ತಂತ್ರಗಳು ಅತ್ಯಗತ್ಯ.
- ಪ್ರವೇಶಸಾಧ್ಯತೆ: ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳು ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಉದಾಹರಣೆಗೆ, ನೀವು ಬಾಕಿ ಇರುವ ಸ್ಥಿತಿಗಳಿಗಾಗಿ ದೃಶ್ಯ ಸೂಚನೆಗಳನ್ನು (ಸ್ಪಿನ್ನರ್‌ಗಳಂತಹ) ಬಳಸುತ್ತಿದ್ದರೆ, ಅವುಗಳನ್ನು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಂದಲೂ ಪ್ರಕಟಿಸಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಸಾಂಸ್ಕೃತಿಕ ನಿರೀಕ್ಷೆಗಳು: ಕಾರ್ಯಕ್ಷಮತೆ ಸಾರ್ವತ್ರಿಕ ನಿರೀಕ್ಷೆಯಾಗಿದ್ದರೂ, ಬಳಕೆದಾರರ ಸಂವಾದದ ಸಂದರ್ಭವು ಭಿನ್ನವಾಗಿರಬಹುದು. ನಿಮ್ಮ UIನ ಸ್ಪಂದನಶೀಲತೆಯು ಬಳಕೆದಾರರು ತಮ್ಮ ಪ್ರದೇಶದಲ್ಲಿ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಹೇಗೆ ವರ್ತಿಸಬೇಕೆಂದು ನಿರೀಕ್ಷಿಸುತ್ತಾರೆಯೋ ಅದರೊಂದಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ಉತ್ತಮ ಅಭ್ಯಾಸಗಳ ಸಾರಾಂಶ
ರಿಯಾಕ್ಟ್‌ನ ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಫ್ರೇಮ್ ಬಜೆಟ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ:
- ವೇಗವಾಗಿ ಬದಲಾಗುತ್ತಿರುವ ಇನ್‌ಪುಟ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ತುರ್ತು-ಅಲ್ಲದ UI ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಮುಂದೂಡಲು `useDeferredValue` ಬಳಸಿ.
- ಅಡ್ಡಿಪಡಿಸಬಹುದಾದ ತುರ್ತು-ಅಲ್ಲದ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಗುರುತಿಸಲು `useTransition` ಬಳಸಿ, ಮತ್ತು ಲೋಡಿಂಗ್ ಸೂಚಕಗಳಿಗಾಗಿ `isPending` ಬಳಸಿ.
- `React.memo`, `useCallback`, ಮತ್ತು `useMemo` ಬಳಸಿ ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ.
- ಸ್ಟೇಟ್ ಅನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಇರಿಸಿ ಮತ್ತು ಗ್ಲೋಬಲ್ ಸ್ಟೇಟ್ ಅನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸಿ.
- ಗೋಚರಿಸುವ ಐಟಂಗಳನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡಲು ಉದ್ದನೆಯ ಪಟ್ಟಿಗಳನ್ನು ವರ್ಚುವಲೈಜ್ ಮಾಡಿ.
- `React.lazy` ಮತ್ತು `Suspense` ನೊಂದಿಗೆ ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಿ.
- ಆಗಾಗ್ಗೆ ಸಂಭವಿಸುವ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಿಗಾಗಿ ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.
- ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಮತ್ತು ಬ್ರೌಸರ್ ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ ನಿರಂತರವಾಗಿ ಪ್ರೊಫೈಲ್ ಮಾಡಿ.
- ಮುಖ್ಯ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಬ್ಲಾಕಿಂಗ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ತಪ್ಪಿಸಿ.
- ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.
ತೀರ್ಮಾನ
ರಿಯಾಕ್ಟ್‌ನ ಕಾನ್ಕರೆಂಟ್ ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್ ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಪ್ರಗತಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಮುಂದೂಡಿಕೆ, ಆದ್ಯತೆ ಮತ್ತು ಸಮರ್ಥ ರೆಂಡರಿಂಗ್‌ನಂತಹ ತಂತ್ರಗಳ ಮೂಲಕ ನಿಮ್ಮ ಫ್ರೇಮ್ ಬಜೆಟ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡು ಮತ್ತು ಸಕ್ರಿಯವಾಗಿ ನಿರ್ವಹಿಸುವ ಮೂಲಕ, ನೀವು ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ಸುಗಮ ಮತ್ತು ಸರಾಗ ಅನುಭವ ನೀಡುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ರಿಯಾಕ್ಟ್ ಒದಗಿಸುವ ಪರಿಕರಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ, ಶ್ರದ್ಧೆಯಿಂದ ಪ್ರೊಫೈಲ್ ಮಾಡಿ ಮತ್ತು ಯಾವಾಗಲೂ ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಿ. ಫ್ರೇಮ್ ಬಜೆಟ್ ನಿರ್ವಹಣೆಯಲ್ಲಿ ಪರಿಣತಿ ಹೊಂದುವುದು ಕೇವಲ ತಾಂತ್ರಿಕ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅಲ್ಲ; ಇದು ಜಾಗತಿಕ ಡಿಜಿಟಲ್ ಜಗತ್ತಿನಲ್ಲಿ ಅಸಾಧಾರಣ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ತಲುಪಿಸುವ ನಿಟ್ಟಿನಲ್ಲಿ ಒಂದು ನಿರ್ಣಾಯಕ ಹೆಜ್ಜೆಯಾಗಿದೆ.
ವೇಗವಾದ, ಹೆಚ್ಚು ಸ್ಪಂದನಾಶೀಲ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಇಂದೇ ಈ ತತ್ವಗಳನ್ನು ಅನ್ವಯಿಸಲು ಪ್ರಾರಂಭಿಸಿ!