useLive()

Renderização assíncrona de mutações de dados disparadas remotamente.

useSuspense() + useSubscription() em um único hook.

useLive() reage às mutações de dados, rerrenderizando apenas quando necessário.

Uso

Ticker

AssetPrice

import { useLive } from '@data-client/react';
import NumberFlow from '@number-flow/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" />);

Resultado

Store▶

Comportamento

Dependências condicionais

Usar null como segundo argumento de qualquer hook do Data Client significa "não fazer nada."

// todo could be undefined if id is undefined
const todo = useLive(TodoResource.get, id ? { id } : null);

React Native

Ao usar o React Navigation, useLive() dispara fetches ao receber foco se os dados forem considerados desatualizados. useLive() também faz subscribe/unsubscribe com o foco/perda de foco, respectivamente.

Tipos

Type

function useLive(
  endpoint: ReadEndpoint,
  ...args: Parameters<typeof endpoint> | [null]
): Denormalize<typeof endpoint.schema>;

With Generics

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>;

Exemplos

Preço do Bitcoin (polling)

Quando nosso componente com useLive é renderizado, getTicker fará fetch a cada pollFrequency milissegundos.

Explore o exemplo nextjs

Abrir no StackBlitzVer código-fonte

Loading demo…

More Demos