useLive()

Renderizado asíncrono de mutaciones de datos activadas de forma remota.

useSuspense() + useSubscription() en un solo hook.

useLive() reacciona a las mutaciones de datos; vuelve a renderizar solo cuando es necesario.

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▶

Comportamiento

Dependencias condicionales

Usar null como segundo argumento de cualquier hook de Data Client significa "no hacer nada".

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

React Native

Al usar React Navigation, useLive() activará las peticiones al recibir el foco si los datos se consideran obsoletos. useLive() también se suscribirá y cancelará la suscripción con el foco y la pérdida 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>;

Ejemplos

Precio de Bitcoin (sondeo)

Cuando se renderiza nuestro componente con useLive, getTicker obtendrá los datos cada pollFrequency milisegundos.

Explora el ejemplo nextjs

Abrir en StackBlitzVer código fuente

Loading demo…

More Demos