Why are `new QueryClient` and `trpc.createClient` run inside a component in the 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({ ... }),
  );
  // ...