React 19 Suspense та Concurrent Rendering: Streaming SSR і питання для співбесід 2026

import { useState, useTransition } from 'react';

function SearchResults({ query }: { query: string }) {
  // Витратні обчислення або отримання даних
  const results = searchDatabase(query);
  return <ResultsList items={results} />;
}

export function SearchPage() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const value = e.target.value;
    // Високий пріоритет: негайне оновлення input
    setQuery(value);
    // Низький пріоритет: оновлення результатів у фоні
    startTransition(() => {
      setDeferredQuery(value);
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <SearchResults query={deferredQuery} />
    </div>
  );
}

import { Suspense } from 'react';

function ProductDetails({ id }: { id: string }) {
  // Цей компонент призупиняється під час отримання
  const product = use(fetchProduct(id));
  return <div>{product.name}</div>;
}

function ProductReviews({ id }: { id: string }) {
  const reviews = use(fetchReviews(id));
  return <ReviewsList reviews={reviews} />;
}

export function ProductPage({ id }: { id: string }) {
  return (
    <div>
      {/* Зовнішня межа: ловить обидва за потреби */}
      <Suspense fallback={<PageSkeleton />}>
        {/* Внутрішня межа: відгуки можуть завантажуватись незалежно */}
        <ProductDetails id={id} />
        <Suspense fallback={<ReviewsSkeleton />}>
          <ProductReviews id={id} />
        </Suspense>
      </Suspense>
    </div>
  );
}

import { use, Suspense } from 'react';

// Promise створений поза компонентом (render-as-you-fetch)
const userPromise = fetchUser(userId);

function UserProfile() {
  // use() призупиняється до розв'язання Promise
  const user = use(userPromise);
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

export function UserPage() {
  return (
    <Suspense fallback={<ProfileSkeleton />}>
      <UserProfile />
    </Suspense>
  );
}

import { Suspense } from 'react';

// Server Component: працює тільки на сервері
async function ProductInfo({ id }: { id: string }) {
  const product = await db.products.findUnique({ where: { id } });
  return (
    <section>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </section>
  );
}

// Server Component з повільними даними
async function RelatedProducts({ categoryId }: { categoryId: string }) {
  const products = await db.products.findMany({
    where: { categoryId },
    take: 6
  });
  return <ProductGrid products={products} />;
}

export default async function ProductPage({ 
  params 
}: { 
  params: { id: string } 
}) {
  const product = await db.products.findUnique({ 
    where: { id: params.id } 
  });

  return (
    <main>
      {/* Потік починається негайно */}
      <ProductInfo id={params.id} />
      
      {/* Потік коли готово, спочатку показує скелетон */}
      <Suspense fallback={<GridSkeleton />}>
        <RelatedProducts categoryId={product.categoryId} />
      </Suspense>
    </main>
  );
}

import { useState, useDeferredValue, useMemo } from 'react';

function ExpensiveList({ filter }: { filter: string }) {
  // Витратна операція фільтрації
  const filteredItems = useMemo(() => {
    return items.filter(item => 
      item.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [filter]);

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export function SearchableList() {
  const [filter, setFilter] = useState('');
  // Відкладена версія відстає під час введення
  const deferredFilter = useDeferredValue(filter);
  const isStale = filter !== deferredFilter;

  return (
    <div>
      <input
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="Пошук..."
      />
      <div style={{ opacity: isStale ? 0.7 : 1 }}>
        <ExpensiveList filter={deferredFilter} />
      </div>
    </div>
  );
}

import { Component, Suspense, ReactNode } from 'react';

interface Props {
  children: ReactNode;
  fallback: ReactNode;
  errorFallback: ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false, error: null };

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  render() {
    if (this.state.hasError) {
      return this.props.errorFallback;
    }
    return this.props.children;
  }
}

export function DataBoundary({ 
  children, 
  fallback, 
  errorFallback 
}: Props) {
  return (
    <ErrorBoundary errorFallback={errorFallback}>
      <Suspense fallback={fallback}>
        {children}
      </Suspense>
    </ErrorBoundary>
  );
}

// Після 19.2: React групує близькі призупинення

export function Dashboard() {
  return (
    <div className="grid grid-cols-3 gap-4">
      {/* Ці тепер групуються разом */}
      <Suspense fallback={<CardSkeleton />}>
        <RevenueCard />
      </Suspense>
      <Suspense fallback={<CardSkeleton />}>
        <UsersCard />
      </Suspense>
      <Suspense fallback={<CardSkeleton />}>
        <OrdersCard />
      </Suspense>
    </div>
  );
}

// Проблема: Послідовне отримання
function Parent() {
  const data = use(fetchParent());
  return <Child parentId={data.id} />; // Child отримує після Parent
}

// Рішення: Паралельне отримання з Promise.all
const [parentPromise, childPromise] = [
  fetchParent(),
  fetchChild()
];

function OptimizedParent() {
  const parent = use(parentPromise);
  return <OptimizedChild promise={childPromise} />;
}

function LinkWithPrefetch({ href, children }: Props) {
  const router = useRouter();
  
  function handleMouseEnter() {
    // Почати отримання до кліку
    router.prefetch(href);
  }

  return (
    <Link href={href} onMouseEnter={handleMouseEnter}>
      {children}
    </Link>
  );
}