React wants your components to be predictable. Give it the same state and props, and it should paint the same UI every t

React ನಿಮ್ಮ ಘಟಕಗಳು (components) ಮುನ್ಸೂಚನೆ ನೀಡುವಂತಿರಲಿ (predictable) ಎಂದು ಬಯಸುತ್ತದೆ. ಅದಕ್ಕೆ ಒಂದೇ ರೀತಿಯ state ಮತ್ತು props ನೀಡಿದರೆ, ಅದು ಪ್ರತಿ ಬಾರಿಯೂ ಒಂದೇ ರೀತಿಯ UI ಅನ್ನು ತೋರಿಸಬೇಕು. ಆದರೆ ಹೆಚ್ಚಿನ ನೈಜ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಕೇವಲ ಆ ಮಿತಿಯೊಳಗೆ ಇರಲು ಸಾಧ್ಯವಿಲ್ಲ. ಅವು ಹೊರಗಿನ ಪ್ರಪಂಚದೊಂದಿಗೆ ಸಂಪರ್ಕ ಹೊಂದಬೇಕಾಗುತ್ತದೆ. ಒಂದು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ಸರ್ವರ್‌ನಿಂದ ತಾಜಾ ಅಂಕಿಅಂಶಗಳು ಬೇಕಾಗಬಹುದು. ಚಾಟ್ ವಿಜೆಟ್ ಸಂದೇಶಗಳನ್ನು ಕಾಯಬೇಕಾಗಬಹುದು. ಟೈಮರ್ ಕೆಲಸ ಮಾಡಬೇಕಾಗಬಹುದು. ಈ ಕಾರ್ಯಾಚರಣೆಗಳು side effects ಆಗಿವೆ ಮತ್ತು ಅವು React ನ render cycle ಗಿಂತ ಹೊರಗಿವೆ. ನಿಮ್ಮ component ಸ್ವತಃ ನಿಖರವಾಗಿರಲು, ಈ ಗೊಂದಲಮಯ ಮತ್ತು ಮುನ್ಸೂಚನೆ ನೀಡಲಾಗದ ಕೆಲಸಗಳನ್ನು ನೀವು useEffect hook ನಲ್ಲಿ ಇರಿಸಬೇಕು.

Side Effects: useEffect ಒಳಗೆ ಏನಿರಬೇಕು

Side effect ಎಂದರೆ JSX ಅನ್ನು ಹಿಂತಿರುಗಿಸುವುದನ್ನು ಹೊರತುಪಡಿಸಿ, ಹೊರಗಿನ ಪ್ರಪಂಚದೊಂದಿಗೆ ಸಂಪರ್ಕ ಸಾಧಿಸುವ ಯಾವುದೇ ವಿಷಯ. React ನ render phase ಶುದ್ಧವಾಗಿರಲಿ (pure). ನೀವು ಡೇಟಾವನ್ನು ಪಡೆಯಲು (fetching data) ಪ್ರಾರಂಭಿಸಿದಾಗ, global variables ಗಳಿಗೆ ಬರೆಯುವಾಗ ಅಥವಾ DOM ಗೆ listeners ಗಳನ್ನು ಅಳವಡಿಸುವಾಗ, ನೀವು pure territory ಯಿಂದ ಹೊರಬರುತ್ತೀರಿ.

ಸಾಮಾನ್ಯ ಉದಾಹರಣೆಗಳು:

• API ಇಂದ ಡೇಟಾವನ್ನು ಪಡೆಯುವುದು (Fetching data)
• Timers ಅಥವಾ intervals ಅನ್ನು ಸೆಟ್ ಮಾಡುವುದು
• window ಅಥವಾ document ಗೆ event listeners ಗಳನ್ನು ಸೇರಿಸುವುದು
• ಬ್ರೌಸರ್ ಟ್ಯಾಬ್ ಶೀರ್ಷಿಕೆಯನ್ನು (title) ಅಪ್‌ಡೇಟ್ ಮಾಡುವುದು
• WebSockets ಗೆ ಕನೆಕ್ಟ್ ಮಾಡುವುದು

ಈ ಕಾರ್ಯಗಳು ಒಂದೇ ಗುಣವನ್ನು ಹೊಂದಿವೆ: ಅವು ನಿಮ್ಮ component ನ return statement ಒಳಗೆ ಅಥವಾ ಮುಖ್ಯ render logic ನ ಸಮಯದಲ್ಲಿ ಇರಬಾರದು. setInterval ನಂತಹ browser API ಅನ್ನು ನೇರವಾಗಿ render body ಒಳಗೆ ಕರೆಯಲು ಪ್ರಯತ್ನಿಸಿದರೆ, ಅದು ಪ್ರತಿ render ಸಮಯದಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ, ಇದರಿಂದ ಡ್ಯುಪ್ಲಿಕೇಟ್ timers ಸೃಷ್ಟಿಯಾಗಿ ಗೊಂದಲಮಯ ವರ್ತನೆ ಉಂಟಾಗುತ್ತದೆ. ಈ ಕೆಲಸವನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಮತ್ತು ಅದನ್ನು ಸರಿಯಾದ ಸಮಯದಲ್ಲಿ ನಡೆಸಲು useEffect ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ.

Dependency Array ಸಮಯವನ್ನು ಹೇಗೆ ನಿಯಂತ್ರಿಸುತ್ತದೆ

useEffect ಗೆ ನೀಡುವ ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ dependency array ಆಗಿದೆ, ಮತ್ತು class components ಇಂದ ಬದಲಾಗುತ್ತಿರುವ ડેವಲಪರ್‌ಗಳಿಗೆ ಇದು ಗೊಂದಲದ ದೊಡ್ಡ ಮೂಲವಾಗಿದೆ. ಪ್ರಸ್ತುತ render ನಂತರ ನಿಮ್ಮ effect ಅನ್ನು ಬಿಡಬೇಕೆ ಅಥವಾ ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕೆ ಎಂದು ನಿರ್ಧರಿಸಲು React ಗಮನಿಸುವ ವೇರಿಯೇಬಲ್‌ಗಳ ಗುಂಪನ್ನು ಇದು ಎಂದು ಭಾವಿಸಿ.

ನೀವು ಪದೇ ಪದೇ ಬಳಸುವ ಮೂರು ಮಾದರಿಗಳಿವೆ.

ಯಾವುದೇ dependency array ಇಲ್ಲದೆ. ನೀವು array ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬಿಟ್ಟರೆ, ಮೊದಲನೆಯದನ್ನು ಒಳಗೊಂಡಂತೆ ಪ್ರತಿ single render ನಂತರ effect ಅನ್ನು ನಡೆಸಲು React ಬಯಸುತ್ತದೆ ಎಂದು ಭಾವಿಸುತ್ತದೆ. ಇದು ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಸಂದರ್ಭಗಳು ಬಹಳ ಕಡಿಮೆ. ನಿಮ್ಮ effect ಒಂದು network request ಅಥವಾ ಭಾರೀ DOM ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಮಾಡುವುದಾದರೆ, ಪ್ರತಿ keystroke ಅಥವಾ state ಬದಲಾವಣೆಯ ಮೇಲೆ ಅದನ್ನು ನಡೆಸುವುದರಿಂದ ಕಾರ್ಯಕ್ಷಮತೆ (performance) ಕುಸಿಯುತ್ತದೆ. ಯಾವುದೇ prop ಅಥವಾ state ಬದಲಾಗಬಹುದು ಮತ್ತು ನೀವು ಯಾವುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಸಾಧ್ಯವಾಗದಿದ್ದಾಗ ಮಾತ್ರ ಈ ಮಾದರಿಯನ್ನು ಬಳಸಿ.

ಖಾಲಿ array []. ಇದು component mount ಆದ ತಕ್ಷಣ ಮತ್ತು DOM ಸಿದ್ಧವಾದ ತಕ್ಷಣ effect ಅನ್ನು ಒಮ್ಮೆ ಮಾತ್ರ ನಡೆಸಲು React ಗೆ ತಿಳಿಸುತ್ತದೆ. ಆರಂಭಿಕ ಡೇಟಾ ಫೆಚ್‌ಗಳಿಗೆ (initial data fetches) ಇದು ಸರಿಯಾದ ಸ್ಥಳವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ component ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡುವುದಾದರೆ, ಬಳಕೆದಾರರು ಪುಟದ ಕೆಳಭಾಗದಲ್ಲಿರುವ ಫಾರ್ಮ್ ಜೊತೆಗೆ ಸಂವಹನ ನಡೆಸಿದ ಪ್ರತಿ ಬಾರಿಯೂ ಅಲ್ಲದೆ, ಪ್ರೊಫೈಲ್ ಪುಟವು ಕಾಣಿಸಿಕೊಂಡಾಗ ಕೇವಲ ಒಮ್ಮೆ ಮಾತ್ರ ಆ ರಿಕ್ವೆಸ್ಟ್ ನಡೆಯಬೇಕೆಂದು ನೀವು ಬಯಸುತ್ತೀರಿ.

ನಿರ್ದಿಷ್ಟ ವೇರಿಯೇಬಲ್‌ಗಳಿರುವ array [count]. ಇದು ನಿಖರವಾದ ಸಾಧನವಾಗಿದೆ. React ಈ dependencies ಗಳ ಪ್ರಸ್ತುತ ಮೌಲ್ಯಗಳನ್ನು ಹಿಂದಿನ render ಸಮಯದಲ್ಲಿನ ಅವುಗಳ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಹೋಲಿಸುತ್ತದೆ. ಅವುಗಳಲ್ಲಿ ಯಾವುದಾದರೂ ಬದಲಾಗಿದ್ದರೆ, effect ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. ಪಟ್ಟಿಯಲ್ಲಿ ಏನೂ ಬದಲಾಗದಿದ್ದರೆ, React effect ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬಿಡುತ್ತದೆ.

ನೀವು ಬ್ರೌಸರ್ ಟ್ಯಾಬ್ ಶೀರ್ಷಿಕೆಯನ್ನು state variable ನೊಂದಿಗೆ ಸಿಂಕ್ ಮಾಡುತ್ತಿದ್ದರೆ, ಆ ವೇರಿಯೇಬಲ್ ಅನ್ನು dependency array ನಲ್ಲಿ ಇರಿಸಬೇಕು. ಆಗ ಆ ಮೌಲ್ಯ ಬದಲಾದಾಗ ಮಾತ್ರ React ಶೀರ್ಷಿಕೆಯನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ. ಅದನ್ನು ಬಿಟ್ಟರೆ, ಶೀರ್ಷಿಕೆಯು ಹಳೆಯದಾಗಿಯೇ (stale) ಉಳಿಯುತ್ತದೆ. ಸಂಬಂಧವಿಲ್ಲದ state variables ಗಳನ್ನು ಹಾಕಿದರೆ, ಮುಖ್ಯವಲ್ಲದ ಬದಲಾವಣೆಗಳಿಗಾಗಿ ಶೀರ್ಷಿಕೆಯನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಅನಗತ್ಯವಾಗಿ cycles ವ್ಯರ್ಥ ಮಾಡುತ್ತೀರಿ.

Cleanup ಕಡ್ಡಾಯವಾಗಿದೆ

ಕೆಲವು effects ತಮ್ಮ ಕುರುಹುಗಳನ್ನು (footprints) ಬಿಟ್ಟು ಹೋಗುತ್ತವೆ. ಒಂದು timer ಎಣಿಕೆ ಮಾಡುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತದೆ. ಒಂದು event listener ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತಲೇ ಇರುತ್ತದೆ. ಒಂದು WebSocket ತೆರೆದೇ ಇರುತ್ತದೆ. ನಿಮ್ಮ component unmount ಆದಾಗ, ಅಥವಾ dependencies ಬದಲಾದ ಕಾರಣ effect ಮತ್ತೆ ರನ್ ಆದಾಗಲೂ ಸಹ, React ಹಿಂದಿನ effect ನ ಅವಶೇಷಗಳನ್ನು (residue) ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸ್ವಚ್ಛಗೊಳಿಸುವುದಿಲ್ಲ. ಅದು ನಿಮ್ಮ ಕೆಲಸ.

ನೀವು useEffect ಒಳಗೆ ಒಂದು function ಅನ್ನು return ಮಾಡುವ ಮೂಲಕ cleanup function ಅನ್ನು ರಚಿಸಬಹುದು. React ಮುಂದಿನ effect ಅನ್ನು ಅನ್ವಯಿಸುವ ಮೊದಲು ಮತ್ತು component ಪರದೆಯಿಂದ ಹೊರಟಾಗ ಮತ್ತೊಮ್ಮೆ ಈ cleanup ಅನ್ನು ಕರೆಯುತ್ತದೆ.

ನೀವು ಈ ಕೆಳಗಿನವುಗಳಿಗಾಗಿ cleanup ಅನ್ನು ಬಳಸಬೇಕು:

• clearInterval ಅಥವಾ clearTimeout ಬಳಸಿ intervals ಅಥವಾ timeouts ಗಳನ್ನು ಕ್ಲಿಯರ್ ಮಾಡುವುದು
• window, document, ಅಥವಾ ಬಾಹ್ಯ nodes ಗೆ ಸೇರಿಸಲಾದ event listeners ಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದು
• ಡೇಟಾ ಸ್ಟ್ರೀಮ್‌ಗಳು ಅಥವಾ ಸೇವೆಗಳಿಂದ (services) Unsubscribe ಮಾಡುವುದು

ಇದನ್ನು ನಿರ್ಲಕ್ಷಿಸಿದರೆ, memory leaks ಉಂಟಾಗುತ್ತವೆ. ಒಂದು component mount ಆಗುತ್ತದೆ, scroll listener ಅನ್ನು ಅಳವಡಿಸುತ್ತದೆ, ನಂತರ unmount ಆಗುತ್ತದೆ, ಆದರೆ listener ಹಾಗೆಯೇ ಉಳಿಯುತ್ತದೆ. ಬ್ರೌಸರ್ ಆ callback ಮತ್ತು ಅದು ಉಲ್ಲೇಖಿಸುವ (references) DOM nodes ಗಳನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುತ್ತದೆ. ಕಾಲಾನಂತರದಲ್ಲಿ, ವಿಶೇಷವಾಗಿ ಹೆಚ್ಚಿನ ನ್ಯಾವಿಗೇಶನ್ ಇರುವ single-page applications ನಲ್ಲಿ, ಈ 'ghosts' ಸಂಗ್ರಹವಾಗಿ ಟ್ಯಾಬ್ ಅನ್ನು ನಿಧಾನಗೊಳಿಸುತ್ತವೆ. ಇದಕ್ಕೆ ಪರಿಹಾರವು ಸಾಮಾನ್ಯವಾಗಿ ಕೇವಲ ಕೆಲವು ಸಾಲುಗಳಷ್ಟೇ: ನೀವು ಸೇರಿಸಿದ್ದನ್ನು ತೆಗೆದುಹಾಕುವ ಒಂದು function ಅನ್ನು return ಮಾಡಿ.

ಪ್ರೊಡಕ್ಷನ್‌ಗೆ ಹೋಗುವ ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು

ಸರಳವಾದ ಆಯ್ಕೆಗಳು ಲಭ್ಯವಿದ್ದರೂ ಸಹ ಅನುಭವಿ ಡೆವಲಪರ್‌ಗಳು ಕೂಡ useEffect ಅನ್ನು ಬಳಸಲು ಮುಂದಾಗುತ್ತಾರೆ. ಕೋಡ್ ರಿವ್ಯೂ ಮಾಡುವಾಗ ಎಚ್ಚರಿಕೆ ವಹಿಸಬೇಕಾದ ಮೂರು ಮಾದರಿಗಳು ಇಲ್ಲಿವೆ.

ಅನಂತ ಲೂಪ್‌ಗಳು (Infinite loops). ನಿಮ್ಮ dependency array ನಲ್ಲಿರುವ ಅದೇ state variable ಅನ್ನು, ಆ ಚಕ್ರವನ್ನು ನಿಲ್ಲಿಸುವ gate condition ಇಲ್ಲದಿದ್ದರೆ, useEffect ಒಳಗಡೆ ಎಂದಿಗೂ ಅಪ್‌ಡೇಟ್ ಮಾಡಬೇಡಿ. ನೀವು count ಅನ್ನು ಓದಿ, ಅದನ್ನು ಹೆಚ್ಚಿಸಿ (increment), ಮತ್ತು count ಅನ್ನು dependency ಎಂದು ಪಟ್ಟಿ ಮಾಡಿದರೆ, React ಆ ಬದಲಾವಣೆಯನ್ನು ಗುರುತಿಸುತ್ತದೆ, ಮತ್ತೆ re-render ಮಾಡುತ್ತದೆ, ಮತ್ತೆ effect ಅನ್ನು ರನ್ ಮಾಡುತ್ತದೆ, ಮತ್ತೆ ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ಬ್ರೌಸರ್ ಅನ್ನು ಲಾಕ್ ಮಾಡುತ್ತದೆ.

ಅಗತ್ಯವಿಲ್ಲದ effects. ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ props ಅಥವಾ state ನಿಂದ ಮೌಲ್ಯವನ್ನು ಲೆಕ್ಕಹಾಕಲು useEffect ಅನ್ನು ಬಳಸಬೇಡಿ. ನೀವು ಅದನ್ನು render ಮಾಡುವ ಸಮಯದಲ್ಲಿಯೇ ನೇರವಾಗಿ ಪಡೆಯಲು (derive) ಸಾಧ್ಯವಾದರೆ, ಹಾಗೆಯೇ ಮಾಡಿ. Derived values ಗಳು component body ನಲ್ಲಿ ಅಥವಾ useMemo ಬಳಸಿ ಮಾಡುವ memoized calculation ನಲ್ಲಿ ಇರಬೇಕು. ಅವುಗಳನ್ನು effect ಒಳಗಡೆ ತರುವುದರಿಂದ ಯಾವುದೇ ಪ್ರಯೋಜನವಿಲ್ಲದೆ ನಿಮ್ಮ logic ಅನ್ನು render ಮತ್ತು effect phases ನಡುವೆ ವಿಭಜಿಸುತ್ತದೆ ಮತ್ತು ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟವಾಗಿಸುತ್ತದೆ.

ಬಳಕೆದಾರರ ಕ್ರಿಯೆಗಳಿಗೆ (user actions) ತಪ್ಪು ಸಾಧನ. use