React ನಲ್ಲಿ useState ಬಳಕೆ ಮಾರ್ಗದರ್ಶಿ

ನೀವು ಟೈಪ್ ಮಾಡುವಾಗ ನಿಮ್ಮ ಪಾಸ್‌ವರ್ಡ್ ಬಾರ್ 'weak' ನಿಂದ 'strong' ಗೆ ಬದಲಾಗುತ್ತದೆ. React ನಿಮ್ಮ ಟೈಪಿಂಗ್ ಅನ್ನು state ಮೂಲಕ ನೆನಪಿಟ್ಟುಕೊಳ್ಳುತ್ತದೆ.

State ದತ್ತಾಂಶವನ್ನು (data) ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುತ್ತದೆ. ನೀವು ಏನು ಟೈಪ್ ಮಾಡುತ್ತೀರಿ ಅಥವಾ ಕ್ಲಿಕ್ ಮಾಡುತ್ತೀರಿ ಎಂಬುದನ್ನು ಇದು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ.

ನೀವು ನಿಮ್ಮ ಹೆಸರನ್ನು ಟೈಪ್ ಮಾಡುತ್ತಿದ್ದೀರಿ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ.

  • ನಿಮ್ಮ ಆರಂಭಿಕ state ಒಂದು ಖಾಲಿ ಸ್ಟ್ರಿಂಗ್ (empty string).
  • ನೀವು J ಎಂದು ಟೈಪ್ ಮಾಡುತ್ತೀರಿ.
  • "" ನಿಂದ "J" ಗೆ state ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ನೀವು ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯುತ್ತೀರಿ.
  • ನೀವು o ಎಂದು ಟೈಪ್ ಮಾಡುತ್ತೀರಿ.
  • state ಅನ್ನು "Jo" ಗೆ ಬದಲಾಯಿಸಲು ನೀವು ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯುತ್ತೀರಿ.

ಪ್ರತಿ ಬಾರಿ ನೀವು state ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿದಾಗ, React UI ಅನ್ನು ಮರು-ರೂಪಿಸುತ್ತದೆ (re-renders). Re-rendering ಎಂದರೆ React ಹಳೆಯ ವೀಕ್ಷಣೆಯನ್ನು (view) ಅಳಿಸಿ, ನಿಮ್ಮ ಅಪ್‌ಡೇಟ್ ಮಾಡಿದ ದತ್ತಾಂಶದೊಂದಿಗೆ ಹೊಸ ವೀಕ್ಷಣೆಯನ್ನು ಬಿಡಿಸುತ್ತದೆ ಎಂದರ್ಥ.

ಸಾಮಾನ್ಯ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು (regular variables) ಏಕೆ ಬಳಸಬಾರದು? ಸಾಮಾನ್ಯ ವೇರಿಯೇಬಲ್ ನಿಮ್ಮ ಕೋಡ್‌ನಲ್ಲಿ ಬದಲಾಗಬಹುದು ಆದರೆ ಅದು ಪರದೆಯನ್ನು (screen) ಅಪ್‌ಡೇಟ್ ಮಾಡುವುದಿಲ್ಲ. ನಿಮ್ಮ ಬಳಕೆದಾರರು ಹಳೆಯ ದತ್ತಾಂಶವನ್ನೇ ನೋಡುತ್ತಾರೆ. React state ನಿಮ್ಮ ದತ್ತಾಂಶವನ್ನು ನಿಮ್ಮ UI ಗೆ ಸಂಪರ್ಕಿಸುವ ಮೂಲಕ ಇದನ್ನು ಸರಿಪಡಿಸುತ್ತದೆ.

useState ಅನ್ನು ಬಳಸುವುದು ಹೇಗೆ:

  1. React ನಿಂದ ಇದನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಿ. import { useState } from 'react';

  2. ಇದನ್ನು ಘೋಷಿಸಿ (Declare). const [age, setAge] = useState(20);

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

  • age ಎಂಬುದು ನಿಮ್ಮ ಪ್ರಸ್ತುತ ಮೌಲ್ಯ (current value).
  • setAge ಎಂಬುದು ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸುವ ಫಂಕ್ಷನ್.
  • 20 ಎಂಬುದು ನಿಮ್ಮ ಆರಂಭಿಕ ಮೌಲ್ಯ.

ಇದನ್ನು ಈಗಲೇ ಪ್ರಯತ್ನಿಸಿ. ಒಂದು React ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ತೆರೆಯಿರಿ. ಒಂದು ಕೌಂಟರ್ (counter) ಅನ್ನು ರಚಿಸಿ. ಕೌಂಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ. ಪರದೆ ತಕ್ಷಣವೇ ಬದಲಾಗುವುದನ್ನು ಗಮನಿಸಿ.

ಮೂಲ (Source): https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i