Sébastien Rigaux

React: preserve progressive enhancement with Server Actions

View resource

ebey.dev

React combines <form action>, useActionState, and useOptimistic to handle pending feedback and optimistic updates while keeping form submission available before JavaScript runs. The article shows how this continuity can enhance the interface after hydration without giving up the browser’s native form behavior.

The key is to keep the server action directly in action: inserting a client function breaks submission without JavaScript. For optimistic updates, useHydrated() lets the form choose between the server action and its client-enhanced version.