# React: preserve progressive enhancement with Server Actions

Canonical source : [React: preserve progressive enhancement with Server Actions](<https://sebastien.rigaux.be/en/tech-watch/links/react-preserve-progressive-enhancement-with-server-actions>)

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.

- Selected on : 2026-11-01

- Resource publication : 2026-10-29

- Entry updated : 2026-11-07T20:32:37+0000

- Format : Article

- Source language : EN

- Found via : [React Status](<https://react.statuscode.com/>)

Original resource : [React: preserve progressive enhancement with Server Actions](<https://ebey.dev/blog/3myyseusgd22h>)

Tags : [React](<https://sebastien.rigaux.be/en/tech-watch/tags/react>) · Server Actions · [Progressive enhancement](<https://sebastien.rigaux.be/en/tech-watch/tags/progressive-enhancement>) · [Forms](<https://sebastien.rigaux.be/en/tech-watch/tags/forms>) · [Hydration](<https://sebastien.rigaux.be/en/tech-watch/tags/hydration>)

Available versions : [Français](<https://sebastien.rigaux.be/veille/liens/react-preserver-le-progressive-enhancement-des-server-actions>) · [English](<https://sebastien.rigaux.be/en/tech-watch/links/react-preserve-progressive-enhancement-with-server-actions>)

[Back to tech watch](<https://sebastien.rigaux.be/en/tech-watch>)