Overview

The useAction hook is a powerful utility for handling asynchronous actions in React applications. It provides a convenient way to manage pending states, errors, and data responses while executing actions defined with createAction.

Overview

The useAction hook can be used in two main ways:

1. Form Usage: Handle form submissions and manage form-specific errors.
2. Advanced Usage: Execute actions directly with more control over the input.

For detailed information on the hook's parameters, return values, and types, see the API Reference.

Quick Example

Here's a simple example of how to use useAction with a form:

import { useAction } from '@vergestack/api-react';
import { greetingAction } from './actions';
 
export function GreetingComponent() {
  const { data, errors, handlers } = useAction(greetingAction);
 
  return (
    <>
      <form {...handlers}>
        <input name="name" />
        <button type="submit">Greet</button>
      </form>
 
      {data && <p>Data: {data}</p>}
      {errors && <p>Errors: {errors.join(', ')}</p>}
    </>
  );
}

The {...handlers} syntax provides progressive enhancement - your form will work even if JavaScript is disabled, while enabling enhanced client-side features when JavaScript is available.

For more detailed examples and usage patterns, check out the Form Usage and Advanced Usage guides.