🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🎮 Создание пользовательского хука useFormStatus
Проблема: повторное использование логики состояния формы может привести к дублированию кода и усложнению поддержки.
Решение: в книге «Learn React Hooks, 2nd Edition» автор предлагает создать пользовательский хук useFormStatus для инкапсуляции логики состояния формы, что позволяет повторно использовать её в разных компонентах.
Пример кода:
import { useState } from 'react';
function useFormStatus() {
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState(null);
const submit = async (action) => {
setIsSubmitting(true);
try {
await action();
} catch (err) {
setError(err);
} finally {
setIsSubmitting(false);
}
};
return { isSubmitting, error, submit };
}
function LoginForm() {
const { isSubmitting, error, submit } = useFormStatus();
const handleSubmit = () => {
submit(async () => {
// Асинхронная отправка данных
});
};
return (
{isSubmitting ? 'Submitting...' : 'Submit'}
{error && {error.message}
}
);
}
Преимущества:
— Инкапсуляция логики состояния формы.
— Повторное использование кода.
— Упрощение компонентов форм.
🔤 Еще больше полезных книг — в нашем канале @progbook
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme