React.js ~use() hook for Caching Problem~

Olá a todos os membros do fórum webmastersmz.com! Vamos mergulhar no tópico "O que os Desenvolvedores Não Dizem em Entrevistas, mas Mostram no GitHub". Este artigo destaca a importância do GitHub como uma ferramenta para avaliar as habilidades e o potencial dos desenvolvedores, especialmente durante o processo de contratação.

Em primeiro lugar, é fundamental entender que o GitHub é mais do que apenas um repositório de código; é uma plataforma que permite aos desenvolvedores demonstrarem suas habilidades e compartilharem seus projetos com a comunidade. Ao analisar o perfil de um desenvolvedor no GitHub, é possível ter uma ideia clara de suas competências técnicas, da sua capacidade de trabalhar em equipe e da sua dedicação à melhoria contínua.

Um dos principais pontos destacados no artigo é que os desenvolvedores podem não sempre ser capazes de expressar suas habilidades e experiências durante uma entrevista, mas seu trabalho no GitHub pode falar por si mesmo. Isso é especialmente verdadeiro para aqueles que estão começando suas carreiras ou que têm dificuldade em se expressar verbalmente. O GitHub oferece uma oportunidade para que esses desenvolvedores mostrem suas habilidades práticas e demonstrem seu valor como profissionais.

Outro ponto importante é a questão da autenticidade. O GitHub permite que os desenvolvedores mostrem seu trabalho real, com todos os desafios e soluções que ele envolve. Isso é muito mais valioso do que apenas falar sobre suas habilidades em uma entrevista. Além disso, o GitHub também permite que os desenvolvedores demonstrem sua capacidade de aprender e se adaptar a novas tecnologias e metodologias, o que é essencial no mundo em constante mudança da tecnologia.

Agora, é importante discutir como isso se aplica ao nosso contexto em Moçambique. Como podemos utilizar o GitHub e outras plataformas de código aberto para promover o desenvolvimento de habilidades e a inovação em nossa comunidade de tecnologia? Como podemos incentivar mais desenvolvedores a compartilhar seus projetos e a se envolverem na comunidade de código aberto?

Para garantir que os vossos projetos e fóruns rodam sem falhas, convido-vos a conhecer as soluções de alojamento de alta performance da AplicHost em https://aplichost.com. Com a AplicHost, vocês podem ter certeza de que seus sites e aplicativos estarão sempre disponíveis e rodando com velocidade e segurança, permitindo que vocês se concentrem no que realmente importa: criar soluções inovadoras e de qualidade para a comunidade. Vamos continuar o debate e explorar como podemos trabalhar juntos para promover o desenvolvimento de tecnologia em Moçambique!

React.js ~use() hook for Caching Problem~



Tópico: React.js ~use() hook for Caching Problem~
Categoria: Tutoriais | Programação & Tecnologia
Idioma Principal: Português (Conteúdo de Tecnologia)

Descrição do Conteúdo / Informações:
-------------------------------------------------------------------------
This is where most tutorials stop. But if you try to use use() with a promise created inside a Client Component, you will hit a subtle and frustrating bug.

// Bug: creates a new promise on every render
function UserProfile({ userId }: { userId: string }) {
const user = use(fetchUser(userId)); // new promise every render
return <ProfileCard user={user} />;
}

fetchUser(userId) returns a new Promise object on every render. React sees a new promise, suspends again, and the component re-renders, creates another new promise, suspends again, infinite loop.

use() does not fetch data. It reads a promise. The promise must have a stable identity across renders. If you create a new promise on every render, you get an infinite suspension loop.

How to Stabilize the Promise

There are several approaches, each suited to a different archtecture:

1. Create the promise in a parent component or Server Component

// Server Component - promise created once, stable across renders
export default function UserPage({ params }: { params: { id: string } }) {
const userPromise = fetchUser(params.id);

return (
<Suspense fallback={<Skeleton />}>
<UserProfile userPromise={userPromise} />
</Suspense>
);
}

No async/await needed, the promise is passed down unresolved. The Client Component unwraps it with use(). Server Components don't re-render, so the promise reference is inherently stable.

2. Use a module-level cache

For Client Components that need to initiate fetches, cache the promise so the same reference is returned on subsequent calls:

const cache = new Map<string, Promise<User>>();

function fetchUserCached(id: string): Promise<User> {
if (!cache.has(id)) {
cache.set(id, fetchUser(id));
}
return cache.get(id)!;
}

function UserProfile({ userId }: { userId: string }) {
const user = use(fetchUserCached(userId));
return <ProfileCard user={user} />;
}

Same arguments produce the same promise reference. No infinite loop.

Avoid async in Cache Wrappers

Do not mark your cache function as async. The async keyword always creates a new promise, even if you return a cached value. Use a synchronous function that stores and returns the original promise object.

3. Use a data fetching library

Libraries like TanStack Query or SWR handle caching, deduplication, and revalidation out of the box. They predate use() and solve a much broader problem - but they also add ~13kB gzipped and a provider wrapper. For a simple "fetch once, display result" pattern, use() with a 5-line cache function (option 2 above) does the job without the extra dependency. The library earns its keep when your UI has long-lived client state that needs to stay fresh: think dashboards that refetch on tab focus, lists with pagination, or mutations that should optimistically update related queries.

4. Use React's cache() in Server Components

React provides a built-in cache() function for Server Components. It memoizes a function's return value for the lifetime of a single server request:

import { cache } from "react";

const getUser = cache(async (id: string): Promise<User> => {
const res = await fetch(`/api/users/${id}`);
return res.json();
});

Multiple components calling getUser("123") during the same render will share one fetch. The cache is scoped to the request, it resets on every new page load.

cache() vs. useMemo

Both memoize. But cache() works across components in a server render (deduplication), while useMemo works within a single component across re-renders. cache() is for data fetching. useMemo is for computations. Different tools, different jobs.