Renaming Hydrate to HydrationBoundary

When using the hydrate pattern in SSR, the Hydrate component was not fully descriptive about what it meant. To make it more concise and match other boundaries defined in TanStack Query, it was renamed HydrationBoundary. Due to this, you now have to rename it in your Next.js or Remix code.

Let us now see how the snippets change.

Next.js hydrate pattern renaming

This is what our Next.js _app component will look like now:

import { useState } from "react";
import {
  HydrationBoundary,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";
export default function App({ Component, pageProps }) {
  const [queryClient] = useState(() => new QueryClient());
  return (
  <QueryClientProvider client={queryClient}>
    <HydrationBoundary state={pageProps.
          dehydratedState...