React Hook to Execute and Watch Async Function

React Hook to Execute and Watch Async Function

react-async-watcher: React hook to execute and watch async function. This package is made for handle asynchronous tasks, such as backend API calls. Execute async function whenever and whatever you want. Provide execution status and result. Typescript support. super tiny

react-async-watcher

React hook to execute and watch async function

Introduction

This package is made for handle asynchronous tasks, such as backend api calls.

  • execute async function whenever and whatever you want
  • provide execution status and result
  • typescript support
  • super tiny

Quick Start

import { useAsyncWatcher } from 'react-async-watcher';

const GetUsersButton = () => {
  const { execute, reset, status, result, error } = useAsyncWatcher();

  return (
    <button
      onClick={() => {
        execute(async () => {
          // fetch remote data
          const data = await getUsersApi();

          // you may want to post-process data, use redux dispatch and so on

          // if return data, result variable will be filled with the data
          return data;
        })
      }}
    >
      Get User List
    </button>
  );
}

Live Demo

Usage

Inside your React or React-Native project directory, run the following command:

yarn add react-async-watcher

or with npm

npm install react-async-watcher

API

const { execute, reset, status, result, error } = useAsyncWatcher();
useAsyncWatcher

You can pass type to useAsyncWatcher, eq: useAsyncWatcher(), then type of result will be number | undefined

execute
execute(async () => {
  // do whatever you want

  // if your need to render some data
  // return it, then result variable will hold the data
})
reset

use it to clear status, result, error

status
"initial" | "loading" | "success" | "failure";

Download Details:

Author: xralphack Live Demo: View The Demo Download Link: Download The Source Code Official Website: https://github.com/xralphack/react-async-watcher License: MIT

react javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How to Select and Hire the Best React JS and React Native Developers?

Hire React JS developer from Technoduce, we have a team of experienced and expert Angular JS developer. With our hire React JS developer, you have complete control over the technical resource throughout the development process.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Top VSCode Extensions for React, React Native, JavaScript and Productivity

Bunch of VSCode Extensions that improve quality of your coding time no matter what stack you are using. In this post, you'll see Top VSCode Extensions for React, React Native, JavaScript and Productivity

React cloneElement: A Better Way to Build a Component API Props in ES6 Javascript and Ts

Using the React cloneElement is a better way to build a component API props in ES6 Javascript and Typescript. Here's a tutorial on how to do so.