JAVASCRIPT
Robust Form Management and Validation with useForm Hook
A custom React hook built with `useReducer` to manage complex form states, handle input changes, and implement validation logic efficiently.
import { useReducer, useCallback } from 'react';
const formReducer = (state, action) => {
switch (action.type) {
case 'INPUT_CHANGE':
let formIsValid = true;
for (const inputId in state.inputs) {
if (!state.inputs[inputId]) { // Skip uninitialized inputs
continue;
}
if (inputId === action.inputId) {
formIsValid = formIsValid && action.isValid;
} else {
formIsValid = formIsValid && state.inputs[inputId].isValid;
}
}
return {
...state,
inputs: {
...state.inputs,
[action.inputId]: { value: action.value, isValid: action.isValid },
},
isValid: formIsValid,
};
case 'SET_DATA':
return {
inputs: action.inputs,
isValid: action.isValid,
};
default:
return state;
}
};
export const useForm = (initialInputs, initialFormValidity) => {
const [formState, dispatch] = useReducer(formReducer, {
inputs: initialInputs,
isValid: initialFormValidity,
});
const inputHandler = useCallback((id, value, isValid) => {
dispatch({
type: 'INPUT_CHANGE',
value: value,
isValid: isValid,
inputId: id,
});
}, []);
const setFormData = useCallback((inputData, formValidity) => {
dispatch({
type: 'SET_DATA',
inputs: inputData,
isValid: formValidity,
});
}, []);
return [formState, inputHandler, setFormData];
};
How it works: The `useForm` hook leverages `useReducer` to manage the state of multiple form inputs, including their values and validity. The `formReducer` centralizes state updates, making it easier to handle complex form logic. `inputHandler` updates individual input states, and `setFormData` allows pre-populating the form, providing a robust and reusable solution for form management.