How does conform work?

[anthonyalayo]

Looking at this example:
https://conform.guide/integration/nextjs

How does conform provide the ability to call what is inside the action prop after the onSubmit is run client side?

'use client'; // form.tsx

import { useForm } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import { useFormState } from 'react-dom';
import { login } from '@/app/actions';
import { loginSchema } from '@/app/schema';

export function LoginForm() {
  const [lastResult, action] = useFormState(login, undefined);
  const [form, fields] = useForm({
    // Sync the result of last submission
    lastResult,

    // Reuse the validation logic on the client
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: loginSchema });
    },

    // Validate the form on blur event triggered
    shouldValidate: 'onBlur',
    shouldRevalidate: 'onInput',
  });

  return (
    <form id={form.id} onSubmit={form.onSubmit} action={action} noValidate>

I tried reading through the source code, and I saw things like new event creations and new buttons, but nothing was clear to me about what exactly is the magic that lets it work.

[edmundhung]

If your question is just about the action, all conform does is just calling event.preventDefault() conditionally based on the result of the client validation.

This is different from the traditional spa app where we calls event.preventDefault() regardless of the form status.

[anthonyalayo]

Makes sense, thank you!