https://github.com/quiibz/react-use-suspense
Lightweight useSuspense hook for React
https://github.com/quiibz/react-use-suspense
hook hooks react suspense
Last synced: about 2 months ago
JSON representation
Lightweight useSuspense hook for React
- Host: GitHub
- URL: https://github.com/quiibz/react-use-suspense
- Owner: QuiiBz
- License: mit
- Created: 2022-01-07T17:38:00.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-08T14:44:12.000Z (over 3 years ago)
- Last Synced: 2025-04-19T07:51:07.787Z (about 2 months ago)
- Topics: hook, hooks, react, suspense
- Language: TypeScript
- Homepage:
- Size: 69.3 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
react-use-suspense
Lightweight useSuspense hook for React
yarn add react-use-suspense
---
- [✨ Features](#-features)
- [🚀 Example](#-example)
- [📚 Documentation](#-documentation)
- [License](#license)
**react-use-suspense** provides a very simple and lightweight `useSuspense` hook to use the [Suspense](https://reactjs.org/docs/react-api.html#reactsuspense) API with any async function.
## ✨ Features
- **Suspense** for new versions of React
- **Dependency array** (like useEffect)
- **TypeScript** ready
- **Minimal** footprint (1kB gzipped)
## 🚀 Example
```tsx
function Component() {
const data = useSuspense('data', async () => {
// ...
return 'Hello world'
})
return
{data}
}
function App() {
return (
,
)
}
```
## 📚 Documentation
### Basics
Import the `useSuspense` hook from `react-use-suspense`. This hook accepts a key that must be unique to the data you want to fetch, and an async function that returns this data:
```tsx
import { useSuspense } from 'react-use-suspense'
function Component() {
const data = useSuspense('unique-key', async () => {
// ...
return 'Hello world'
})
}
```
When you need to use this component, simply wrap it inside a `Suspense` component and provide a `fallback` prop:
```tsx
function App() {
return (
,
)
}
```
### Dependency array
Similar as the `useEffect`, `useMemo`, `useCallback`... hooks, you can pass a third argument as known as a **dependency array**. Whenever one of the dependency in this array changes, the async function will re-run:
```tsx
function Component({ name }) {
const data = useSuspense('unique-key', async () => {
// ...
return 'Hello: ' + name
}, [name]) // Will trigger when name changes
}
```
### Options
As the fourth argument, you can pass an optionnal object of options:
#### `keepPreviousValue`
This option will make sure to not trigger a `Suspense` when the async function re-runs. This is the default behavior, and you can disable to always trigger a `Suspense`:
```tsx
const data = useSuspense('unique-key', async () => {
// ...
return 'Hello: ' + name
}, [name], {
keepPreviousValue: false
})
```
#### `equalFn`
You can provide a custom equality function that is used to compare old and new dependency arrays.
```tsx
const data = useSuspense('unique-key', async () => {
// ...
return 'Hello world'
}, [], {
// This is the default one
equalFn: (a, b) => JSON.stringify(a) === JSON.stringify(b)
})
```
Alternatively, you can update these options globally if you always want to have those behaviors:
```tsx
import { setKeepPreviousValue, setEqualFn } from 'react-use-suspense'
setKeepPreviousValue(false)
setEqualFn((a, b) => JSON.stringify(a) === JSON.stringify(b))
```
## License
[MIT](./LICENSE)