ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುವುದು: ಪಟ್ಟಿ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ರಿಯಾಕ್ಟ್ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಕೀಗಳ ಆಳವಾದ ನೋಟ

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

ನೀವು ಬಹುಶಃ data.map(item => <div>{item.name}</div>) ನಂತಹ ಕೋಡ್ ಅನ್ನು ಅಸಂಖ್ಯಾತ ಬಾರಿ ಬರೆದಿರಬಹುದು. ಇದು ಸರಳ, ಬಹುತೇಕ ಕ್ಷುಲ್ಲಕವೆಂದು ತೋರುತ್ತದೆ. ಆದರೂ, ಈ ಸರಳತೆಯ ಕೆಳಗೆ ಒಂದು ನಿರ್ಣಾಯಕ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಗಣನೆ ಅಡಗಿದೆ, ಅದನ್ನು ನಿರ್ಲಕ್ಷಿಸಿದರೆ, ನಿಧಾನಗತಿಯ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಗೊಂದಲಮಯ ಬಗ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಪರಿಹಾರ? ಒಂದು ಸಣ್ಣ ಆದರೆ ಶಕ್ತಿಯುತ ಪ್ರಾಪ್: ಕೀ (key).

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

ಅಧ್ಯಾಯ 1: ರಿಯಾಕ್ಟ್‌ನ ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಮತ್ತು ವರ್ಚುವಲ್ DOM ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ನಾವು ಕೀಗಳ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ಶ್ಲಾಘಿಸುವ ಮೊದಲು, ರಿಯಾಕ್ಟ್ ಅನ್ನು ವೇಗವಾಗಿ ಮಾಡುವ ಮೂಲಭೂತ ಕಾರ್ಯವಿಧಾನವನ್ನು ನಾವು ಮೊದಲು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು: ರಿಕನ್ಸಿಲಿಯೇಶನ್, ಇದನ್ನು ವರ್ಚುವಲ್ DOM (VDOM) ಶಕ್ತಿಯುತಗೊಳಿಸುತ್ತದೆ.

ವರ್ಚುವಲ್ DOM ಎಂದರೇನು?

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

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

1. ಅಪ್‌ಡೇಟ್ ಮಾಡಿದ ಸ್ಟೇಟ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಹೊಸ VDOM ಟ್ರೀ ಅನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ.
2. ಈ ಹೊಸ VDOM ಟ್ರೀ ಅನ್ನು ಹಿಂದಿನ VDOM ಟ್ರೀಯೊಂದಿಗೆ ಹೋಲಿಸಲಾಗುತ್ತದೆ. ಈ ಹೋಲಿಕೆ ಪ್ರಕ್ರಿಯೆಯನ್ನು "ಡಿಫಿಂಗ್" ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ.
3. ಹಳೆಯ VDOM ಅನ್ನು ಹೊಸದಕ್ಕೆ ಪರಿವರ್ತಿಸಲು ಅಗತ್ಯವಾದ ಕನಿಷ್ಠ ಬದಲಾವಣೆಗಳ ಸೆಟ್ ಅನ್ನು ರಿಯಾಕ್ಟ್ ಪತ್ತೆ ಮಾಡುತ್ತದೆ.
4. ಈ ಕನಿಷ್ಠ ಬದಲಾವಣೆಗಳನ್ನು ನಂತರ ಒಟ್ಟಿಗೆ ಸೇರಿಸಿ, ಒಂದೇ, ದಕ್ಷ ಕಾರ್ಯಾಚರಣೆಯಲ್ಲಿ ನಿಜವಾದ DOM ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.

ರಿಕನ್ಸಿಲಿಯೇಶನ್ ಎಂದು ಕರೆಯಲ್ಪಡುವ ಈ ಪ್ರಕ್ರಿಯೆಯು ರಿಯಾಕ್ಟ್ ಅನ್ನು ತುಂಬಾ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನಾಗಿ ಮಾಡುತ್ತದೆ. ಇಡೀ ಮನೆಯನ್ನು ಪುನರ್ನಿರ್ಮಿಸುವ ಬದಲು, ರಿಯಾಕ್ಟ್ ಒಬ್ಬ ಪರಿಣಿತ ಗುತ್ತಿಗೆದಾರನಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಅವರು ಯಾವ ನಿರ್ದಿಷ್ಟ ಇಟ್ಟಿಗೆಗಳನ್ನು ಬದಲಾಯಿಸಬೇಕೆಂದು ನಿಖರವಾಗಿ ಗುರುತಿಸುತ್ತಾರೆ, ಕೆಲಸ ಮತ್ತು ಅಡಚಣೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತಾರೆ.

ಅಧ್ಯಾಯ 2: ಕೀಗಳಿಲ್ಲದೆ ಪಟ್ಟಿಗಳನ್ನು ರೆಂಡರಿಂಗ್ ಮಾಡುವುದರಲ್ಲಿನ ಸಮಸ್ಯೆ

ಈಗ, ಈ ಸೊಗಸಾದ ವ್ಯವಸ್ಥೆಯು ಎಲ್ಲಿ ತೊಂದರೆಗೆ ಸಿಲುಕಬಹುದು ಎಂದು ನೋಡೋಣ. ಬಳಕೆದಾರರ ಪಟ್ಟಿಯನ್ನು ರೆಂಡರ್ ಮಾಡುವ ಸರಳ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li>{user.name}</li>
      ))}
    </ul>
  );
}

ಈ ಕಾಂಪೊನೆಂಟ್ ಮೊದಲು ರೆಂಡರ್ ಆದಾಗ, ರಿಯಾಕ್ಟ್ VDOM ಟ್ರೀಯನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ. ನಾವು `users` ಅರೇಯ *ಕೊನೆಗೆ* ಹೊಸ ಬಳಕೆದಾರರನ್ನು ಸೇರಿಸಿದರೆ, ರಿಯಾಕ್ಟ್‌ನ ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ ಅದನ್ನು ಸುಲಭವಾಗಿ ನಿಭಾಯಿಸುತ್ತದೆ. ಇದು ಹಳೆಯ ಮತ್ತು ಹೊಸ ಪಟ್ಟಿಗಳನ್ನು ಹೋಲಿಸುತ್ತದೆ, ಕೊನೆಯಲ್ಲಿ ಹೊಸ ಐಟಂ ಅನ್ನು ನೋಡುತ್ತದೆ, ಮತ್ತು ಸರಳವಾಗಿ ನಿಜವಾದ DOM ಗೆ ಹೊಸ `<li>` ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ದಕ್ಷ ಮತ್ತು ಸರಳ.

ಆದರೆ ನಾವು ಪಟ್ಟಿಯ ಆರಂಭಕ್ಕೆ ಹೊಸ ಬಳಕೆದಾರರನ್ನು ಸೇರಿಸಿದರೆ ಅಥವಾ ಐಟಂಗಳನ್ನು ಮರುಕ್ರಮಗೊಳಿಸಿದರೆ ಏನಾಗುತ್ತದೆ?

ನಮ್ಮ ಆರಂಭಿಕ ಪಟ್ಟಿ ಹೀಗಿದೆ ಎಂದು ಭಾವಿಸೋಣ:

• ಆಲಿಸ್
• ಬಾಬ್

ಮತ್ತು ಅಪ್‌ಡೇಟ್ ನಂತರ, ಅದು ಹೀಗಾಗುತ್ತದೆ:

• ಚಾರ್ಲಿ
• ಆಲಿಸ್
• ಬಾಬ್

ಯಾವುದೇ ಅನನ್ಯ ಗುರುತಿಸುವಿಕೆಗಳಿಲ್ಲದೆ, ರಿಯಾಕ್ಟ್ ಎರಡು ಪಟ್ಟಿಗಳನ್ನು ಅವುಗಳ ಕ್ರಮದ (ಇಂಡೆಕ್ಸ್) ಆಧಾರದ ಮೇಲೆ ಹೋಲಿಸುತ್ತದೆ. ಅದು ನೋಡುವುದು ಇಲ್ಲಿದೆ:

• ಸ್ಥಾನ 0: ಹಳೆಯ ಐಟಂ "ಆಲಿಸ್" ಆಗಿತ್ತು. ಹೊಸ ಐಟಂ "ಚಾರ್ಲಿ". ಈ ಸ್ಥಾನದಲ್ಲಿರುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಬೇಕೆಂದು ರಿಯಾಕ್ಟ್ ತೀರ್ಮಾನಿಸುತ್ತದೆ. ಇದು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ DOM ನೋಡ್ ಅನ್ನು "ಆಲಿಸ್" ನಿಂದ "ಚಾರ್ಲಿ" ಗೆ ಬದಲಾಯಿಸಲು ರೂಪಾಂತರಿಸುತ್ತದೆ.
• ಸ್ಥಾನ 1: ಹಳೆಯ ಐಟಂ "ಬಾಬ್" ಆಗಿತ್ತು. ಹೊಸ ಐಟಂ "ಆಲಿಸ್". ರಿಯಾಕ್ಟ್ ಎರಡನೇ DOM ನೋಡ್ ಅನ್ನು "ಬಾಬ್" ನಿಂದ "ಆಲಿಸ್" ಗೆ ಬದಲಾಯಿಸಲು ರೂಪಾಂತರಿಸುತ್ತದೆ.
• ಸ್ಥಾನ 2: ಇಲ್ಲಿ ಮೊದಲು ಯಾವುದೇ ಐಟಂ ಇರಲಿಲ್ಲ. ಹೊಸ ಐಟಂ "ಬಾಬ್". ರಿಯಾಕ್ಟ್ "ಬಾಬ್" ಗಾಗಿ ಹೊಸ DOM ನೋಡ್ ಅನ್ನು ರಚಿಸಿ ಸೇರಿಸುತ್ತದೆ.

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

ಅದಕ್ಕಾಗಿಯೇ, ನೀವು ಮೇಲಿನ ಕೋಡ್ ಅನ್ನು ರನ್ ಮಾಡಿದರೆ, ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಕನ್ಸೋಲ್ ಎಚ್ಚರಿಕೆಯನ್ನು ತೋರಿಸುತ್ತದೆ: "Warning: Each child in a list should have a unique 'key' prop." ರಿಯಾಕ್ಟ್ ತನ್ನ ಕೆಲಸವನ್ನು ದಕ್ಷತೆಯಿಂದ ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಬೇಕು ಎಂದು ನಿಮಗೆ ಸ್ಪಷ್ಟವಾಗಿ ಹೇಳುತ್ತಿದೆ.

ಅಧ್ಯಾಯ 3: ಪಾರುಗಾಣಿಕೆಗೆ `ಕೀ` ಪ್ರಾಪ್

ಕೀ ಪ್ರಾಪ್ ರಿಯಾಕ್ಟ್‌ಗೆ ಬೇಕಾದ ಸುಳಿವು. ಇದು ಎಲಿಮೆಂಟ್‌ಗಳ ಪಟ್ಟಿಗಳನ್ನು ರಚಿಸುವಾಗ ನೀವು ಒದಗಿಸುವ ವಿಶೇಷ ಸ್ಟ್ರಿಂಗ್ ಗುಣಲಕ್ಷಣವಾಗಿದೆ. ಕೀಗಳು ಪ್ರತಿ ಎಲಿಮೆಂಟ್‌ಗೆ ಮರು-ರೆಂಡರ್‌ಗಳಾದ್ಯಂತ ಸ್ಥಿರ ಮತ್ತು ಅನನ್ಯ ಗುರುತನ್ನು ನೀಡುತ್ತವೆ.

ನಮ್ಮ `UserList` ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕೀಗಳೊಂದಿಗೆ ಪುನಃ ಬರೆಯೋಣ:

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

ಇಲ್ಲಿ, ಪ್ರತಿ `user` ಆಬ್ಜೆಕ್ಟ್ ಒಂದು ಅನನ್ಯ `id` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಹೊಂದಿದೆ ಎಂದು ನಾವು ಭಾವಿಸುತ್ತೇವೆ (ಉದಾಹರಣೆಗೆ, ಡೇಟಾಬೇಸ್‌ನಿಂದ). ಈಗ, ನಮ್ಮ ಸನ್ನಿವೇಶವನ್ನು ಪುನಃ ನೋಡೋಣ.

ಆರಂಭಿಕ ಡೇಟಾ:

[{ id: 'u1', name: 'Alice' }, { id: 'u2', name: 'Bob' }]

ಅಪ್‌ಡೇಟ್ ಮಾಡಿದ ಡೇಟಾ:

[{ id: 'u3', name: 'Charlie' }, { id: 'u1', name: 'Alice' }, { id: 'u2', name: 'Bob' }]

ಕೀಗಳೊಂದಿಗೆ, ರಿಯಾಕ್ಟ್‌ನ ಡಿಫಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯು ಹೆಚ್ಚು ಚುರುಕಾಗಿದೆ:

1. ರಿಯಾಕ್ಟ್ ಹೊಸ VDOM ನಲ್ಲಿನ `<ul>` ನ ಚೈಲ್ಡ್‌ಗಳನ್ನು ನೋಡುತ್ತದೆ ಮತ್ತು ಅವುಗಳ ಕೀಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಅದು `u3`, `u1`, ಮತ್ತು `u2` ಅನ್ನು ನೋಡುತ್ತದೆ.
2. ನಂತರ ಅದು ಹಿಂದಿನ VDOM ನ ಚೈಲ್ಡ್‌ಗಳನ್ನು ಮತ್ತು ಅವುಗಳ ಕೀಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಅದು `u1` ಮತ್ತು `u2` ಅನ್ನು ನೋಡುತ್ತದೆ.
3. `u1` ಮತ್ತು `u2` ಕೀಗಳನ್ನು ಹೊಂದಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಈಗಾಗಲೇ ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ ಎಂದು ರಿಯಾಕ್ಟ್‌ಗೆ ತಿಳಿದಿದೆ. ಅವುಗಳನ್ನು ರೂಪಾಂತರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ; ಅವುಗಳ ಅನುಗುಣವಾದ DOM ನೋಡ್‌ಗಳನ್ನು ಅವುಗಳ ಹೊಸ ಸ್ಥಾನಗಳಿಗೆ ಸರಿಸಿದರೆ ಸಾಕು.
4. `u3` ಕೀ ಹೊಸದು ಎಂದು ರಿಯಾಕ್ಟ್ ನೋಡುತ್ತದೆ. ಇದು "ಚಾರ್ಲಿ" ಗಾಗಿ ಹೊಸ ಕಾಂಪೊನೆಂಟ್ ಮತ್ತು DOM ನೋಡ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಆರಂಭದಲ್ಲಿ ಸೇರಿಸುತ್ತದೆ.

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

ಅಧ್ಯಾಯ 4: ಸರಿಯಾದ ಕೀ ಆಯ್ಕೆ - ಸುವರ್ಣ ನಿಯಮಗಳು

`ಕೀ` ಪ್ರಾಪ್‌ನ ಪರಿಣಾಮಕಾರಿತ್ವವು ಸಂಪೂರ್ಣವಾಗಿ ಸರಿಯಾದ ಮೌಲ್ಯವನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದರ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ. ತಿಳಿದಿರಬೇಕಾದ ಸ್ಪಷ್ಟ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಅಪಾಯಕಾರಿ ಆಂಟಿ-ಪ್ಯಾಟರ್ನ್‌ಗಳಿವೆ.

ಅತ್ಯುತ್ತಮ ಕೀ: ಅನನ್ಯ ಮತ್ತು ಸ್ಥಿರ IDಗಳು

ಆದರ್ಶ ಕೀ ಎಂದರೆ ಒಂದು ಪಟ್ಟಿಯೊಳಗಿನ ಐಟಂ ಅನ್ನು ಅನನ್ಯವಾಗಿ ಮತ್ತು ಶಾಶ್ವತವಾಗಿ ಗುರುತಿಸುವ ಮೌಲ್ಯ. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ನಿಮ್ಮ ಡೇಟಾ ಮೂಲದಿಂದ ಬರುವ ಒಂದು ಅನನ್ಯ ID ಆಗಿರುತ್ತದೆ.

• ಇದು ತನ್ನ ಸಹೋದರರ ನಡುವೆ ಅನನ್ಯವಾಗಿರಬೇಕು. ಕೀಗಳು ಜಾಗತಿಕವಾಗಿ ಅನನ್ಯವಾಗಿರಬೇಕಾಗಿಲ್ಲ, ಕೇವಲ ಆ ಮಟ್ಟದಲ್ಲಿ ರೆಂಡರ್ ಆಗುತ್ತಿರುವ ಎಲಿಮೆಂಟ್‌ಗಳ ಪಟ್ಟಿಯೊಳಗೆ ಅನನ್ಯವಾಗಿದ್ದರೆ ಸಾಕು. ಒಂದೇ ಪುಟದಲ್ಲಿರುವ ಎರಡು ವಿಭಿನ್ನ ಪಟ್ಟಿಗಳು ಒಂದೇ ಕೀಯನ್ನು ಹೊಂದಿರುವ ಐಟಂಗಳನ್ನು ಹೊಂದಿರಬಹುದು.
• ಇದು ಸ್ಥಿರವಾಗಿರಬೇಕು. ನಿರ್ದಿಷ್ಟ ಡೇಟಾ ಐಟಂನ ಕೀ ರೆಂಡರ್‌ಗಳ ನಡುವೆ ಬದಲಾಗಬಾರದು. ನೀವು ಆಲಿಸ್‌ಗಾಗಿ ಡೇಟಾವನ್ನು ಮರು-ಪಡೆದರೆ, ಅವಳು ಇನ್ನೂ ಅದೇ `id` ಅನ್ನು ಹೊಂದಿರಬೇಕು.

ಕೀಗಳಿಗಾಗಿ ಅತ್ಯುತ್ತಮ ಮೂಲಗಳು:

• ಡೇಟಾಬೇಸ್ ಪ್ರೈಮರಿ ಕೀಗಳು (ಉದಾ., `user.id`, `product.sku`)
• ಯೂನಿವರ್ಸಲಿ ಯೂನಿಕ್ ಐಡೆಂಟಿಫೈಯರ್‌ಗಳು (UUIDಗಳು)
• ನಿಮ್ಮ ಡೇಟಾದಿಂದ ಒಂದು ಅನನ್ಯ, ಬದಲಾಗದ ಸ್ಟ್ರಿಂಗ್ (ಉದಾ., ಪುಸ್ತಕದ ISBN)

// ಉತ್ತಮ: ಡೇಟಾದಿಂದ ಸ್ಥಿರ, ಅನನ್ಯ ID ಅನ್ನು ಬಳಸುವುದು.
<div>
  {products.map(product => (
    <ProductItem key={product.sku} product={product} />
  ))}
</div>

ಆಂಟಿ-ಪ್ಯಾಟರ್ನ್: ಅರೇ ಇಂಡೆಕ್ಸ್ ಅನ್ನು ಕೀ ಆಗಿ ಬಳಸುವುದು

ಒಂದು ಸಾಮಾನ್ಯ ತಪ್ಪು ಎಂದರೆ ಅರೇ ಇಂಡೆಕ್ಸ್ ಅನ್ನು ಕೀ ಆಗಿ ಬಳಸುವುದು:

// ಕೆಟ್ಟದು: ಅರೇ ಇಂಡೆಕ್ಸ್ ಅನ್ನು ಕೀ ಆಗಿ ಬಳಸುವುದು.
<div>
  {items.map((item, index) => (
    <ListItem key={index} item={item} />
  ))}
</div>

ಇದು ರಿಯಾಕ್ಟ್ ಎಚ್ಚರಿಕೆಯನ್ನು ಮೌನಗೊಳಿಸುತ್ತದೆ, ಆದರೆ ಇದು ಗಂಭೀರ ಸಮಸ್ಯೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು ಮತ್ತು ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಆಂಟಿ-ಪ್ಯಾಟರ್ನ್ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ಇಂಡೆಕ್ಸ್ ಅನ್ನು ಕೀ ಆಗಿ ಬಳಸುವುದು ಒಂದು ಐಟಂನ ಗುರುತು ಅದರ ಪಟ್ಟಿಯಲ್ಲಿನ ಸ್ಥಾನಕ್ಕೆ ಸಂಬಂಧಿಸಿದೆ ಎಂದು ರಿಯಾಕ್ಟ್‌ಗೆ ಹೇಳುತ್ತದೆ. ಪಟ್ಟಿಯನ್ನು ಮರುಕ್ರಮಗೊಳಿಸಬಹುದಾದಾಗ, ಫಿಲ್ಟರ್ ಮಾಡಬಹುದಾದಾಗ, ಅಥವಾ ಆರಂಭ ಅಥವಾ ಮಧ್ಯದಿಂದ ಐಟಂಗಳನ್ನು ಸೇರಿಸಿದಾಗ/ತೆಗೆದುಹಾಕಿದಾಗ ಇದು ಮೂಲತಃ ಕೀ ಇಲ್ಲದಿರುವ ಸಮಸ್ಯೆಯನ್ನೇ ಹೋಲುತ್ತದೆ.

ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಬಗ್:

ಇಂಡೆಕ್ಸ್ ಕೀಗಳನ್ನು ಬಳಸುವುದರ ಅತ್ಯಂತ ಅಪಾಯಕಾರಿ ಅಡ್ಡಪರಿಣಾಮವು ನಿಮ್ಮ ಪಟ್ಟಿ ಐಟಂಗಳು ತಮ್ಮದೇ ಆದ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಿದಾಗ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳ ಪಟ್ಟಿಯನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ:

function UnstableList() {
  const [items, setItems] = React.useState([{ id: 1, text: 'First' }, { id: 2, text: 'Second' }]);

  const handleAddItemToTop = () => {
    setItems([{ id: 3, text: 'New Top' }, ...items]);
  };

  return (
    <div>
      <button onClick={handleAddItemToTop}>Add to Top</button>
      {items.map((item, index) => (
        <div key={index}>
          <label>{item.text}: </label>
          <input type="text" />
        </div>
      ))}
    </div>
  );
}

ಈ ಮಾನಸಿಕ ವ್ಯಾಯಾಮವನ್ನು ಪ್ರಯತ್ನಿಸಿ:

1. ಪಟ್ಟಿ "First" ಮತ್ತು "Second" ನೊಂದಿಗೆ ರೆಂಡರ್ ಆಗುತ್ತದೆ.
2. ನೀವು ಮೊದಲ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ನಲ್ಲಿ ("First" ಗಾಗಿ ಇರುವ) "Hello" ಎಂದು ಟೈಪ್ ಮಾಡುತ್ತೀರಿ.
3. ನೀವು "Add to Top" ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುತ್ತೀರಿ.

ಏನಾಗುತ್ತದೆ ಎಂದು ನೀವು ನಿರೀಕ್ಷಿಸುತ್ತೀರಿ? "New Top" ಗಾಗಿ ಹೊಸ, ಖಾಲಿ ಇನ್‌ಪುಟ್ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ, ಮತ್ತು "First" ಗಾಗಿ ಇರುವ ಇನ್‌ಪುಟ್ ("Hello" ಅನ್ನು ಇನ್ನೂ ಹೊಂದಿರುವ) ಕೆಳಗೆ ಚಲಿಸುತ್ತದೆ ಎಂದು ನೀವು ನಿರೀಕ್ಷಿಸುತ್ತೀರಿ. ವಾಸ್ತವವಾಗಿ ಏನಾಗುತ್ತದೆ? ಮೊದಲ ಸ್ಥಾನದಲ್ಲಿರುವ (ಇಂಡೆಕ್ಸ್ 0) ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್, ಅದು ಇನ್ನೂ "Hello" ಅನ್ನು ಒಳಗೊಂಡಿದೆ, ಹಾಗೆಯೇ ಉಳಿಯುತ್ತದೆ. ಆದರೆ ಈಗ ಅದು ಹೊಸ ಡೇಟಾ ಐಟಂ "New Top" ನೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದೆ. ಇನ್‌ಪುಟ್ ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ (ಅದರ ಆಂತರಿಕ ಮೌಲ್ಯ) ಅದರ ಸ್ಥಾನಕ್ಕೆ (key=0) ಸಂಬಂಧಿಸಿದೆ, ಅದು ಪ್ರತಿನಿಧಿಸಬೇಕಾದ ಡೇಟಾಗೆ ಅಲ್ಲ. ಇದು ಇಂಡೆಕ್ಸ್ ಕೀಗಳಿಂದ ಉಂಟಾಗುವ ಒಂದು ಶ್ರೇಷ್ಠ ಮತ್ತು ಗೊಂದಲಮಯ ಬಗ್ ಆಗಿದೆ.

ನೀವು ಕೇವಲ `key={index}` ಅನ್ನು `key={item.id}` ಗೆ ಬದಲಾಯಿಸಿದರೆ, ಸಮಸ್ಯೆ ಬಗೆಹರಿಯುತ್ತದೆ. ರಿಯಾಕ್ಟ್ ಈಗ ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ ಅನ್ನು ಡೇಟಾದ ಸ್ಥಿರ ID ಯೊಂದಿಗೆ ಸರಿಯಾಗಿ ಸಂಯೋಜಿಸುತ್ತದೆ.

ಇಂಡೆಕ್ಸ್ ಕೀ ಅನ್ನು ಯಾವಾಗ ಬಳಸುವುದು ಸ್ವೀಕಾರಾರ್ಹ?

ಇಂಡೆಕ್ಸ್ ಅನ್ನು ಬಳಸುವುದು ಸುರಕ್ಷಿತವಾಗಿರುವ ಅಪರೂಪದ ಸಂದರ್ಭಗಳಿವೆ, ಆದರೆ ನೀವು ಈ ಎಲ್ಲಾ ಷರತ್ತುಗಳನ್ನು ಪೂರೈಸಬೇಕು:

1. ಪಟ್ಟಿ ಸ್ಥಿರವಾಗಿದೆ: ಅದನ್ನು ಎಂದಿಗೂ ಮರು-ಕ್ರಮಗೊಳಿಸಲಾಗುವುದಿಲ್ಲ, ಫಿಲ್ಟರ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ, ಅಥವಾ ಕೊನೆಯಿಂದ ಹೊರತುಪಡಿಸಿ ಬೇರೆಲ್ಲಿಂದಲಾದರೂ ಐಟಂಗಳನ್ನು ಸೇರಿಸಲಾಗುವುದಿಲ್ಲ/ತೆಗೆದುಹಾಕಲಾಗುವುದಿಲ್ಲ.
2. ಪಟ್ಟಿಯಲ್ಲಿನ ಐಟಂಗಳಿಗೆ ಸ್ಥಿರ IDಗಳಿಲ್ಲ.
3. ಪ್ರತಿ ಐಟಂಗಾಗಿ ರೆಂಡರ್ ಮಾಡಲಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸರಳವಾಗಿವೆ ಮತ್ತು ಯಾವುದೇ ಆಂತರಿಕ ಸ್ಟೇಟ್ ಹೊಂದಿಲ್ಲ.

ಆಗಲೂ, ಸಾಧ್ಯವಾದರೆ ತಾತ್ಕಾಲಿಕ ಆದರೆ ಸ್ಥಿರವಾದ ID ಅನ್ನು ರಚಿಸುವುದು ಉತ್ತಮ. ಇಂಡೆಕ್ಸ್ ಅನ್ನು ಬಳಸುವುದು ಯಾವಾಗಲೂ ಉದ್ದೇಶಪೂರ್ವಕ ಆಯ್ಕೆಯಾಗಿರಬೇಕು, ಡೀಫಾಲ್ಟ್ ಅಲ್ಲ.

ಅತ್ಯಂತ ಕೆಟ್ಟ ಅಪರಾಧಿ: `Math.random()`

ಯಾವಾಗಲೂ, `Math.random()` ಅಥವಾ ಯಾವುದೇ ಇತರ ನಿರ್ಣಾಯಕವಲ್ಲದ ಮೌಲ್ಯವನ್ನು ಕೀ ಆಗಿ ಬಳಸಬೇಡಿ:

// ಅತಿ ಕೆಟ್ಟದ್ದು: ಇದನ್ನು ಮಾಡಬೇಡಿ!
<div>
  {items.map(item => (
    <ListItem key={Math.random()} item={item} />
  ))}
</div>

`Math.random()` ನಿಂದ ರಚಿಸಲಾದ ಕೀ ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ ವಿಭಿನ್ನವಾಗಿರುವುದು ಖಚಿತ. ಇದು ಹಿಂದಿನ ರೆಂಡರ್‌ನ ಸಂಪೂರ್ಣ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಪಟ್ಟಿಯನ್ನು ನಾಶಪಡಿಸಲಾಗಿದೆ ಮತ್ತು ಸಂಪೂರ್ಣವಾಗಿ ವಿಭಿನ್ನವಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಹೊಸ ಪಟ್ಟಿಯನ್ನು ರಚಿಸಲಾಗಿದೆ ಎಂದು ರಿಯಾಕ್ಟ್‌ಗೆ ಹೇಳುತ್ತದೆ. ಇದು ಎಲ್ಲಾ ಹಳೆಯ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಅನ್‌ಮೌಂಟ್ ಮಾಡಲು (ಅವುಗಳ ಸ್ಟೇಟ್ ಅನ್ನು ನಾಶಪಡಿಸಲು) ಮತ್ತು ಎಲ್ಲಾ ಹೊಸವುಗಳನ್ನು ಮೌಂಟ್ ಮಾಡಲು ರಿಯಾಕ್ಟ್ ಅನ್ನು ಒತ್ತಾಯಿಸುತ್ತದೆ. ಇದು ರಿಕನ್ಸಿಲಿಯೇಶನ್‌ನ ಉದ್ದೇಶವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ವಿಫಲಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಸಾಧ್ಯವಿರುವ ಕೆಟ್ಟ ಆಯ್ಕೆಯಾಗಿದೆ.

ಅಧ್ಯಾಯ 5: ಸುಧಾರಿತ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಸಾಮಾನ್ಯ ಪ್ರಶ್ನೆಗಳು

ಕೀಗಳು ಮತ್ತು `React.Fragment`

ಕೆಲವೊಮ್ಮೆ ನೀವು `map` ಕಾಲ್‌ಬ್ಯಾಕ್‌ನಿಂದ ಅನೇಕ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕಾಗುತ್ತದೆ. ಇದನ್ನು ಮಾಡಲು ಪ್ರಮಾಣಿತ ಮಾರ್ಗವೆಂದರೆ `React.Fragment` ಬಳಸುವುದು. ನೀವು ಇದನ್ನು ಮಾಡಿದಾಗ, `ಕೀ` ಅನ್ನು `Fragment` ಕಾಂಪೊನೆಂಟ್‌ನ ಮೇಲೆ ಇಡಬೇಕು.

function Glossary({ terms }) {
  return (
    <dl>
      {terms.map(term => (
        // ಕೀ ಫ್ರಾಗ್ಮೆಂಟ್ ಮೇಲೆ ಹೋಗುತ್ತದೆ, ಚೈಲ್ಡ್‌ಗಳ ಮೇಲಲ್ಲ.
        <React.Fragment key={term.id}>
          <dt>{term.name}</dt>
          <dd>{term.definition}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

ಪ್ರಮುಖ: ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಸಿಂಟ್ಯಾಕ್ಸ್ `<>...</>` ಕೀಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ನಿಮ್ಮ ಪಟ್ಟಿಗೆ ಫ್ರಾಗ್ಮೆಂಟ್‌ಗಳು ಬೇಕಾದರೆ, ನೀವು ಸ್ಪಷ್ಟವಾದ `<React.Fragment>` ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಬಳಸಬೇಕು.

ಕೀಗಳು ಕೇವಲ ಸಹೋದರರ ನಡುವೆ ಅನನ್ಯವಾಗಿರಬೇಕು

ಕೀಗಳು ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ನಾದ್ಯಂತ ಜಾಗತಿಕವಾಗಿ ಅನನ್ಯವಾಗಿರಬೇಕು ಎಂಬುದು ಒಂದು ಸಾಮಾನ್ಯ ತಪ್ಪು ತಿಳುವಳಿಕೆ. ಇದು ನಿಜವಲ್ಲ. ಒಂದು ಕೀ ಕೇವಲ ತನ್ನ ತಕ್ಷಣದ ಸಹೋದರರ ಪಟ್ಟಿಯೊಳಗೆ ಅನನ್ಯವಾಗಿದ್ದರೆ ಸಾಕು.

function CourseRoster({ courses }) {
  return (
    <div>
      {courses.map(course => (
        <div key={course.id}>  {/* ಕೋರ್ಸ್‌ಗಾಗಿ ಕೀ */} 
          <h3>{course.title}</h3>
          <ul>
            {course.students.map(student => (
              // ಈ ವಿದ್ಯಾರ್ಥಿ ಕೀ ಕೇವಲ ಈ ನಿರ್ದಿಷ್ಟ ಕೋರ್ಸ್‌ನ ವಿದ್ಯಾರ್ಥಿ ಪಟ್ಟಿಯೊಳಗೆ ಅನನ್ಯವಾಗಿರಬೇಕು.
              <li key={student.id}>{student.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ಎರಡು ವಿಭಿನ್ನ ಕೋರ್ಸ್‌ಗಳು `id: 's1'` ಹೊಂದಿರುವ ವಿದ್ಯಾರ್ಥಿಯನ್ನು ಹೊಂದಿರಬಹುದು. ಇದು ಸಂಪೂರ್ಣವಾಗಿ ಸರಿ ಏಕೆಂದರೆ ಕೀಗಳನ್ನು ವಿಭಿನ್ನ ಪೇರೆಂಟ್ `<ul>` ಎಲಿಮೆಂಟ್‌ಗಳೊಳಗೆ ಮೌಲ್ಯಮಾಪನ ಮಾಡಲಾಗುತ್ತಿದೆ.

ಕಾಂಪೊನೆಂಟ್ ಸ್ಟೇಟ್ ಅನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಮರುಹೊಂದಿಸಲು ಕೀಗಳನ್ನು ಬಳಸುವುದು

ಕೀಗಳು ಪ್ರಾಥಮಿಕವಾಗಿ ಪಟ್ಟಿ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಇದ್ದರೂ, ಅವು ಆಳವಾದ ಉದ್ದೇಶವನ್ನು ಪೂರೈಸುತ್ತವೆ: ಅವು ಕಾಂಪೊನೆಂಟ್‌ನ ಗುರುತನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ. ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನ ಕೀ ಬದಲಾದರೆ, ರಿಯಾಕ್ಟ್ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ಅದು ಹಳೆಯ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು (ಮತ್ತು ಅದರ ಎಲ್ಲಾ ಚೈಲ್ಡ್‌ಗಳನ್ನು) ನಾಶಪಡಿಸುತ್ತದೆ ಮತ್ತು ಮೊದಲಿನಿಂದ ಹೊಚ್ಚ ಹೊಸದನ್ನು ರಚಿಸುತ್ತದೆ. ಇದು ಹಳೆಯ ಇನ್‌ಸ್ಟನ್ಸ್ ಅನ್ನು ಅನ್‌ಮೌಂಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಹೊಸದನ್ನು ಮೌಂಟ್ ಮಾಡುತ್ತದೆ, ಅದರ ಸ್ಟೇಟ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮರುಹೊಂದಿಸುತ್ತದೆ.

ಇದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರುಹೊಂದಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಮತ್ತು ಡಿಕ್ಲರೇಟಿವ್ ಮಾರ್ಗವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, `userId` ಆಧಾರದ ಮೇಲೆ ಡೇಟಾವನ್ನು ಪಡೆಯುವ `UserProfile` ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ.

function App() {
  const [userId, setUserId] = React.useState('user-1');

  return (
    <div>
      <button onClick={() => setUserId('user-1')}>View User 1</button>
      <button onClick={() => setUserId('user-2')}>View User 2</button>
      
      <UserProfile key={userId} id={userId} />
    </div>
  );
}

`UserProfile` ಕಾಂಪೊನೆಂಟ್ ಮೇಲೆ `key={userId}` ಅನ್ನು ಇರಿಸುವ ಮೂಲಕ, `userId` ಬದಲಾದಾಗಲೆಲ್ಲಾ, ಸಂಪೂರ್ಣ `UserProfile` ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬಿಸಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ಹೊಸದನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ ಎಂದು ನಾವು ಖಾತರಿಪಡಿಸುತ್ತೇವೆ. ಇದು ಹಿಂದಿನ ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್‌ನಿಂದ ಬಂದ ಸ್ಟೇಟ್ (ಫಾರ್ಮ್ ಡೇಟಾ ಅಥವಾ ಪಡೆದ ವಿಷಯದಂತಹ) ಉಳಿದುಕೊಳ್ಳಬಹುದಾದ ಸಂಭಾವ್ಯ ಬಗ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ. ಇದು ಕಾಂಪೊನೆಂಟ್‌ನ ಗುರುತು ಮತ್ತು ಲೈಫ್‌ಸೈಕಲ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಒಂದು ಸ್ವಚ್ಛ ಮತ್ತು ಸ್ಪಷ್ಟ ಮಾರ್ಗವಾಗಿದೆ.

ತೀರ್ಮಾನ: ಉತ್ತಮ ರಿಯಾಕ್ಟ್ ಕೋಡ್ ಬರೆಯುವುದು

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

ಪ್ರಮುಖ ಅಂಶಗಳನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ನೋಡೋಣ:

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

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