I have a simple React app.

It has one checkbox.

The checkbox value is sent to the server, which validates the value and sends a response. The response should update the React form state. In the simplified example below, the "server" just "echoes" the checkbox value.

Here is code:

import React, { useActionState, useEffect, useState } from "react";

async function handle(
  currState: boolean,
  queryData: FormData
): Promise<boolean> {
  // emulate server validation
  const response = await (async () => {
    await new Promise((resolve) => {
      setTimeout(resolve, 500);
    });
    return queryData.get("foo") === "on";
  })();
  return response;
}

function Checkbox({ state }: { state: boolean }): React.JSX.Element {
  const [value, setValue] = useState(state);
  useEffect(() => {
    if (typeof state === "boolean") {
      setValue(state);
    }
  }, [state]);
  return (
    <>
      <label htmlFor="foo-id">Foo</label>
      <input
        id="foo-id"
        type="checkbox"
        checked={value}
        onChange={() => {
          setValue(!value);
        }}
        name="foo"
      />
    </>
  );
}

function App(): React.JSX.Element {
  const [formState, formAction, isPending] = useActionState(handle, true);

  return (
    <div>
      <form action={formAction} noValidate>
        <Checkbox state={formState} />
        <button style={{ display: "block" }} disabled={isPending} type="submit">
          Send
        </button>
      </form>
    </div>
  );
}

export default App;

Here is working example

When the checkbox is checked and the "server" responds with true, everything works fine. The checkbox stays checked.

But why, when I uncheck the checkbox, then click the send button, does the checkbox automatically get checked again, even if the "server" responds with false?

I have no idea why it behaves this way.

I have a simple React app.

It has one checkbox.

The checkbox value is sent to the server, which validates the value and sends a response. The response should update the React form state. In the simplified example below, the "server" just "echoes" the checkbox value.

Here is code:

import React, { useActionState, useEffect, useState } from "react";

async function handle(
  currState: boolean,
  queryData: FormData
): Promise<boolean> {
  // emulate server validation
  const response = await (async () => {
    await new Promise((resolve) => {
      setTimeout(resolve, 500);
    });
    return queryData.get("foo") === "on";
  })();
  return response;
}

function Checkbox({ state }: { state: boolean }): React.JSX.Element {
  const [value, setValue] = useState(state);
  useEffect(() => {
    if (typeof state === "boolean") {
      setValue(state);
    }
  }, [state]);
  return (
    <>
      <label htmlFor="foo-id">Foo</label>
      <input
        id="foo-id"
        type="checkbox"
        checked={value}
        onChange={() => {
          setValue(!value);
        }}
        name="foo"
      />
    </>
  );
}

function App(): React.JSX.Element {
  const [formState, formAction, isPending] = useActionState(handle, true);

  return (
    <div>
      <form action={formAction} noValidate>
        <Checkbox state={formState} />
        <button style={{ display: "block" }} disabled={isPending} type="submit">
          Send
        </button>
      </form>
    </div>
  );
}

export default App;

Here is working example https://codesandbox.io/p/sandbox/8dsr6y

When the checkbox is checked and the "server" responds with true, everything works fine. The checkbox stays checked.

But why, when I uncheck the checkbox, then click the send button, does the checkbox automatically get checked again, even if the "server" responds with false?

I have no idea why it behaves this way.

• javascript
• reactjs

• 1 I would recommend removing the local state from the checkbox and using defaultChecked={state} instead. – evolutionxbox Commented Mar 24 at 14:59

1 Answer 1

I believe this is a bug with React, that the controlled checkbox and select gets reset when the form is submitted with the action prop.

You can avoid automatic form reset by calling your action inside a startTransition in the form onSubmit callback.

Working code

<form
    onSubmit={(event) => {
    event.preventDefault();
    const form = event.currentTarget;
        startTransition(() => {
            formAction(new FormData(form));
        });
    }}
    noValidate
    >
    <Checkbox state={formState} />
    <button style={{ display: "block" }} disabled={isPending type="submit">Send</button>
</form>