reactjsreact-state

Do 'Actions' in React 19 include synchronous transitions?


I recently read some documents and official blog posting about react 19, and got confused about exact definition of 'Actions'.

In official blog post 'Actions' is defined as below;

By convention, functions that use async transitions are called “Actions”

But in official documentation for useTransition, 'Actions' is defined as below;

Functions called in startTransition are called “Actions”.

What confuses me at this point is whether functions that use 'synchronous transitions', as shown below, can also be called 'Actions.'

const [searchQuery, setSearchQuery] = useState();
const [isPending, startTransition] = useTransition();

startTransition(() => {
  setSearchQuery(input);
});

Solution

  • Yes, normal synchronous Javascript functions (ie. ones without the async character) are valid actions. The blog post you're referring to is announcing that async functions are now supported, but regular function support wasn't removed.

    For instance, if you follow the link in the blog to the definition of useActionState you will see that it doesn't require an async function:

    fn: The function to be called when the form is submitted or button pressed. When the function is called, it will receive the previous state of the form (initially the initialState that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.