Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 24x 24x 11x 11x 11x 7x 7x 4x 4x 4x 24x 1x 24x 14x 14x 7x 7x 7x 5x 5x 2x 2x 2x 14x 1x 14x | import { useState, useCallback } from 'react'
export interface AsyncState<T> {
loading: boolean
error: Error | null
data: T | null
}
export interface UseAsyncReturn<T> extends AsyncState<T> {
execute: (promise: Promise<T>) => Promise<T>
reset: () => void
}
/**
* Hook for managing async operation state (loading, error, data).
*
* Provides a standardized pattern for handling async operations,
* replacing the common useState trio of loading/error/data.
*
* @example
* const { loading, error, data, execute } = useAsync<Recipe[]>()
*
* const loadRecipes = async () => {
* await execute(api.recipes.list())
* }
*
* if (loading) return <Spinner />
* if (error) return <ErrorMessage error={error} />
* return <RecipeList recipes={data} />
*/
export function useAsync<T>(): UseAsyncReturn<T> {
const [state, setState] = useState<AsyncState<T>>({
loading: false,
error: null,
data: null,
})
const execute = useCallback(async (promise: Promise<T>): Promise<T> => {
setState({ loading: true, error: null, data: null })
try {
const data = await promise
setState({ loading: false, error: null, data })
return data
} catch (error) {
const err = error instanceof Error ? error : new Error(String(error))
setState({ loading: false, error: err, data: null })
throw error
}
}, [])
const reset = useCallback(() => {
setState({ loading: false, error: null, data: null })
}, [])
return { ...state, execute, reset }
}
/**
* Hook variant that preserves previous data during loading.
*
* Useful for refresh/pagination where you want to show stale data
* while new data loads.
*
* @example
* const { loading, data, execute } = useAsyncWithStaleData<Recipe[]>()
*
* // `data` retains previous value during reload
* const refresh = () => execute(api.recipes.list())
*/
export function useAsyncWithStaleData<T>(): UseAsyncReturn<T> {
const [state, setState] = useState<AsyncState<T>>({
loading: false,
error: null,
data: null,
})
const execute = useCallback(async (promise: Promise<T>): Promise<T> => {
setState((prev) => ({ ...prev, loading: true, error: null }))
try {
const data = await promise
setState({ loading: false, error: null, data })
return data
} catch (error) {
const err = error instanceof Error ? error : new Error(String(error))
setState((prev) => ({ ...prev, loading: false, error: err }))
throw error
}
}, [])
const reset = useCallback(() => {
setState({ loading: false, error: null, data: null })
}, [])
return { ...state, execute, reset }
}
|