Next Optimistic Profile Update

Single-entity optimistic mutation with automatic rollback on server failure.

Impact

Alto

Differential

No manual useOptimistic orchestration or rollback bookkeeping.

Message

UX instantanea com rollback seguro em poucas linhas.

type Profile = { id: string; name: string; title: string };

const form = useActionForm(updateProfileAction, {
  defaultValues: { name: profile.name, title: profile.title },
  optimisticInitial: profile,
  optimisticData: (current: Profile, values) => ({
    ...current,
    ...values,
  }),
});

const view = form.optimistic?.data ?? profile;

return (
  <form onSubmit={form.handleSubmit()}>
    <h2>{view.name}</h2>
    <p>{view.title}</p>
    <input {...form.register("name")} />
    <input {...form.register("title")} />
    <button disabled={form.formState.isPending}>Save</button>
  </form>
);

Want a live list scenario? Open Next Optimistic List Rollback.