React: Хук для управления состоянием формы в React

Этот кастомный хук может быть использован для управления состоянием любого поля ввода.

import { useState, useCallback } from 'react';

# кастомный хук useForm обрабатывает обновления состояния формы и валидацию
function useForm( initialValues, validate )
{
	const [values, setValues] = useState(initialValues);
	const [errors, setErrors] = useState({});

	const handleChange = useCallback((event) => {
			const { name, value } = event.target;

			setValues({
				...values,
				[name]: value,
			});

			if( validate )
			{
				setErrors(validate(values));
			}
		},
		[values, validate]
	);

	const handleSubmit = useCallback((event) => {
			event.preventDefault();

			if( validate )
			{
				const errors = validate(values);

				setErrors(errors);

				if( Object.keys(errors).length === 0 )
				{
					console.log('Форма отправлена');
				}
			}
		},
		[values, validate]
	);

	return { values, handleChange, handleSubmit, errors };
}
export default useForm;

Пример использования этого хука:

import React from 'react';
import useForm from './useForm';

function validate( values ) 
{
	const errors = {};

	if( !values.email )
	{
		errors.email = 'Email is required';
	} 
	else if( !/\S+@\S+\.\S+/.test(values.email) )
	{
		errors.email = 'Адрес электронной почты недействителе';
	}

	if( !values.password )
	{
		errors.password = 'Необходим пароль';
	} 
	else if( values.password.length < 6 )
	{
		errors.password = 'Пароль должен состоять из 6 символов или более';
	}

	return errors;
}

function Signup()
{
	const { handleChange, handleSubmit, values, errors } = useForm(
		{ email: '', password: '' },
		validate
	);

	return (
		<form onSubmit={handleSubmit}>
			<input
				type="email"
				name="email"
				onChange={handleChange}
				value={values.email}
			/>
			{errors.email && <p>{errors.email}</p>}
			<input
				type="password"
				name="password"
				onChange={handleChange}
				value={values.password}
			/>
			{errors.password && <p>{errors.password}</p>}
			<button type="submit">Sign up</button>
		</form>
	);
}

export default Signup;