useLive()
Async rendering of remotely triggered data mutations.
useSuspense() + useSubscription() in one hook.
useLive() is reactive to data mutations; rerendering only when necessary.
Usage
Ticker
AssetPrice
import { useLive } from '@data-client/react'; import { getTicker } from './Ticker'; function AssetPrice({ productId }: Props) { const ticker = useLive(getTicker, { productId }); return ( <center> {productId}{' '} <NumberFlow value={ticker.price} format={{ style: 'currency', currency: 'USD' }} /> </center> ); } interface Props { productId: string; } render(<AssetPrice productId="BTC-USD" />);
🔴 Live Preview
Store▶
Behavior
Conditional Dependencies
Use null as the second argument to any Data Client hook means "do nothing."
// todo could be undefined if id is undefined
const todo = useLive(TodoResource.get, id ? { id } : null);
React Native
When using React Navigation, useLive() will trigger fetches on focus if the data is considered stale. useLive() will also sub/unsub with focus/unfocus respectively.
Types
- Type
- With Generics
function useLive(
endpoint: ReadEndpoint,
...args: Parameters<typeof endpoint> | [null]
): Denormalize<typeof endpoint.schema>;
function useLive<
E extends EndpointInterface<
FetchFunction,
Schema | undefined,
undefined
>,
Args extends readonly [...Parameters<E>] | readonly [null],
>(
endpoint: E,
...args: Args
): E['schema'] extends Exclude<Schema, null>
? Denormalize<E['schema']>
: ReturnType<E>;
Examples
Bitcoin Price (polling)
When our component with useLive is rendered, getTicker will fetch at pollFrequency miliseconds.