Para que serve o "Use client" no ReactQueryProvider
Para que serve o "Use client" no ReactQueryProvider
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:
QueryClient
precisa ser inicializado e mantido no cliente, não no servidor."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.