forms

Form Handling Rules

React Hook Form + Zod Pattern

Basic Form Setup

// components/forms/UserForm.tsx
interface UserFormProps {
  onSubmit: (data: UserFormData) => void
  initialData?: Partial<User>
  isLoading?: boolean
}

export const UserForm = ({ onSubmit, initialData, isLoading }: UserFormProps) => {
  const form = useForm<UserFormData>({
    resolver: zodResolver(userSchema),
    defaultValues: {
      name: initialData?.name || '',
      email: initialData?.email || '',
      phone: initialData?.phone || '',
    }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Full Name</FormLabel>
              <FormControl>
                <Input placeholder="Enter full name" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input type="email" placeholder="Enter email" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        
        <Button type="submit" disabled={isLoading} className="w-full">
          {isLoading ? 'Saving...' : 'Save User'}
        </Button>
      </form>
    </Form>
  )
}

Form Hook Pattern

// hooks/useUserForm.ts
export const useUserForm = (userId?: string) => {
  const { data: user } = useUser(userId)
  const createUser = useCreateUser()
  const updateUser = useUpdateUser()
  
  const form = useForm<UserFormData>({
    resolver: zodResolver(userSchema),
    defaultValues: {
      name: '',
      email: '',
      phone: '',
    }
  })
  
  // Reset form when user data loads
  useEffect(() => {
    if (user) {
      form.reset({
        name: user.name,
        email: user.email,
        phone: user.phone || '',
      })
    }
  }, [user, form])
  
  const handleSubmit = (data: UserFormData) => {
    if (userId) {
      updateUser.mutate({ id: userId, data })
    } else {
      createUser.mutate(data)
    }
  }
  
  const isLoading = createUser.isPending || updateUser.isPending
  
  return {
    form,
    handleSubmit,
    isLoading,
    reset: form.reset,
  }
}