ರಿಯಾಕ್ಟ್ useFormState: ಆಧುನಿಕ ಫಾರ್ಮ್ ನಿರ್ವಹಣೆ ಮತ್ತು ಮೌಲ್ಯೀಕರಣದ ಒಂದು ಆಳವಾದ ನೋಟ

ವೆಬ್ ಸಂವಾದಾತ್ಮಕತೆಯ ಮೂಲಾಧಾರವೇ ಫಾರ್ಮ್‌ಗಳು. ಸರಳ ಸಂಪರ್ಕ ಫಾರ್ಮ್‌ಗಳಿಂದ ಹಿಡಿದು ಸಂಕೀರ್ಣ ಬಹು-ಹಂತದ ವಿಝಾರ್ಡ್‌ಗಳವರೆಗೆ, ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಮತ್ತು ಡೇಟಾ ಸಲ್ಲಿಕೆಗೆ ಇವು ಅತ್ಯಗತ್ಯ. ವರ್ಷಗಳಿಂದ, ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್‌ಗಳು ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆಯ ಹಲವು ಪರಿಹಾರಗಳನ್ನು ಬಳಸುತ್ತಾ ಬಂದಿದ್ದಾರೆ, ಇದರಲ್ಲಿ ಮೂಲಭೂತ ಸನ್ನಿವೇಶಗಳಿಗಾಗಿ ಸರಳವಾದ useState ಹುಕ್‌ನಿಂದ ಹಿಡಿದು, ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಅಗತ್ಯಗಳಿಗಾಗಿ Formik ಮತ್ತು React Hook Form ನಂತಹ ಪ್ರಬಲ ಥರ್ಡ್-ಪಾರ್ಟಿ ಲೈಬ್ರರಿಗಳು ಸೇರಿವೆ. ಈ ಪರಿಕರಗಳು ಅತ್ಯುತ್ತಮವಾಗಿದ್ದರೂ, ರಿಯಾಕ್ಟ್ ಹೆಚ್ಚು ಸಂಯೋಜಿತ, ಶಕ್ತಿಯುತ ಪ್ರಿಮಿಟಿವ್‌ಗಳನ್ನು ಒದಗಿಸಲು ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ.

useFormState ಅನ್ನು ಪರಿಚಯಿಸಲಾಯಿತು, ಇದು ರಿಯಾಕ್ಟ್ 18 ರಲ್ಲಿ ಬಂದ ಒಂದು ಹುಕ್ ಆಗಿದೆ. ಆರಂಭದಲ್ಲಿ ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ಸರಾಗವಾಗಿ ಕೆಲಸ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ useFormState, ಫಾರ್ಮ್ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು, ವಿಶೇಷವಾಗಿ ಸರ್ವರ್-ಸೈಡ್ ತರ್ಕ ಮತ್ತು ಮೌಲ್ಯೀಕರಣದೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, ಸುವ್ಯವಸ್ಥಿತ, ದೃಢವಾದ, ಮತ್ತು ನೇಟಿವ್ ವಿಧಾನವನ್ನು ನೀಡುತ್ತದೆ. ಇದು ಸರ್ವರ್‌ನಿಂದ ಬರುವ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು, ಉದಾಹರಣೆಗೆ ಮೌಲ್ಯೀಕರಣ ದೋಷಗಳು ಅಥವಾ ಯಶಸ್ಸಿನ ಸಂದೇಶಗಳನ್ನು, ನೇರವಾಗಿ ನಿಮ್ಮ UI ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ನಿಮ್ಮನ್ನು useFormState ಹುಕ್‌ನ ಆಳವಾದ ಅಧ್ಯಯನಕ್ಕೆ ಕೊಂಡೊಯ್ಯುತ್ತದೆ. ನಾವು ಅದರ ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು, ಪ್ರಾಯೋಗಿಕ ಅಳವಡಿಕೆಗಳು, ಸುಧಾರಿತ ಮಾದರಿಗಳು, ಮತ್ತು ಆಧುನಿಕ ರಿಯಾಕ್ಟ್ ಅಭಿವೃದ್ಧಿಯ ವಿಶಾಲ ಪರಿಸರ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಅದು ಹೇಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ. ನೀವು Next.js, Remix, ಅಥವಾ ವೆನಿಲ್ಲಾ ರಿಯಾಕ್ಟ್‌ನೊಂದಿಗೆ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತಿರಲಿ, useFormState ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಉತ್ತಮ, ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ ಫಾರ್ಮ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಒಂದು ಪ್ರಬಲ ಸಾಧನವನ್ನು ಒದಗಿಸುತ್ತದೆ.

`useFormState` ಎಂದರೇನು ಮತ್ತು ನಮಗೆ ಅದು ಏಕೆ ಬೇಕು?

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

useFormState ಗಿಂತ ಮೊದಲು, ಸರ್ವರ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಒಂದು ಸಾಮಾನ್ಯ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯ ಹರಿವು ಹೀಗಿರುತ್ತಿತ್ತು:

1. ಬಳಕೆದಾರರು ಫಾರ್ಮ್ ಅನ್ನು ತುಂಬುತ್ತಾರೆ.
2. ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸ್ಟೇಟ್ (ಉದಾಹರಣೆಗೆ useState ಬಳಸಿ) ಇನ್‌ಪುಟ್ ಮೌಲ್ಯಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ.
3. ಸಲ್ಲಿಕೆಯ ಮೇಲೆ, ಒಂದು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ (onSubmit) ಡೀಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ವರ್ತನೆಯನ್ನು ತಡೆಯುತ್ತದೆ.
4. ಒಂದು fetch ವಿನಂತಿಯನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ನಿರ್ಮಿಸಿ ಸರ್ವರ್ API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗೆ ಕಳುಹಿಸಲಾಗುತ್ತದೆ.
5. ಲೋಡಿಂಗ್ ಸ್ಟೇಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, const [isLoading, setIsLoading] = useState(false)).
6. ಸರ್ವರ್ ವಿನಂತಿಯನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ, ಮೌಲ್ಯೀಕರಣವನ್ನು ಮಾಡುತ್ತದೆ, ಮತ್ತು ಡೇಟಾಬೇಸ್‌ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುತ್ತದೆ.
7. ಸರ್ವರ್ JSON ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ (ಉದಾ., { success: false, errors: { email: 'Invalid format' } }).
8. ಕ್ಲೈಂಟ್-ಸೈಡ್ ಕೋಡ್ ಈ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪಾರ್ಸ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ದೋಷಗಳು ಅಥವಾ ಯಶಸ್ಸಿನ ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಮತ್ತೊಂದು ಸ್ಟೇಟ್ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ.

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

`useFormState` ಬಳಸುವುದರ ಪ್ರಾಥಮಿಕ ಪ್ರಯೋಜನಗಳು:

• ಸ seamless ಸರ್ವರ್ ಇಂಟಿಗ್ರೇಷನ್: ಇದು ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳಿಂದ ಬರುವ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನೇಟಿವ್ ಪರಿಹಾರವಾಗಿದೆ, ಇದರಿಂದಾಗಿ ಸರ್ವರ್-ಸೈಡ್ ಮೌಲ್ಯೀಕರಣವು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಪ್ರಥಮ ದರ್ಜೆಯ ನಾಗರಿಕನಾಗುತ್ತದೆ.
• ಸರಳೀಕೃತ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ: ಇದು ಫಾರ್ಮ್ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳ ತರ್ಕವನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ, ಡೇಟಾ, ದೋಷಗಳು ಮತ್ತು ಸಲ್ಲಿಕೆ ಸ್ಥಿತಿಗಾಗಿ ಅನೇಕ useState ಹುಕ್‌ಗಳ ಅಗತ್ಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
• ಪ್ರಗತಿಪರ ವರ್ಧನೆ (Progressive Enhancement): `useFormState` ಮತ್ತು ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ಫಾರ್ಮ್‌ಗಳು ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯಗೊಂಡಿದ್ದರೂ ಸಹ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಏಕೆಂದರೆ ಅವು ಪ್ರಮಾಣಿತ HTML ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳ ಅಡಿಪಾಯದ ಮೇಲೆ ನಿರ್ಮಿಸಲ್ಪಟ್ಟಿವೆ.
• ಸುಧಾರಿತ ಬಳಕೆದಾರ ಅನುಭವ: ಇದು ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯ ತಕ್ಷಣವೇ ಬಳಕೆದಾರರಿಗೆ ತಕ್ಷಣದ ಮತ್ತು ಸಂದರ್ಭೋಚಿತ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ ಇನ್‌ಲೈನ್ ಮೌಲ್ಯೀಕರಣ ದೋಷಗಳು ಅಥವಾ ಯಶಸ್ಸಿನ ಸಂದೇಶಗಳು.

`useFormState` ಹುಕ್ ಸಿಗ್ನೇಚರ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಈ ಹುಕ್ ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳಲು, ಮೊದಲು ಅದರ ಸಿಗ್ನೇಚರ್ ಮತ್ತು ರಿಟರ್ನ್ ಮೌಲ್ಯಗಳನ್ನು ವಿಶ್ಲೇಷಿಸೋಣ. ಇದು ಮೊದಲ ನೋಟಕ್ಕೆ ಕಾಣುವುದಕ್ಕಿಂತ ಸರಳವಾಗಿದೆ.

            
const [state, formAction] = useFormState(action, initialState);

            

              
                Copy
              
            
          

ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು:

• action: ಇದು ಫಾರ್ಮ್ ಸಲ್ಲಿಸಿದಾಗ ಕಾರ್ಯಗತಗೊಳ್ಳುವ ಒಂದು ಫಂಕ್ಷನ್ ಆಗಿದೆ. ಈ ಫಂಕ್ಷನ್ ಎರಡು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಪಡೆಯುತ್ತದೆ: ಫಾರ್ಮ್‌ನ ಹಿಂದಿನ ಸ್ಟೇಟ್ ಮತ್ತು ಸಲ್ಲಿಸಲಾದ ಫಾರ್ಮ್ ಡೇಟಾ. ಇದು ಹೊಸ ಸ್ಟೇಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುವ ನಿರೀಕ್ಷೆಯಿದೆ. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಸರ್ವರ್ ಆಕ್ಷನ್ ಆಗಿರುತ್ತದೆ, ಆದರೆ ಇದು ಯಾವುದೇ ಫಂಕ್ಷನ್ ಆಗಿರಬಹುದು.
• initialState: ಯಾವುದೇ ಸಲ್ಲಿಕೆ ಸಂಭವಿಸುವ ಮೊದಲು, ಫಾರ್ಮ್‌ನ ಸ್ಟೇಟ್ ಆರಂಭದಲ್ಲಿ ಹೊಂದಿರಬೇಕಾದ ಮೌಲ್ಯ ಇದು. ಇದು ಯಾವುದೇ ಸೀರಿಯಲೈಝಬಲ್ ಮೌಲ್ಯವಾಗಿರಬಹುದು (ಸ್ಟ್ರಿಂಗ್, ಸಂಖ್ಯೆ, ಆಬ್ಜೆಕ್ಟ್, ಇತ್ಯಾದಿ).

ರಿಟರ್ನ್ ಮೌಲ್ಯಗಳು:

useFormState ನಿಖರವಾಗಿ ಎರಡು ಅಂಶಗಳೊಂದಿಗೆ ಒಂದು ಅರೇಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ:

• state: ಫಾರ್ಮ್‌ನ ಪ್ರಸ್ತುತ ಸ್ಟೇಟ್. ಆರಂಭಿಕ ರೆಂಡರ್‌ನಲ್ಲಿ, ಇದು ನೀವು ಒದಗಿಸಿದ initialState ಆಗಿರುತ್ತದೆ. ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯ ನಂತರ, ಇದು ನಿಮ್ಮ action ಫಂಕ್ಷನ್ ಹಿಂತಿರುಗಿಸಿದ ಮೌಲ್ಯವಾಗಿರುತ್ತದೆ. ಈ ಸ್ಟೇಟ್ ಅನ್ನು ನೀವು UI ಪ್ರತಿಕ್ರಿಯೆ, ಉದಾಹರಣೆಗೆ ದೋಷ ಸಂದೇಶಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಬಳಸುತ್ತೀರಿ.
• formAction: ನಿಮ್ಮ <form> ಎಲಿಮೆಂಟ್‌ನ action ಪ್ರಾಪರ್ಟಿಗೆ ನೀವು ಪಾಸ್ ಮಾಡುವ ಹೊಸ ಆಕ್ಷನ್ ಫಂಕ್ಷನ್. ಈ ಆಕ್ಷನ್ ಅನ್ನು ಟ್ರಿಗರ್ ಮಾಡಿದಾಗ (ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯಿಂದ), ರಿಯಾಕ್ಟ್ ನಿಮ್ಮ ಮೂಲ action ಫಂಕ್ಷನ್ ಅನ್ನು ಹಿಂದಿನ ಸ್ಟೇಟ್ ಮತ್ತು ಫಾರ್ಮ್ ಡೇಟಾದೊಂದಿಗೆ ಕರೆಯುತ್ತದೆ, ಮತ್ತು ನಂತರ state ಅನ್ನು ಫಲಿತಾಂಶದೊಂದಿಗೆ ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ.

ನೀವು useReducer ಬಳಸಿದ್ದರೆ ಈ ಮಾದರಿಯು ಪರಿಚಿತವೆನಿಸಬಹುದು. action ಫಂಕ್ಷನ್ ಒಂದು ರಿಡ್ಯೂಸರ್‌ನಂತೆ, initialState ಆರಂಭಿಕ ಸ್ಟೇಟ್, ಮತ್ತು ಫಾರ್ಮ್ ಸಲ್ಲಿಸಿದಾಗ ರಿಯಾಕ್ಟ್ ನಿಮಗಾಗಿ ಡಿಸ್ಪ್ಯಾಚಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.

ಒಂದು ಪ್ರಾಯೋಗಿಕ ಮೊದಲ ಉದಾಹರಣೆ: ಸರಳ ಚಂದಾದಾರಿಕೆ ಫಾರ್ಮ್

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

ಮೊದಲಿಗೆ, ನಮ್ಮ ಸರ್ವರ್ ಆಕ್ಷನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸೋಣ. ನೀವು Next.js ಬಳಸುತ್ತಿದ್ದರೆ, ಫಂಕ್ಷನ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ 'use server'; ನಿರ್ದೇಶನವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಇರುವ ಅದೇ ಫೈಲ್‌ನಲ್ಲಿ ಇದನ್ನು ಇರಿಸಬಹುದು.

            
// In actions.js or at the top of your component file with 'use server'

export async function subscribe(previousState, formData) {
  const email = formData.get('email');

  if (!email) {
    return { message: 'Email is required.' };
  }

  // A simple regex for demonstration purposes
  if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email)) {
    return { message: 'Please enter a valid email address.' };
  }

  // Here you would typically save the email to a database
  console.log(`Subscribing with email: ${email}`);

  // Simulate a delay
  await new Promise(res => setTimeout(res, 1000));

  return { message: 'Thank you for subscribing!' };
}

            

              
                Copy
              
            
          

ಈಗ, ಈ ಆಕ್ಷನ್ ಅನ್ನು useFormState ನೊಂದಿಗೆ ಬಳಸುವ ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸೋಣ.

            
'use client';

import { useFormState } from 'react-dom';
import { subscribe } from './actions';

const initialState = {
  message: null,
};

export function SubscriptionForm() {
  const [state, formAction] = useFormState(subscribe, initialState);

  return (
    <form action={formAction}>
      <h3>Subscribe to Our Newsletter</h3>
      <div>
        <label htmlFor="email">Email Address</label>
        <input type="email" id="email" name="email" required />
      </div>
      
      <button type="submit">Subscribe</button>

      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

            

              
                Copy
              
            
          

ಏನಾಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ವಿಶ್ಲೇಷಿಸೋಣ:

1. ನಾವು react-dom ನಿಂದ useFormState ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡುತ್ತೇವೆ (ಗಮನಿಸಿ: react ನಿಂದಲ್ಲ).
2. ನಾವು ಒಂದು initialState ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ. ಇದು ನಮ್ಮ state ವೇರಿಯೇಬಲ್ ಮೊದಲ ರೆಂಡರ್‌ನಿಂದಲೂ ಸ್ಥಿರವಾದ ಆಕಾರವನ್ನು ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
3. ನಾವು useFormState(subscribe, initialState) ಅನ್ನು ಕರೆಯುತ್ತೇವೆ. ಇದು ನಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ ಅನ್ನು subscribe ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗೆ ಲಿಂಕ್ ಮಾಡುತ್ತದೆ.
4. ಹಿಂತಿರುಗಿದ formAction ಅನ್ನು <form> ಎಲಿಮೆಂಟ್‌ನ action ಪ್ರಾಪರ್ಟಿಗೆ ಪಾಸ್ ಮಾಡಲಾಗುತ್ತದೆ. ಇದೇ ಮ್ಯಾಜಿಕ್ ಸಂಪರ್ಕ.
5. ನಾವು ನಮ್ಮ state ಆಬ್ಜೆಕ್ಟ್‌ನಿಂದ ಸಂದೇಶವನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ರೆಂಡರ್ ಮಾಡುತ್ತೇವೆ. ಮೊದಲ ರೆಂಡರ್‌ನಲ್ಲಿ, state.message null ಆಗಿರುತ್ತದೆ, ಆದ್ದರಿಂದ ಏನೂ ಕಾಣಿಸುವುದಿಲ್ಲ.
6. ಬಳಕೆದಾರರು ಫಾರ್ಮ್ ಅನ್ನು ಸಲ್ಲಿಸಿದಾಗ, ರಿಯಾಕ್ಟ್ formAction ಅನ್ನು ಆಹ್ವಾನಿಸುತ್ತದೆ. ಇದು ನಮ್ಮ subscribe ಸರ್ವರ್ ಆಕ್ಷನ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ. subscribe ಫಂಕ್ಷನ್ previousState (ಆರಂಭದಲ್ಲಿ, ನಮ್ಮ initialState) ಮತ್ತು formData ಅನ್ನು ಪಡೆಯುತ್ತದೆ.
7. ಸರ್ವರ್ ಆಕ್ಷನ್ ತನ್ನ ತರ್ಕವನ್ನು ಚಲಾಯಿಸುತ್ತದೆ ಮತ್ತು ಹೊಸ ಸ್ಟೇಟ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ (ಉದಾ., { message: 'Email is required.' }).
8. ರಿಯಾಕ್ಟ್ ಈ ಹೊಸ ಸ್ಟೇಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು SubscriptionForm ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. state ವೇರಿಯೇಬಲ್ ಈಗ ಹೊಸ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹೊಂದಿದೆ, ಮತ್ತು ನಮ್ಮ ಷರತ್ತುಬದ್ಧ ಪ್ಯಾರಾಗ್ರಾಫ್ ದೋಷ ಅಥವಾ ಯಶಸ್ಸಿನ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ಇದು ನಂಬಲಾಗದಷ್ಟು ಶಕ್ತಿಯುತವಾಗಿದೆ. ನಾವು ಕನಿಷ್ಠ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆಯ ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್‌ನೊಂದಿಗೆ ಪೂರ್ಣ ಕ್ಲೈಂಟ್-ಸರ್ವರ್ ಮೌಲ್ಯೀಕರಣ ಲೂಪ್ ಅನ್ನು ಅಳವಡಿಸಿದ್ದೇವೆ.

`useFormStatus` ನೊಂದಿಗೆ UX ಅನ್ನು ವರ್ಧಿಸುವುದು

ನಮ್ಮ ಫಾರ್ಮ್ ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಆದರೆ ಬಳಕೆದಾರರ ಅನುಭವವು ಉತ್ತಮವಾಗಿರಬಹುದು. ಬಳಕೆದಾರರು "Subscribe" ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಬಟನ್ ಸಕ್ರಿಯವಾಗಿರುತ್ತದೆ, ಮತ್ತು ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯಿಸುವವರೆಗೆ ಏನಾಗುತ್ತಿದೆ ಎಂಬುದಕ್ಕೆ ಯಾವುದೇ ದೃಶ್ಯ ಸೂಚನೆ ಇರುವುದಿಲ್ಲ. ಇಲ್ಲಿಯೇ useFormStatus ಹುಕ್ ಬರುತ್ತದೆ.

useFormStatus ಹುಕ್ ಕೊನೆಯ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯ ಸ್ಥಿತಿ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ನಿರ್ಣಾಯಕವಾಗಿ, ಇದನ್ನು <form> ಎಲಿಮೆಂಟ್‌ನ ಚೈಲ್ಡ್ ಆಗಿರುವ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಬಳಸಬೇಕು. ಫಾರ್ಮ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವ ಅದೇ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಇದನ್ನು ಕರೆದರೆ ಅದು ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ.

ಒಂದು ಪ್ರತ್ಯೇಕ SubmitButton ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸೋಣ.

            
'use client';

import { useFormStatus } from 'react-dom';

export function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Subscribing...' : 'Subscribe'}
    </button>
  );
}

            

              
                Copy
              
            
          

ಈಗ, ನಮ್ಮ SubscriptionForm ಅನ್ನು ಈ ಹೊಸ ಕಾಂಪೊನೆಂಟ್ ಬಳಸಲು ಅಪ್‌ಡೇಟ್ ಮಾಡಬಹುದು:

            
// ... imports
import { SubmitButton } from './SubmitButton';

// ... initialState and other code

export function SubscriptionForm() {
  const [state, formAction] = useFormState(subscribe, initialState);

  return (
    <form action={formAction}>
      {/* ... form inputs ... */}
      <SubmitButton /> {/* Replace the old button */}
      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

            

              
                Copy
              
            
          

ಈ ಬದಲಾವಣೆಯೊಂದಿಗೆ, ಫಾರ್ಮ್ ಸಲ್ಲಿಸಿದಾಗ, useFormStatus ನಿಂದ ಬರುವ pending ಮೌಲ್ಯವು true ಆಗುತ್ತದೆ. ನಮ್ಮ SubmitButton ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ, ಬಟನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಅದರ ಪಠ್ಯವನ್ನು "Subscribing..." ಗೆ ಬದಲಾಯಿಸುತ್ತದೆ. ಸರ್ವರ್ ಆಕ್ಷನ್ ಪೂರ್ಣಗೊಂಡ ನಂತರ ಮತ್ತು useFormState ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿದಾಗ, ಫಾರ್ಮ್ ಇನ್ನು ಮುಂದೆ ಪೆಂಡಿಂಗ್ ಆಗಿರುವುದಿಲ್ಲ, ಮತ್ತು ಬಟನ್ ತನ್ನ ಮೂಲ ಸ್ಥಿತಿಗೆ ಮರಳುತ್ತದೆ. ಇದು ಬಳಕೆದಾರರಿಗೆ ಅಗತ್ಯವಾದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ನಕಲಿ ಸಲ್ಲಿಕೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ.

ರಚನಾತ್ಮಕ ದೋಷ ಸ್ಥಿತಿಗಳು ಮತ್ತು Zod ನೊಂದಿಗೆ ಸುಧಾರಿತ ಮೌಲ್ಯೀಕರಣ

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

ನಮ್ಮ ಆಕ್ಷನ್ ಅನ್ನು errors ಕೀಲಿಯೊಂದಿಗೆ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಲು ವರ್ಧಿಸೋಣ, ಇದರಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಫೀಲ್ಡ್‌ಗಳಿಗಾಗಿ ಸಂದೇಶಗಳಿರುತ್ತವೆ. ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ಮೌಲ್ಯೀಕರಣ ತರ್ಕಕ್ಕಾಗಿ Zod ನಂತಹ ಸ್ಕೀಮಾ ಮೌಲ್ಯೀಕರಣ ಲೈಬ್ರರಿಯನ್ನು ಪರಿಚಯಿಸಲು ಇದೊಂದು ಉತ್ತಮ ಅವಕಾಶವಾಗಿದೆ.

ಹಂತ 1: Zod ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ

            
npm install zod

            

              
                Copy
              
            
          

ಹಂತ 2: ಸರ್ವರ್ ಆಕ್ಷನ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿ

ನಮ್ಮ ಫಾರ್ಮ್ ಡೇಟಾದ ನಿರೀಕ್ಷಿತ ಆಕಾರ ಮತ್ತು ಮೌಲ್ಯೀಕರಣ ನಿಯಮಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಾವು ಒಂದು Zod ಸ್ಕೀಮಾವನ್ನು ರಚಿಸುತ್ತೇವೆ. ನಂತರ, ಒಳಬರುವ formData ಅನ್ನು ಮೌಲ್ಯೀಕರಿಸಲು ನಾವು schema.safeParse() ಅನ್ನು ಬಳಸುತ್ತೇವೆ.

            
'use server';

import { z } from 'zod';

// Define the schema for our form
const contactSchema = z.object({
  name: z.string().min(2, { message: 'Name must be at least 2 characters.' }),
  email: z.string().email({ message: 'Invalid email address.' }),
  message: z.string().min(10, { message: 'Message must be at least 10 characters.' }),
});

export async function submitContactForm(previousState, formData) {
  const validatedFields = contactSchema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
    message: formData.get('message'),
  });

  // If validation fails, return the errors
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: 'Validation failed. Please check your inputs.',
    };
  }

  // If validation succeeds, process the data
  // For example, send an email or save to a database
  console.log('Success!', validatedFields.data);
  // ... processing logic ...

  // Return a success state
  return {
    errors: {},
    message: 'Thank you for your message! We will get back to you soon.',
  };
}

            

              
                Copy
              
            
          

ನಾವು validatedFields.error.flatten().fieldErrors ಅನ್ನು ಹೇಗೆ ಬಳಸುತ್ತೇವೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದೊಂದು ಉಪಯುಕ್ತ Zod ಯುಟಿಲಿಟಿಯಾಗಿದ್ದು, ಇದು ದೋಷ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹೆಚ್ಚು ಬಳಸಬಹುದಾದ ರಚನೆಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ: { name: ['Name must be at least 2 characters.'], message: ['Message is too short'] }.

ಹಂತ 3: ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿ

ಈಗ, ಈ ರಚನಾತ್ಮಕ ದೋಷ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸಲು ನಮ್ಮ ಫಾರ್ಮ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡೋಣ.

            
'use client';

import { useFormState } from 'react-dom';
import { submitContactForm } from './actions';
import { SubmitButton } from './SubmitButton'; // Assuming we have a submit button

const initialState = {
  message: null,
  errors: {},
};

export function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, initialState);

  return (
    <form action={formAction}>
      <h2>Contact Us</h2>
      
      <div>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" />
        {state.errors?.name && (
          <p className="error">{state.errors.name[0]}</p>
        )}
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" />
        {state.errors?.email && (
          <p className="error">{state.errors.email[0]}</p>
        )}
      </div>

      <div>
        <label htmlFor="message">Message</label>
        <textarea id="message" name="message" />
        {state.errors?.message && (
          <p className="error">{state.errors.message[0]}</p>
        )}
      </div>

      <SubmitButton />

      {state.message && <p className="form-status">{state.message}</p>}
    </form>
  );
}

            

              
                Copy
              
            
          

ಈ ಮಾದರಿಯು ನಂಬಲಾಗದಷ್ಟು ಸ್ಕೇಲೆಬಲ್ ಮತ್ತು ದೃಢವಾಗಿದೆ. ನಿಮ್ಮ ಸರ್ವರ್ ಆಕ್ಷನ್ ಮೌಲ್ಯೀಕರಣ ತರ್ಕದ ಏಕೈಕ ಸತ್ಯದ ಮೂಲವಾಗುತ್ತದೆ, ಮತ್ತು Zod ಆ ನಿಯಮಗಳನ್ನು ಘೋಷಣಾತ್ಮಕ ಮತ್ತು ಟೈಪ್-ಸೇಫ್ ರೀತಿಯಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಕೇವಲ useFormState ಒದಗಿಸಿದ ಸ್ಟೇಟ್‌ನ ಗ್ರಾಹಕನಾಗುತ್ತದೆ, ದೋಷಗಳನ್ನು ಅವುಗಳ ಜಾಗದಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಈ ಕಾಳಜಿಗಳ ಪ್ರತ್ಯೇಕತೆಯು ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛ, ಪರೀಕ್ಷಿಸಲು ಸುಲಭ, ಮತ್ತು ಹೆಚ್ಚು ಸುರಕ್ಷಿತವಾಗಿಸುತ್ತದೆ, ಏಕೆಂದರೆ ಮೌಲ್ಯೀಕರಣವು ಯಾವಾಗಲೂ ಸರ್ವರ್‌ನಲ್ಲಿ ಜಾರಿಗೊಳ್ಳುತ್ತದೆ.

`useFormState` ಮತ್ತು ಇತರ ಫಾರ್ಮ್ ನಿರ್ವಹಣಾ ಪರಿಹಾರಗಳ ಹೋಲಿಕೆ

ಹೊಸ ಪರಿಕರದೊಂದಿಗೆ ಒಂದು ಪ್ರಶ್ನೆ ಬರುತ್ತದೆ: "ನನಗೆ ಈಗಾಗಲೇ ತಿಳಿದಿರುವದರ ಬದಲು ಇದನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು?" `useFormState` ಅನ್ನು ಇತರ ಸಾಮಾನ್ಯ ವಿಧಾನಗಳೊಂದಿಗೆ ಹೋಲಿಸೋಣ.

`useFormState` vs. `useState`

• `useState` ಸರಳ, ಕ್ಲೈಂಟ್-ಮಾತ್ರ ಫಾರ್ಮ್‌ಗಳಿಗೆ ಅಥವಾ ನೀವು ಸಲ್ಲಿಕೆಯ ಮೊದಲು ಸಂಕೀರ್ಣ, ನೈಜ-ಸಮಯದ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸಂವಹನಗಳನ್ನು (ಬಳಕೆದಾರರು ಟೈಪ್ ಮಾಡುವಾಗ ಲೈವ್ ಮೌಲ್ಯೀಕರಣದಂತಹ) ನಿರ್ವಹಿಸಬೇಕಾದಾಗ ಪರಿಪೂರ್ಣವಾಗಿದೆ. ಇದು ನಿಮಗೆ ನೇರ, ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ.
• `useFormState` ಫಾರ್ಮ್‌ನ ಸ್ಥಿತಿಯು ಪ್ರಾಥಮಿಕವಾಗಿ ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಯಿಂದ ನಿರ್ಧರಿಸಲ್ಪಟ್ಟಾಗ ಉತ್ತಮವಾಗಿರುತ್ತದೆ. ಇದನ್ನು ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯ ವಿನಂತಿ/ಪ್ರತಿಕ್ರಿಯೆ ಚಕ್ರಕ್ಕಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಮತ್ತು ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸುವಾಗ ಇದು ಮೊದಲ ಆಯ್ಕೆಯಾಗಿದೆ. ಇದು ಫೆಚ್ ಕರೆಗಳು, ಲೋಡಿಂಗ್ ಸ್ಟೇಟ್‌ಗಳು, ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆ ಪಾರ್ಸಿಂಗ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ನಿರ್ವಹಿಸುವ ಅಗತ್ಯವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.

`useFormState` vs. ಥರ್ಡ್-ಪಾರ್ಟಿ ಲೈಬ್ರರಿಗಳು (React Hook Form, Formik)

React Hook Form ಮತ್ತು Formik ನಂತಹ ಲೈಬ್ರರಿಗಳು ಪ್ರಬುದ್ಧ, ವೈಶಿಷ್ಟ್ಯ-ಭರಿತ ಪರಿಹಾರಗಳಾಗಿದ್ದು, ಫಾರ್ಮ್ ನಿರ್ವಹಣೆಗಾಗಿ ಒಂದು ಸಮಗ್ರವಾದ ಪರಿಕರಗಳ ಗುಂಪನ್ನು ನೀಡುತ್ತವೆ. ಅವು ಒದಗಿಸುತ್ತವೆ:

• ಸುಧಾರಿತ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮೌಲ್ಯೀಕರಣ (ಸಾಮಾನ್ಯವಾಗಿ Zod, Yup, ಇತ್ಯಾದಿಗಳಿಗಾಗಿ ಸ್ಕೀಮಾ ಸಂಯೋಜನೆಯೊಂದಿಗೆ).
• ನೆಸ್ಟೆಡ್ ಫೀಲ್ಡ್‌ಗಳು, ಫೀಲ್ಡ್ ಅರೇಗಳು, ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ಸಂಕೀರ್ಣ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ.
• ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳು (ಉದಾ., ಬದಲಾಗುವ ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ ಮಾತ್ರ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸುವುದು).
• ಕಂಟ್ರೋಲರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮತ್ತು UI ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಸಂಯೋಜನೆಗಾಗಿ ಸಹಾಯಕರು.

ಹಾಗಾದರೆ, ಯಾವುದನ್ನು ಯಾವಾಗ ಆಯ್ಕೆ ಮಾಡಬೇಕು?

• `useFormState` ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿ ಯಾವಾಗ:
  • ನೀವು ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ ಮತ್ತು ನೇಟಿವ್, ಸಂಯೋಜಿತ ಪರಿಹಾರವನ್ನು ಬಯಸಿದರೆ.
  • ನಿಮ್ಮ ಮೌಲ್ಯೀಕರಣ ಸತ್ಯದ ಪ್ರಾಥಮಿಕ ಮೂಲ ಸರ್ವರ್ ಆಗಿದ್ದರೆ.
  • ನೀವು ಪ್ರಗತಿಪರ ವರ್ಧನೆಯನ್ನು ಗೌರವಿಸುತ್ತಿದ್ದರೆ ಮತ್ತು ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದೆ ಕೆಲಸ ಮಾಡಬೇಕೆಂದು ಬಯಸಿದರೆ.
  • ನಿಮ್ಮ ಫಾರ್ಮ್ ತರ್ಕವು ತುಲನಾತ್ಮಕವಾಗಿ ಸರಳವಾಗಿದ್ದರೆ ಮತ್ತು ಸಲ್ಲಿಕೆ/ಪ್ರತಿಕ್ರಿಯೆ ಚಕ್ರದ ಸುತ್ತ ಕೇಂದ್ರಿತವಾಗಿದ್ದರೆ.
• ಥರ್ಡ್-ಪಾರ್ಟಿ ಲೈಬ್ರರಿಯನ್ನು ಆಯ್ಕೆ ಮಾಡಿ ಯಾವಾಗ:
  • ನಿಮಗೆ ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ವ್ಯಾಪಕ ಮತ್ತು ಸಂಕೀರ್ಣ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮೌಲ್ಯೀಕರಣದ ಅಗತ್ಯವಿದ್ದರೆ (ಉದಾ., ಆನ್ ಬ್ಲರ್ ಅಥವಾ ಆನ್ ಚೇಂಜ್‌ನಲ್ಲಿ ಮೌಲ್ಯೀಕರಿಸುವುದು).
  • ನೀವು ಅತ್ಯಂತ ಡೈನಾಮಿಕ್ ಫಾರ್ಮ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ (ಉದಾ., ಫೀಲ್ಡ್‌ಗಳನ್ನು ಸೇರಿಸುವುದು/ತೆಗೆದುಹಾಕುವುದು, ಷರತ್ತುಬದ್ಧ ತರ್ಕ).
  • ನೀವು ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ಫ್ರೇಮ್‌ವರ್ಕ್ ಬಳಸುತ್ತಿಲ್ಲದಿದ್ದರೆ ಮತ್ತು REST ಅಥವಾ GraphQL API ಗಳೊಂದಿಗೆ ನಿಮ್ಮದೇ ಆದ ಕ್ಲೈಂಟ್-ಸರ್ವರ್ ಸಂವಹನ ಪದರವನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ.
  • ಬಹಳ ದೊಡ್ಡ ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಮರು-ರೆಂಡರ್‌ಗಳ ಮೇಲೆ ಸೂಕ್ಷ್ಮ-ಧಾನ್ಯದ ನಿಯಂತ್ರಣದ ಅಗತ್ಯವಿದ್ದರೆ.

ಇವು ಪರಸ್ಪರ ಪ್ರತ್ಯೇಕವಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸುವುದು ಸಹ ಮುಖ್ಯವಾಗಿದೆ. ನಿಮ್ಮ ಫಾರ್ಮ್‌ನ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸ್ಟೇಟ್ ಮತ್ತು ಮೌಲ್ಯೀಕರಣವನ್ನು ನಿರ್ವಹಿಸಲು ನೀವು React Hook Form ಅನ್ನು ಬಳಸಬಹುದು, ಮತ್ತು ನಂತರ ಅದರ ಸಲ್ಲಿಕೆ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಸರ್ವರ್ ಆಕ್ಷನ್ ಅನ್ನು ಕರೆಯಲು ಬಳಸಬಹುದು. ಆದಾಗ್ಯೂ, ಅನೇಕ ಸಾಮಾನ್ಯ ಬಳಕೆಯ ಸಂದರ್ಭಗಳಿಗೆ, `useFormState` ಮತ್ತು ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳ ಸಂಯೋಜನೆಯು ಸರಳ ಮತ್ತು ಹೆಚ್ಚು ಸೊಗಸಾದ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸಾಮಾನ್ಯ ಅಪಾಯಗಳು

useFormState ನಿಂದ ಹೆಚ್ಚಿನದನ್ನು ಪಡೆಯಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

1. ಕ್ರಿಯೆಗಳನ್ನು ಕೇಂದ್ರೀಕೃತವಾಗಿಡಿ: ನಿಮ್ಮ ಫಾರ್ಮ್ ಆಕ್ಷನ್ ಫಂಕ್ಷನ್ ಒಂದೇ ವಿಷಯಕ್ಕೆ ಜವಾಬ್ದಾರವಾಗಿರಬೇಕು: ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವುದು. ಇದರಲ್ಲಿ ಮೌಲ್ಯೀಕರಣ, ಡೇಟಾ ಬದಲಾವಣೆ (DB ಗೆ ಉಳಿಸುವುದು), ಮತ್ತು ಹೊಸ ಸ್ಟೇಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುವುದು ಸೇರಿದೆ. ಫಾರ್ಮ್‌ನ ಫಲಿತಾಂಶಕ್ಕೆ ಸಂಬಂಧಿಸದ ಅಡ್ಡ ಪರಿಣಾಮಗಳನ್ನು ತಪ್ಪಿಸಿ.
2. ಸ್ಥಿರವಾದ ಸ್ಟೇಟ್ ಆಕಾರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ: ಯಾವಾಗಲೂ ಉತ್ತಮವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ initialState ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಆಕ್ಷನ್ ಯಾವಾಗಲೂ ಯಶಸ್ಸಿನ ಸಂದರ್ಭದಲ್ಲಿಯೂ ಸಹ ಅದೇ ಆಕಾರದ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಇದು ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ state.errors ನಂತಹ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ಪ್ರಯತ್ನಿಸುವಾಗ ರನ್‌ಟೈಮ್ ದೋಷಗಳನ್ನು ತಡೆಯುತ್ತದೆ.
3. ಪ್ರಗತಿಪರ ವರ್ಧನೆಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ: ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ. ಎರಡೂ ಸನ್ನಿವೇಶಗಳನ್ನು ಸುಂದರವಾಗಿ ನಿರ್ವಹಿಸಲು ನಿಮ್ಮ UI ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ. ಉದಾಹರಣೆಗೆ, ಸರ್ವರ್-ರೆಂಡರ್ ಮಾಡಿದ ಮೌಲ್ಯೀಕರಣ ಸಂದೇಶಗಳು ಸ್ಪಷ್ಟವಾಗಿವೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ಏಕೆಂದರೆ JS ಇಲ್ಲದೆ ಬಳಕೆದಾರರಿಗೆ ನಿಷ್ಕ್ರಿಯಗೊಂಡ ಬಟನ್ ಸ್ಥಿತಿಯ ಪ್ರಯೋಜನವಿರುವುದಿಲ್ಲ.
4. UI ಕಾಳಜಿಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಿ: ಸ್ಥಿತಿ-ಅವಲಂಬಿತ UI ಅನ್ನು ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಟ್ ಮಾಡಲು ನಮ್ಮ SubmitButton ನಂತಹ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿ. ಇದು ನಿಮ್ಮ ಮುಖ್ಯ ಫಾರ್ಮ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಸ್ವಚ್ಛವಾಗಿರಿಸುತ್ತದೆ ಮತ್ತು useFormStatus ಅನ್ನು ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಬಳಸಬೇಕು ಎಂಬ ನಿಯಮವನ್ನು ಗೌರವಿಸುತ್ತದೆ.
5. ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಮರೆಯಬೇಡಿ: ದೋಷಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವಾಗ, ನಿಮ್ಮ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳಲ್ಲಿ aria-invalid ನಂತಹ ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ ಮತ್ತು aria-describedby ಬಳಸಿ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಅವುಗಳ ಸಂಬಂಧಿತ ಇನ್‌ಪುಟ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ, ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಸಾಧ್ಯವಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಸಾಮಾನ್ಯ ಅಪಾಯ: ಒಂದೇ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ useFormStatus ಅನ್ನು ಬಳಸುವುದು

ಒಂದು ಸಾಮಾನ್ಯ ತಪ್ಪು ಎಂದರೆ <form> ಟ್ಯಾಗ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವ ಅದೇ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ useFormStatus ಅನ್ನು ಕರೆಯುವುದು. ಇದು ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಹುಕ್ ತನ್ನ ಸ್ಥಿತಿಯನ್ನು ಪ್ರವೇಶಿಸಲು ಫಾರ್ಮ್‌ನ ಸಂದರ್ಭದೊಳಗೆ ಇರಬೇಕು. ಸ್ಥಿತಿಯ ಅಗತ್ಯವಿರುವ ನಿಮ್ಮ UI ಯ ಭಾಗವನ್ನು (ಬಟನ್‌ನಂತೆ) ಯಾವಾಗಲೂ ತನ್ನದೇ ಆದ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಹೊರತೆಗೆಯಿರಿ.

ತೀರ್ಮಾನ

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

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