Why are `new QueryClient` and `trpc.createClient` run inside a component in the React setup?

From https://trpc.io/docs/client/react/setup:

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({ ... }),
  );
  // ...

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({ ... }),
  );
  // ...

if these two are "made stable" through useState() and since they should exist only once per SPA (like a singleton), why not just put them outside the component?
is this related to HMR?

tRPC•2y ago•

24 replies

functiondj

Why are `new QueryClient` and `trpc.createClient` run inside a component in the React setup?

From https://trpc.io/docs/client/react/setup:

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({ ... }),
  );
  // ...

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({ ... }),
  );
  // ...

if these two are "made stable" through useState() and since they should exist only once per SPA (like a singleton), why not just put them outside the component?
is this related to HMR?

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

tRPC

Move Fast & Break Nothing. End-to-end typesafe APIs made easy.

4,951 Members

Join

Why are `new QueryClient` and `trpc.createClient` run inside a component in the React setup?

Why are `new QueryClient` and `trpc.createClient` run inside a component in the React setup?

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads