𝗥𝗲𝗮𝗰𝘁 𝗝𝘀 𝗨𝘀𝗲𝗦𝘁𝗮𝘁𝗲 ತಪ್ಪು ಮಾದರಿಗಳು (Antipatterns)
ಸ್ವಚ್ಛವಾದ React ಕೋಡ್ ಬರೆಯಲು ಸ್ಮಾರ್ಟ್ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಅಗತ್ಯವಿದೆ. ಕೆಟ್ಟ ಸ್ಟೇಟ್ ಮಾದರಿಗಳು ಬಗ್ಗಳು ಮತ್ತು ಸಂಕೀರ್ಣವಾದ ಕೋಡ್ಗೆ ಕಾರಣವಾಗುತ್ತವೆ.
ಈ ನಾಲ್ಕು ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳನ್ನು ತಪ್ಪಿಸಿ:
- ಸಂಬಂಧಿತ ಡೇಟಾವನ್ನು ಗುಂಪು ಮಾಡಿ
ಒಟ್ಟಿಗೆ ಬದಲಾಗುವ ಮೌಲ್ಯಗಳಿಗಾಗಿ ಪ್ರತ್ಯೇಕ ಸ್ಟೇಟ್ ಹುಕ್ಗಳನ್ನು (state hooks) ರಚಿಸಬೇಡಿ.
ಇದರ ಬದಲಿಗೆ:
- const [x, setX] = useState(0);
- const [y, setY] = useState(0);
ಒಂದು ಆಬ್ಜೆಕ್ಟ್ ಬಳಸಿ:
- const [position, setPosition] = useState({ x: 0, y: 0 });
ಇದು ನಿಮ್ಮ ಅಪ್ಡೇಟ್ಗಳನ್ನು ಸ್ವಚ್ಛವಾಗಿ ಮತ್ತು ವ್ಯವಸ್ಥಿತವಾಗಿಡುತ್ತದೆ.
- ಪರಸ್ಪರ ವಿರೋಧಾಭಾಸವಿರುವ ಸ್ಟೇಟ್ಗಳನ್ನು ತಪ್ಪಿಸಿ
ಒಂದೇ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಹಲವಾರು ಬೂಲಿಯನ್ಗಳನ್ನು (booleans) ಬಳಸಿದಾಗ, ನೀವು ಬಗ್ಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತೀರಿ.
ಇವುಗಳನ್ನು ಇಟ್ಟುಕೊಳ್ಳುವ ಬದಲು:
- isSubmitting
- isSubmit
ಒಂದೇ ಸ್ಟೇಟಸ್ ಸ್ಟ್ರಿಂಗ್ ಬಳಸಿ:
- status: 'TYPING'
- status: 'SUBMITTING'
- status: 'SUBMITTED'
ನಿಮ್ಮ UI ಲಾಜಿಕ್ ಅನ್ನು ಈ ಏಕೈಕ ಸತ್ಯದ ಮೂಲದಿಂದ (single source of truth) ಪಡೆಯಿರಿ.
- ಅನಗತ್ಯ ಸ್ಟೇಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ
ನೀವು ರೆಂಡರ್ ಮಾಡುವ ಸಮಯದಲ್ಲಿ ಒಂದು ಮೌಲ್ಯವನ್ನು ಲೆಕ್ಕಹಾಕಲು ಸಾಧ್ಯವಾದರೆ, ಅದನ್ನು ಸ್ಟೇಟ್ನಲ್ಲಿ ಇಡಬೇಡಿ.
ಇವುಗಳನ್ನು ಸಂಗ್ರಹಿಸಬೇಡಿ:
- firstName
- lastName
- fullName
ಕೇವಲ ಮೊದಲ ಮತ್ತು ಕೊನೆಯ ಹೆಸರುಗಳನ್ನು ಮಾತ್ರ ಸಂಗ್ರಹಿಸಿ. ಪೂರ್ಣ ಹೆಸರನ್ನು ತಕ್ಷಣವೇ ಲೆಕ್ಕಹಾಕಿ:
- const fullName = firstName + " " + lastName;
ಅಲ್ಲದೆ, ಎಂದಿಗೂ props ಅನ್ನು ಸ್ಟೇಟ್ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಬೇಡಿ. ಸ್ಟೇಟ್ ಕೇವಲ ಒಂದು ಬಾರಿ ಇನಿಶಿಯಲೈಸ್ ಆಗುತ್ತದೆ. ನಿಮ್ಮ prop ಬದಲಾದರೆ, ಸ್ಟೇಟ್ ಅಪ್ಡೇಟ್ ಆಗುವುದಿಲ್ಲ. ನೇರವಾಗಿ prop ಅನ್ನು ಬಳಸಿ.
- ಡೇಟಾವನ್ನು ಡೂಪ್ಲಿಕೇಟ್ ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ
ಒಂದೇ ಡೇಟಾವನ್ನು ಎರಡು ವಿಭಿನ್ನ ಸ್ಟೇಟ್ಗಳಲ್ಲಿ ಸಂಗ್ರಹಿಸಬೇಡಿ.
ನಿಮ್ಮ ಬಳಿ ಕಾರ್ಯಗಳ ಪಟ್ಟಿ (list of tasks) ಮತ್ತು ಆಯ್ಕೆಮಾಡಿದ ಕಾರ್ಯ (selected task) ಇದ್ದರೆ, ಎರಡೂ ಕಡೆ ಇಡೀ ಟಾಸ್ಕ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಸಂಗ್ರಹಿಸಬೇಡಿ. ಇದು ಅಪ್ಡೇಟ್ಗಳನ್ನು ಕಷ್ಟಕರವಾಗಿಸುತ್ತದೆ.
ಇದರ ಬದಲಿಗೆ:
- ಕಾರ್ಯಗಳ ಪಟ್ಟಿಯನ್ನು (list of tasks) ಸಂಗ್ರಹಿಸಿ.
- ಕೇವಲ selectedTaskId ಅನ್ನು ಮಾತ್ರ ಸಂಗ್ರಹಿಸಿ.
- ರೆಂಡರ್ ಮಾಡುವ ಸಮಯದಲ್ಲಿ ಆ ID ಬಳಸಿ ಪಟ್ಟಿಯಿಂದ ಕಾರ್ಯವನ್ನು ಹುಡುಕಿ.
ಇದು ನಿಮ್ಮ ಆಯ್ಕೆಮಾಡಿದ ಕಾರ್ಯವು ಯಾವಾಗಲೂ ನಿಮ್ಮ ಪಟ್ಟಿಯಲ್ಲಿರುವ ಇತ್ತೀಚಿನ ಡೇಟಾಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವಂತೆ ಮಾಡುತ್ತದೆ.
ಮೂಲ: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9