Encontrei uma maneira de armazenar em cache o buscador em useSWR usando useCallback no código-fonte do Gitroom.

A imagem acima é de platform-analytics/render.analytics.tsx. Vamos tentar entender esse trecho de código.

exploraremos como otimizar a busca de dados em seus aplicativos React usando o gancho useCallback em combinação com useSWR. Detalharemos o trecho de código fornecido e explicaremos por que armazenar em cache sua função de busca é importante.

Compreendendo o Código

Vamos mergulhar no código passo a passo:

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

Aqui, estamos definindo um carregamento de função assíncrona dentro de um gancho useCallback. Esta função busca dados de um endpoint especificado e trata do estado de carregamento. O gancho useCallback garante que esta função seja memorizada e recriada apenas quando as dependências (integração e data) mudam.

Em seguida, usamos useSWR para gerenciar a busca de dados:

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

Aqui, useSWR é configurado com uma chave (/analytics-${integration?.id}-${date}) e nossa função de carregamento memorizada. As opções de configuração controlam o comportamento de revalidação dos dados.

Como useCallback evita novas buscas desnecessárias

Para entender como useCallback evita novas buscas desnecessárias, precisamos nos aprofundar em como o React lida com referências de função e como useSWR funciona.

Referências de funções no React

No React, toda vez que um componente é renderizado novamente, todas as funções definidas nele são recriadas. Isso significa que sem useCallback, uma nova instância de sua função de carregamento seria criada em cada renderização.

Impacto no usoSWR

useSWR é uma biblioteca de busca de dados para React. Ele usa uma chave para identificar os dados e uma função de busca para buscá-los. useSWR depende da estabilidade da referência da função de busca. Se a referência mudar, useSWR poderá interpretar isso como um sinal de que os dados precisam ser buscados novamente, mesmo que a lógica real do buscador não tenha mudado.

Aqui está uma explicação detalhada:

1. Sem useCallback:

const load = async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
};

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

Nesse caso, cada renderização cria uma nova função de carregamento. useSWR vê uma referência de função diferente a cada vez, o que pode levar a novas buscas desnecessárias, mesmo quando a integração e a data não foram alteradas.

Com useCallback:

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

Ao agrupar a função load em useCallback, garantimos que ela só será recriada quando suas dependências (integração e data) mudarem. Essa estabilidade na referência da função informa ao useSWR que a função de busca não foi alterada, a menos que a integração ou a data sejam alteradas, evitando assim novas buscas desnecessárias.

Quer aprender como construir shadcn-ui/ui do zero? Confira construir do zero

Sobre mim:

Site: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

E-mail: [email protected]

Construa shadcn-ui/ui do zero

Referências:

1. https://github.com/gitroomhq/gitroom/blob/c03b96215fa30b267a97d7eafc2281f482a3192f/apps/frontend/src/components/platform-analytics/render.analytics.tsx#L25
2. https://github.com/search?q=repo:gitroomhq/gitroom useSWR&type=code
3. https://swr.vercel.app/docs/getting-started
4. https://react.dev/reference/react/useCallback