1
resposta

Para que serve o "Use client" no ReactQueryProvider

Para que serve o "Use client" no ReactQueryProvider

1 resposta

Ola!

O use client que aparece no início do seu arquivo ReactQueryProvider.jsx tem a ver com o Next.js 13+, que introduziu o conceito de Server Components e Client Components.

Por padrão, todos os componentes em app/ são Server Components. Isso significa que eles rodam no servidor, não têm acesso a estados (useState, useEffect) nem a bibliotecas que dependem do navegador (como o React Query).

Quando você escreve:

"use client";

Está dizendo ao Next.js:
“Esse componente precisa rodar no cliente (navegador) porque usa recursos que não funcionam no servidor”.

No caso do ReactQueryProvider, isso é necessário porque:

  • O React Query depende de estado, cache e hooks que só existem no navegador.
  • O QueryClient precisa ser inicializado e mantido no cliente, não no servidor.
  • Sem o "use client", o Next.js tentaria rodar esse código como Server Component, e daria erro.

Resumindo:
O "use client" serve para indicar ao Next.js que o ReactQueryProvider deve ser renderizado no lado do cliente, garantindo que o React Query funcione corretamente, já que ele manipula estado e cache da aplicação.