Pular para o conteúdo principal

useSubscription()

Ótimo para manter recursos atualizados quando eles mudam com frequência.

Ao usar as assinaturas de polling padrão, a frequência deve ser definida no Endpoint; caso contrário, não terá nenhum efeito.

dica

useLive() é uma forma mais concisa de usar em combinação com useSuspense(),

Uso​

api/Price
import { RestEndpoint, Entity } from '@data-client/rest';

export class Price extends Entity {
  symbol = '';
  price = '0.0';
  // ...

  pk() {
    return this.symbol;
  }
}

export const getPrice = new RestEndpoint({
  urlPrefix: 'http://test.com',
  path: '/price/:symbol',
  schema: Price,
  pollFrequency: 5000,
});
MasterPrice
import { useSuspense, useSubscription } from '@data-client/react';
import { getPrice } from 'api/Price';

function MasterPrice({ symbol }: { symbol: string }) {
  const price = useSuspense(getPrice, { symbol });
  useSubscription(getPrice, { symbol });
  // ...
}

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 = useSubscription(TodoResource.get, id ? { id } : null);
React Native

Ao usar o React Navigation, useSubscription() assina e cancela a assinatura quando a tela ganha e perde o foco, respectivamente.

Tipos​

function useSubscription(
  endpoint: ReadEndpoint,
  ...args: Parameters<typeof endpoint> | [null]
): void;

Exemplos​

Assinar apenas enquanto o elemento está visível​

MasterPrice.tsx
import { useIntersectionObserver } from '@uidotdev/usehooks';
import { useSuspense, useSubscription } from '@data-client/react';
import { getPrice } from 'api/Price';

function MasterPrice({ symbol }: { symbol: string }) {
  const price = useSuspense(getPrice, { symbol });
  const [ref, entry] = useIntersectionObserver();
  // null params means don't subscribe
  useSubscription(getPrice, entry?.isIntersecting ? { symbol } : null);

  return <div ref={ref}>{price.price}</div>;
}

Quando null é enviado como segundo argumento, a assinatura é desativada. Claro que, se outros componentes ainda estiverem inscritos, as atualizações dos dados continuarão ativas.

useIntersectionObserver() usa o IntersectionObserver, que tem ótimo desempenho. O ref nos permite acessar o DOM.

Preços de criptomoedas (websockets)​

Implementamos nosso próprio StreamManager para tratar nosso protocolo de websocket personalizado. Aqui escutamos as actions de subscribe/unsubscribe enviadas pelo useSubscription para garantir que só escutemos atualizações dos componentes que estão renderizados.

Explore o exemplo coin-app

Abrir no StackBlitzVer código-fonte

More Demos