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({ ... }),
  );
  // ...

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?

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

Similar Threads

Similar Threads

Similar Threads