Controlled Select Element Loses Value After Form Submission with useActionState

[youngdriversacademy]

Hi there,
I'm building a form—ideally using the useActionState server-action setup—that needs to persist its values during submissions. The problem is, I can't use the defaultValue prop on the element, because I need it to be a controlled component so I can update it dynamically on the client side. I tried making the controlled using local state, but then the server state doesn't apply correctly after submission. It just falls back to the initialState.

What can I do in this situation? Move to javascript query selectors? I left a very simple example of my problem below which also does not do what I want it to.

Form:

"use client";

import { useActionState, useEffect, useState } from "react";
import { saveFormData } from "./actions";

type FormState = {
  group: string;
};

const defaultState: FormState = {
  group: "Junior",
};

export default function FormExample() {
  const [state, formAction] = useActionState(saveFormData, defaultState);

  const [group, setGroup] = useState(state.group);

  useEffect(() => {
    setGroup(state.group);
  }, [state.group]);

  return (
    <form action={formAction}>
      <label>
        Group:
        <select
          name="group"
          value={group}
          onChange={(e) => setGroup(e.target.value)}
        >
          <option value="Mini">Mini (11–12)</option>
          <option value="Junior">Junior (12–14)</option>
          <option value="Senior">Senior (15+)</option>
        </select>
      </label>

      <button type="submit" className="btn">
        Submit
      </button>
    </form>
  );
}

Server action:

"use server";

export async function saveFormData(prevState: unknown, formData: FormData) {
  const group = String(formData.get("group"));

  console.log("group on server: ", group);
  
  // Persist values here (e.g., database, cookies, etc.)
  return { group };
}

[GaneshVarma1]

Hi @youngdriversacademy

This issue occurs because useActionState updates the state after form submission, but your useState hook doesn’t sync correctly with it by default — causing the controlled <select> to reset or flicker.

---

Problem Summary

• You’re using useState(group) to control the select input.
• After form submission, useActionState returns the new state from the server (state.group), but your local state (group) doesn’t update correctly.
• This creates a mismatch between the controlled input and server-updated values.

---

✅ Fix 1: Sync State with useEffect Safely

Update your useEffect to sync group only when it's different:

useEffect(() => {
  if (state.group !== group) {
    setGroup(state.group);
  }
}, [state.group]);

This avoids infinite loops and ensures your select value reflects the new server state after submission.

---

✅ Fix 2: Controlled-on-Client, Initialized-from-Server

If you want full control on the client, but initialize from server state only once:

const [group, setGroup] = useState<string>("");

useEffect(() => {
  if (group === "" && state.group) {
    setGroup(state.group);
  }
}, [state.group]);

This treats the input as client-controlled but uses state.group only as the initial value after server updates.

---

Why This Happens

• useActionState returns a new object each time you submit the form.
• Your component re-renders with the new state, but useState does not reinitialize unless told to.
• Since you're using a controlled <select>, its value must be kept in sync manually with new props/state.

---

✅ Final Working Example

"use client";

import { useActionState, useEffect, useState } from "react";
import { saveFormData } from "./actions";

type FormState = {
  group: string;
};

const defaultState: FormState = {
  group: "Junior",
};

export default function FormExample() {
  const [state, formAction] = useActionState(saveFormData, defaultState);
  const [group, setGroup] = useState(state.group);

  useEffect(() => {
    if (state.group !== group) {
      setGroup(state.group);
    }
  }, [state.group]);

  return (
    <form action={formAction}>
      <label>
        Group:
        <select
          name="group"
          value={group}
          onChange={(e) => setGroup(e.target.value)}
        >
          <option value="Mini">Mini (11–12)</option>
          <option value="Junior">Junior (12–14)</option>
          <option value="Senior">Senior (15+)</option>
        </select>
      </label>

      <button type="submit">Submit</button>
    </form>
  );
}

[youngdriversacademy]

Does it really work for you? I tested all of your options, and doesn't matter what I option I submit, it always flickers and goes back to the first option (Mini).
The server state returns the correct value, but the form still displays the first option by default. As a result, when the user submits the form again, it submits the incorrect (Mini) option.

I also thought a simple useEffect could do the job and I spent 4 miserable hours with chatGPT and v0 yesterday and couldn't find a solution which is why I came here.

[icyJoseph]

Hi,

There's a bug with the select input not opting out from form reset behavior.

• [React 19] Controlled <select> component is subject to automatic form reset facebook/react#30580
• [React 19] allow opting out of automatic form reset when Form Actions are used facebook/react#29034

I found a hack on that thread though:

        <select
          key={state.group}
          name="group"
          defaultValue={state.group}
          onChange={(e) => setGroup(e.target.value)}
        >

Using key and defaultValue works because, the key change destroys the component identity - https://react.dev/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key

[devdogfish]

Thanks Joseph,
Wow that is really annoying - I hope it will be fixed soon. Your example works only with the server-state, but when still update the client use-state state, the change still doesn't get reflected in the <select>. This was the reason I wanted to make it controlled in the first place

Can you provide me with another workaround? Thank you very much

[icyJoseph]

As they list in those threads, it is probably best to go with onSubmit for now, and avoid hacks and workarounds, onSubmit is still a valid way to do this ~ x-ref to that bug on a comment on your implementation, so that at some point you can update it.

• Look at this comment: [React 19] allow opting out of automatic form reset when Form Actions are used facebook/react#29034 (comment)

[devdogfish]

Okay I now just keep a regular useState for the serverState and a pending state, and I set those accordingly in the handleSubmit function. Is there a better way to do this?

In your linked comment the guy uses useTransition but then I can't display the response.

Should I mark this discussion answered?

[icyJoseph]

function handleSubmit(event) {
  event.preventDefault();
  const formData = new FormData(event.target);
  startTransition(async () => { 
       const data =  await action(formData);
       setState(/* */)
   });
}

Shouldn't something like that work? It is pseudo-code kind of though

Should probably mark as answered, although, to be honest, I am also a bit unsatisfied - it is what it is though -