Fast React forms, one atom per field.

import { FormProvider, useField, useForm } from 'wit-form';

function TextField({ name, label }: { name: string; label: string }) {
  const { fieldValue, setFieldValue, onBlur, error } = useField<string>({
    name,
    validate: (value) => (!value ? 'Required' : null),
  });

  return (
    <label>
      {label}
      <input
        value={fieldValue ?? ''}
        onChange={(e) => setFieldValue(e.target.value)}
        onBlur={onBlur}
      />
      {error && <span role="alert">{error}</span>}
    </label>
  );
}

function Profile() {
  const { handleSubmit } = useForm({ onSubmit: save });
  return (
    <form onSubmit={handleSubmit}>
      <TextField name="name" label="Name" />
      <TextField name="address.city" label="City" />
      <button>Save</button>
    </form>
  );
}

export const ProfileForm = () => <FormProvider><Profile /></FormProvider>;

const { fieldArrayProps, append, insert, remove, error } = useFieldArray({
  name: 'items',
  fieldNames: ['product', 'qty'],
  validate: (rows) => (rows.length === 0 ? 'Add at least one item' : null),
});

return (
  <>
    {fieldArrayProps.rowIds.map((rowId, index) => (
      <div key={rowId}>
        <Cell name="product" rowId={rowId} />
        <Cell name="qty" rowId={rowId} />
        <button onClick={() => insert(index + 1, { qty: 1 })}>Insert</button>
        <button onClick={() => remove(index)}>Remove</button>
      </div>
    ))}
    {error}
    <button onClick={() => append({ qty: 1 })}>Add item</button>
  </>
);

// Re-validates whenever "password" changes
useField({
  name: 'confirmPassword',
  depFields: ['password'],
  validate: (value, other) =>
    value !== other?.values.password ? 'Passwords do not match' : null,
});

// Form-wide rules run on submit, together with field rules
useForm({
  onSubmit,
  validate: (values) =>
    values.startDate > values.endDate
      ? ['Start date must be before end date']
      : [],
});

// Re-renders only when qty or price change in any row
function OrderTotal() {
  const { values: rows } = useFieldArrayColumnWatch({
    fieldArrayName: 'items',
    fieldNames: ['qty', 'price'],
  });
  const total = rows.reduce((sum, row) => sum + row.qty * row.price, 0);
  return <output>{total}</output>;
}

// Enable Save only after something changed
function SaveButton() {
  const isDirty = useIsDirty();
  return <button disabled={!isDirty}>Save</button>;
}