Entendendo o SWR

Máquina de Estado

useSWR retorna data, error, isLoading e isValidating dependendo do estado da função fetcher. Esses diagramas descrevem como o SWR retorna valores em alguns cenários.

Obter e Revalidar

Esse padrão é para obter dados e revalidar depois.

Mudança de Chave

Esse padrão é para obter dados, mudar a chave, e revalidar depois.

i

Mudança de Chave + Dados Antigos

Esse padrão é para obter dados, mudar a chave e revalidar depois usando a opção keepPreviousData.

Fallback

Esse padrão é para obter dados e revalidar depois usando dados de fallback.

Mudança de Chave + Fallback

Esse padrão é para obter dados, mudar a chave e revalidar depois com dados de fallback.

Mudança de Chave + Dados Antigos + Fallback

Esse padrão é para obter dados, mudar a chave, revalidar depois usando a opção keepPreviousData e com dados de fallback.

Combinando com isLoading e isValidating para melhorar a UX

Comparado com o valor existente de isValidating, isLoading é uma nova propriedade que pode te ajudar para os casos de carregamento mais gerais para UX.

• isValidating se torna true toda vez que há um requisição em andamento independente se os dados foram carregados ou não
• isLoading se torna true quando há uma requisiçãoo em andamento e os dados ainda não foram carregados.

Simplesmente dizendo que você pode usar isValidating para indicar toda vez que há uma requisição em andamento e isLoading para indicar que o SWR está revalidando mas ainda não há dados para exibir.

function Stock() {
  const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher, {
    refreshInterval: 3000
  });
 
  // Se ainda estiver carregando os dados iniciais, não há nada para exibir.
  // Iremos retornar um skeleton aqui.
  if (isLoading) return <div className="skeleton" />;
 
  // Se não, exibiremos os dados e um spinner que indica a revalidação
  //em segundo plano.
  return (
    <>
      <div>${data}</div>
      {isValidating ? <div className="spinner" /> : null}
    </>
  );
}

Você pode achar o código de exemplo aqui (opens in a new tab)

Retorne dados antigos para melhorar a UX

Quando estiver obtendo dados baseado em ações contínuas do usuário, como por exemplo, pesquisa em tempo real enquanto digita, manter os últimos dados obtidos pode melhorar bastante a UX. keepPreviousData é uma opção para habilitar esse comportamento. Aqui está uma UI de pesquisa simples:

function Search() {
  const [search, setSearch] = React.useState('');
 
  const { data, isLoading } = useSWR(`/search?q=${search}`, fetcher, {
    keepPreviousData: true
  });
 
  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Pesquisar..."
      />
 
      <div className={isLoading ? "loading" : ""}>
        {data?.products.map(item => <Product key={item.id} name={item.name} />)
      </div>
    </div>
  );
}

Com o keepPreviousData habilitado, você ainda obterá os dados antigos mesmo se você mudar a chave do SWR e a data com a chave nova começar a carregar denovo.

Você pode achar o código completo para esse exemplo aqui: (https://codesandbox.io/s/swr-keeppreviousdata-fsjz3m (opens in a new tab)).

Coleção de Dependência para performance

SWR apenas aciona a nova renderização quando os estados usados no componente forem atualizados. Se você apenas usar data no componente, o SWR irá ignorar as atualizações das outras propriedades como isValidating e isLoading. Isso reduz bastante o número de renderizações. Mais informações podem ser encontradas aqui.