Why not create queryClient and trpcClient outside of React?

From the docs: https://trpc.io/docs/client/react/setup#4-add-trpc-providers Relevant excerpt:

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

  // ...

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

  // ...

What are the downsides to moving these two clients outside the component? Does it break hot reloading or something? E.g.

const queryClient = new QueryClient()
const trpcClient = trpc.createClient({ /* ... */ })

export function App() {
  // ...

const queryClient = new QueryClient()
const trpcClient = trpc.createClient({ /* ... */ })

export function App() {
  // ...

Solution:

I'm so goddamn stupid, i literally asked the same question this June already: <#1253685017931022347> And also they even explain this in the docs below the code snippet... I AM INCAPABLE OF READING 🤬...

Jump to solution

1 Reply

Solution

function•3mo ago