react-hook-action is a lightweight React hook for managing asynchronous actions and their loading states, safely resolving promises and globally persisting states using Zustand.

• Installation
• Usage
• Documentation
• Contributing
• License

📦 Installation

npm install react-hook-action

pnpm

pnpm install react-hook-action

yarn

yarn add react-hook-action

📖 Usage

Basic Usage

Wrap any asynchronous function to automatically manage isLoading, result, and error states.

import { useAction } from 'react-hook-action';

export default function Page() {
  const { result, error, isLoading, dispatch, reset } = useAction(
    'fetchUser',
    async (id: number) => {
      const response = await fetch(`https://api.example.com/users/${id}`);
      if (!response.ok) throw new Error('Failed to fetch user');
      return response.json();
    }
  );

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {result && <div>User: {result.name}</div>}
      <button onClick={() => dispatch(1)}>Fetch User</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Initial Result

You can provide an initial result to bypass loading states when data is already available.

const { result, dispatch } = useAction('fetchSettings', fetchSettingsFn, {
  initialResult: { theme: 'dark', notifications: true },
});

Ignoring Errors

If you want to silently fail and ignore any errors thrown by the action, use ignoreErrors. This will prevent the error state from being updated.

const { dispatch } = useAction('analyticsPing', sendAnalytics, {
  ignoreErrors: true,
});

Error Callbacks

Easily handle side-effects cleanly with the onError callback when an action fails.

const { dispatch } = useAction('saveData', saveDataFn, {
  onError: (error) => {
    toast.error(`Save failed: ${error.message}`);
  },
});

📚 Documentation

For all configuration options, please see the API docs.

🤝 Contributing

Want to contribute? Awesome! To show your support is to star the project, or to raise issues on GitHub.

Thanks again for your support, it is much appreciated! 🙏

License

MIT © Shahrad Elahi and contributors.