---
title: React - Request Lifecycle
sidebar_label: Request Lifecycle
---

# Request Lifecycle

In each application, it is extremely important to respond appropriately during the lifecycle request. We need to display
the appropriate messages, changes, mutations regarding the state of components, and so on. So-called helper hooks help
us in this. In this way, we can connect to the most important moments of the request, from its initiation, through
progress, to receiving a response.

---

## Example

```tsx
const {
  data,
  error,
  loading,
  onRequestStart,
  onResponseStart,
  onSuccess,
  onError,
  onDownloadProgress,
  onUploadProgress,
  onFinished,
  onAbort,
  onOffline,
} = useFetch(getUsers);

onRequestStart(({ details, request }) => {
  // Do something on query start
});

onResponseStart(({ response, details, request }) => {
  // Do something when query starts returning response
});

onSuccess(({ response, details, request }) => {
  // Do something on query success
});

onError(({ response, details, request }) => {
  // Do something on query fail
});

onAbort(({ response, details, request }) => {
  // Do something on query cancelation
});

onOffline(({ response, details, request }) => {
  // Do something when query goes stale while offline
});

onFinished(({ response, details, request }) => {
  // Do something on query finished (success or false)
});

onUploadProgress(({ progress, sizeLeft, timeLeft, total, loaded }) => {
  // Do something on upload
});

onDownloadProgress(({ progress, sizeLeft, timeLeft, total, loaded }) => {
  // Do something on download
});
```
