I'm learning new features in React@19, I found that the new hook useActionState is similar to useReducer, and action can be an async function. So I tested this hook in this code:

import React, { startTransition, useActionState } from 'react';

const doAsyncOperation = () => new Promise<number>((resolve) => setTimeout(() => resolve(Math.random()), 1000));

const addRandomReducer = async (state: number, multiply: number) => {
  const value = await doAsyncOperation();
  return state + value * multiply;
};

const TestActionState: React.FC = () => {
  const [state, addRandom, loading] = useActionState(addRandomReducer, 0);

  const handleClick = () => {
    startTransition(() => {
      addRandom(3);
    });
  };

  return (
    <>
      {state}
      <button onClick={handleClick} disabled={loading}>add 0~3</button>
      {loading && 'loading...'}
    </>
  );
};

It works fine. I'm curious why it looks like it's just designed for <form> in the API Reference? Is my test code a correct way to use it?

I'm learning new features in React@19, I found that the new hook useActionState is similar to useReducer, and action can be an async function. So I tested this hook in this code:

import React, { startTransition, useActionState } from 'react';

const doAsyncOperation = () => new Promise<number>((resolve) => setTimeout(() => resolve(Math.random()), 1000));

const addRandomReducer = async (state: number, multiply: number) => {
  const value = await doAsyncOperation();
  return state + value * multiply;
};

const TestActionState: React.FC = () => {
  const [state, addRandom, loading] = useActionState(addRandomReducer, 0);

  const handleClick = () => {
    startTransition(() => {
      addRandom(3);
    });
  };

  return (
    <>
      {state}
      <button onClick={handleClick} disabled={loading}>add 0~3</button>
      {loading && 'loading...'}
    </>
  );
};

It works fine. I'm curious why it looks like it's just designed for <form> in the API Reference? Is my test code a correct way to use it?

• reactjs

1 Answer 1

That's right.You can check this page from React website. https://react.dev/reference/react/useActionState And there is an example to introduce the hook