Bug: useFormStatus pending state is reset when component state is updated #30368

jatwood · 2024-07-18T01:59:20Z

If you have a component that relies on the pending return value of useFormStatus, the pending state will incorrectly reset to false if the component is updated due to a useState update. This does not happen if the useState hook is placed in a child component.

React version: 19.0.0-rc-512b09b2-20240718

Steps To Reproduce

codesandbox.io/p/sandbox/react-useformstatus-pending-reset-on-unrelated-state-update-m59zw8

Create a react app that uses form actions (this uses NextJS starter code)
Have the form action delay for a set period of time before resolving
Create a child component that uses useFormStatus().pending. Have the component also use a useState hook that updates on an interval using useEffect.
Place this child component as a child of the <form /> element
Verify that useFormStatus().pending is reset to false as soon as a call to setState happns

Example component


export default function SubmissionState() {
  const formStatus = useFormStatus();
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    const id = setTimeout(() => {
      if (!formStatus.pending) {
        setCounter(0);
        return;
      }
      setCounter(counter + 1);
    }, 1000);
    return () => clearTimeout(id);
  }, [counter, formStatus.pending]);
  return (
    <div>
      {formStatus.pending ? `Pending for ${counter} seconds` : "Not pending"}
    </div>
  );
}

this example works as expected, useFormStatus().pending state matches the server actions state

function SubmissionStateBody({ pending }: { pending: boolean }) {
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    if (!pending) {
      setCounter(0);
      return;
    }
    const id = setTimeout(() => {
      setCounter(counter + 1);
    }, 1000);
    return () => clearTimeout(id);
  }, [counter, pending]);
  return (
    <div>{pending ? `Pending for ${counter} seconds` : "Not pending"}</div>
  );
}

export default function SubmissionStateCorrect() {
  const formStatus = useFormStatus();
  return <SubmissionStateBody pending={formStatus.pending} />;
}

Link to code example:

Github repro using nextjs starter template

The current behavior

The UI shows the submission as pending for the length of the server action.

The expected behavior

The UI shows the submission as not-pending as soon as the counter is updated.

The text was updated successfully, but these errors were encountered:

Aman37773 · 2024-07-19T10:29:07Z

Basically, if you want it to show status as not-pending once counter is updated then create another state variable(lets say pendinggg) whose initial value is same as that of pending and you immediately have to set pendinggg as false once counter is updated and inside useeffect have a condition that once pending is false then not to re-run the useeffect.

import React, { useState, useEffect } from 'react';
const useFormStatus = () => {
return { pending: true }; // Example status, replace with actual implementation
};
function SubmissionStateBody({pending}) {
const [counter, setCounter] = useState(0);
const [localPending, setLocalPending] = useState(pending);
useEffect(() => {
let id;
if (localPending) {
id = setTimeout(() => {
setCounter((prevCounter) => prevCounter + 1);
setLocalPending(false); // Stop showing pending as soon as the counter updates
}, 1000);
} else {
setCounter(0);
}

return () => clearTimeout(id);

}, [localPending, counter]);

return

{localPending ? Pending for ${counter} seconds : 'Not pending'}

;
}

export default function SubmissionStateCorrect() {
const formStatus = useFormStatus();
return ;
}
thats the code
here once counter updates, status becomes not pending..

jatwood · 2024-07-19T17:08:10Z

@Aman37773 This issue is about a bug< 8000 code class="notranslate">useFormStatus which is a hook in react-dom.

eps1lon · 2024-07-22T13:48:35Z

Can be reproduced with latest RC and just Client Actions: https://codesandbox.io/p/sandbox/react-useformstatus-pending-reset-on-unrelated-state-update-m59zw8

ujshaikh · 2024-08-01T07:40:17Z

@eps1lon
I would like to pick this bug, can you please assign it to me?

eps1lon · 2024-08-01T14:53:04Z

@ujshaikh We don't assign people to issues since they might stop working on the issue and then it looks like the issue is still being worked on. Assigning issues hasn't helped us manage issues. We just recommend to people start working on a bug immediately.

lopesmartinz · 2024-10-28T09:58:59Z

Any news on this topic? I recently started using React 19 RC as part of the upgrade of Next.js to v15 and I'm facing this issue in most places where I'm using useFormStatus. If we don't get a fix for this issue I'll have to think of getting rid of useFormStatus and replace it with a custom solution.

yudistiraashadi · 2024-12-13T10:20:15Z

Hi. I still have this bug on the stable React 19.0.1

Kreynux · 2025-02-05T14:47:59Z

I have a similar issue.
"pending" does not work if a child-component updates its own state (useState), and the form is submitted without that child-component being rerendering at least once before submitting (you initiate the form and submit right away). I printed the value of pending to the console log and It looks like pending becomes true but changes back to false immediately (before submit action is finished).

This code (from a child component in a form) breaks pending from useFormStatus:

const [error, setError] = useState("")

  useEffect(() => {
    validate(inputRef.current)
  }, [])

  const validate = (target?: HTMLInputElementRef | null) => {
    if (target?.validity.valueMissing) {
      setError(emptyTextReferenceError)
    } else if (target?.validity.patternMismatch) {
      setError(shortTextReferenceError)
    } else {
      setError("")
    }
  }

It works if if comment out setError or if I change from useEffect to useLayoutEffect.
It also work if the input gets rerender at least once before submitting.

redbmk · 2025-03-20T16:54:08Z

@eps1lon Any chance you'd be able to take a look at @vordgi's PR, #30718? This bug still exists in the latest canary build (updated fork of your codesandbox) and is preventing me from being able to update to NextJS 15 and React 19. It looks like a pretty simple fix and there's a test included, but the PR went stale.

I'm not able to get the workaround @jatwood mentioned to work either. This also likely is the root cause of #31363 considering any non-native select component is likely to make state changes.

rwieruch · 2025-04-23T11:04:48Z

I can confirm that this bug exists. My workaround at the moment is using useActionState's pending state instead. But it would be great to get useFormStatus stay stable.

jatwood added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Jul 18, 2024

jatwood changed the title ~~Bug: useFormStatus pending state reset component is when component state is updated~~ Bug: useFormStatus pending state is reset when component state is updated Jul 18, 2024

eps1lon added Type: Bug React 19 and removed Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug labels Jul 22, 2024

vordgi mentioned this issue Aug 16, 2024

fix form state reset when component state is updated #30718

redbmk mentioned this issue Mar 20, 2025

[React 19] useFormStatus() pending doesn't work with Select component #31363

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug: useFormStatus pending state is reset when component state is updated #30368

Bug: useFormStatus pending state is reset when component state is updated #30368

Bug: useFormStatus pending state is reset when component state is updated #30368

Bug: useFormStatus pending state is reset when component state is updated #30368

Comments

Steps To Reproduce

The current behavior

The expected behavior