[React 19] Can't use useActionState (NextJS)

[fernandortec]

I get this error, trying to useActionState in React19 and NextJS, I followed the documentation and tried using several approaches, but none worked, here's the code and the React Version below

"use client";

import { useActionState } from "react";
import * as S from "./styles";

interface PurchaseFormProps {
	priceId: string;
}

export function PurchaseForm({ priceId }: PurchaseFormProps): JSX.Element {
	const [state, formAction] = useActionState(() => {}, null);

	return (
		<form className={S.form}>
			<button className={S.formButton} type="submit" disabled={true}>
				Comprar agora
			</button>
		</form>
	);
}

"react": "^19.0.0-beta-e7d213dfb0-20240507", "react-dom": "^19.0.0-beta-1beb73de0f-20240503",

[rickhanlonii]

Next vendors React so you can't install your own version of React, it forces you to use the vendor version. Next will add React 19 to a future release.

[ph1p]

I completely understand the confusion as I received the same error today. This is a little bit misleading as nextjs uses these functions without any context in the examples https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#examples

Or am I missing something?

@fernandortec you can use useFormState from react-dom. This will later be removed and replaced by useActionState.

actions

"use server";

export async function submitForm(previousState, formData) {
  return {
      name: formData.get("name"),
  }
}

form component

"use client";

import { useFormState } from "react-dom";

// ...
const [state, formAction] = useFormState(submitForm, {
  name: "",
});

// ...
<form action={formAction}>
  <label htmlFor="name">Name</label>
  <input type="text" name="name" />
  <button type="submit">submit</button>
</form>
// ...

[eps1lon]

next@14.3.0-canary.45 should have support for React.useActionState

[PolyagaDev]

Je comprends parfaitement la confusion car j'ai reçu la même erreur aujourd'hui. C'est un peu trompeur car nextjs utilise ces fonctions sans aucun contexte dans les exemples https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#examples

Ou est-ce que j'ai raté quelque chose ?

@fernandortecvous pouvez utiliser useFormStateà partir de react-dom. Celui-ci sera ensuite supprimé et remplacé par useActionState.

Actions

"use server";

export async function submitForm(previousState, formData) {
  return {
      name: formData.get("name"),
  }
}

composant de formulaire

"use client";

import { useFormState } from "react-dom";

// ...
const [state, formAction] = useFormState(submitForm, {
  name: "",
});

// ...
<form action={formAction}>
  <label htmlFor="name">Name</label>
  <input type="text" name="name" />
  <button type="submit">submit</button>
</form>
// ...

have you found a solution? Next makes me use useActionState which is literally nowhere to be found in my 'react' folder. I have version 19.0.0 of react with the latest version of next.js but nothing works.

[gabbas5]

I am also in the same state and cannot use "useActionState" hook, I am trying to find out alternate solution.I don't know why they have mentioned this and not tested its working with nextjs 14

[MarcGruener]

@gabbas5 as @ph1p suggests, you should be able to simply replace
import { useActionState } from 'react';
with
import { useFormState } from 'react-dom';

[smolpaw]

@gabbas5 as @ph1p suggests, you should be able to simply replace import { useActionState } from 'react'; with import { useFormState } from 'react-dom';

This worked and the build passed. However it results in this error during development

Warning: ReactDOM.useFormState has been renamed to React.useActionState. Please update EditInvoiceForm to use React.useActionState.

[riccardolardi]

Is there any approx release date for React 19 and Next.js allowing to use useActionState ?