[{"model":"Claude Opus 4.6","text":"```tsx\n// useFormState.ts — extracted custom hook\nimport { useState, useCallback } from 'react';\nimport type { FormErrors, FormValues } from './types';\n\ninterface UseFormStateOptions {\n initialValues: T;\n validate: (values: T) => FormErrors;\n onSubmit: (values: T) => Promise;\n}\n\nexport function useFormState({\n initialValues,\n validate,\n onSubmit,\n}: UseFormStateOptions) {\n const [values, setValues] = useState(initialValues);\n const [errors, setErrors] = useState>({});\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const handleChange = useCallback(\n (field: keyof T) => (value: T[keyof T]) => {\n setValues((prev) => ({ ...prev, [field]: value }));\n setErrors((prev) => ({ ...prev, [field]: undefined }));\n },\n []\n );\n\n const handleSubmit = useCallback(async () => {\n const validationErrors = validate(values);\n if (Object.keys(validationErrors).length > 0) {\n setErrors(validationErrors);\n return;\n }\n setIsSubmitting(true);\n try {\n await onSubmit(values);\n } finally {\n setIsSubmitting(false);\n }\n }, [values, validate, onSubmit]);\n\n return { values, errors, isSubmitting, handleChange, handleSubmit };\n}\n```\n\n```tsx\n// ContactForm.tsx — refactored component\nimport { useFormState } from './useFormState';\nimport type { ContactFormValues } from './types';\n\nconst validate = (values: ContactFormValues) => {\n const errors: Partial> = {};\n if (!values.email.includes('@')) errors.email = 'Invalid email';\n if (values.message.length < 10) errors.message = 'Too short';\n return errors;\n};\n\nexport function ContactForm() {\n const { values, errors, isSubmitting, handleChange, handleSubmit } =\n useFormState({\n initialValues: { name: '', email: '', message: '' },\n validate,\n onSubmit: async (data) => {\n await fetch('/api/contact', {\n method: 'POST',\n body: JSON.stringify(data),\n });\n },\n });\n\n return (\n \n );\n}\n```","isPrimary":true}]

Ergebnisse