React 19 Concurrent Features Specialist

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

function AdvancedSearch({ data }: { data: Item[] }) {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  const deferredQuery = useDeferredValue(query, '');
  
  // Expensive filtering uses deferred value
  const filteredResults = useMemo(
    () => {
      if (!deferredQuery) return [];
      
      // Expensive operation - won't block input
      return data.filter(item => 
        item.name.toLowerCase().includes(deferredQuery.toLowerCase())
      );
    },
    [data, deferredQuery]
  );
  
  const isStale = query !== deferredQuery;
  
  const handleSearch = (value: string) => {
    // Urgent: Update input immediately
    setQuery(value);
    
    // Non-urgent: Mark as transition
    startTransition(() => {
      // Filtering happens in background
    });
  };
  
  return (
    <div>
      <input
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Search..."
        className={isPending ? 'opacity-50' : ''}
      />
      
      {isPending && <Spinner />}
      
      <div style={{ opacity: isStale ? 0.5 : 1 }}>
        <ResultsList results={filteredResults} />
      </div>
    </div>
  );
}

import { Suspense } from 'react';
import { use } from 'react';

// High priority - render immediately
function Header() {
  return <header>My App</header>;
}

// Medium priority - load in parallel
function UserProfile({ userId }: { userId: string }) {
  const user = use(fetchUser(userId));
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

// Low priority - can wait
function ActivityFeed({ userId }: { userId: string }) {
  const activities = use(fetchActivities(userId));
  return (
    <ul>
      {activities.map(activity => (
        <li key={activity.id}>{activity.text}</li>
      ))}
    </ul>
  );
}

function Dashboard({ userId }: { userId: string }) {
  return (
    <div>
      {/* Critical - no Suspense needed */}
      <Header />
      
      {/* Medium priority - parallel loading */}
      <Suspense fallback={<UserProfileSkeleton />}>
        <UserProfile userId={userId} />
      </Suspense>
      
      <div className="grid grid-cols-2 gap-4">
        <Suspense fallback={<ChartSkeleton />}>
          <AnalyticsChart userId={userId} />
        </Suspense>
        
        <Suspense fallback={<TableSkeleton />}>
          <DataTable userId={userId} />
        </Suspense>
      </div>
      
      {/* Low priority - loads last */}
      <Suspense fallback={<FeedSkeleton />}>
        <ActivityFeed userId={userId} />
      </Suspense>
    </div>
  );
}

// app/dashboard/page.tsx - React Server Component
import { Suspense } from 'react';

// This page renders on the server and streams to client
export default async function DashboardPage() {
  return (
    <div>
      {/* Static shell - renders immediately */}
      <header>
        <h1>Dashboard</h1>
        <nav>
          <a href="/">Home</a>
          <a href="/settings">Settings</a>
        </nav>
      </header>
      
      {/* Dynamic content - streams in when ready */}
      <Suspense fallback={<StatsSkeleton />}>
        <Stats />
      </Suspense>
      
      <Suspense fallback={<ChartSkeleton />}>
        <RevenueChart />
      </Suspense>
      
      {/* Static footer */}
      <footer>© 2024 My App</footer>
    </div>
  );
}

// Async Server Component - streams when data is ready
async function Stats() {
  // Server-side fetch - doesn't block shell
  const stats = await fetch('https://api.example.com/stats', {
    next: { revalidate: 60 }
  });
  const data = await stats.json();
  
  return (
    <div className="grid grid-cols-4 gap-4">
      {data.map(stat => (
        <StatCard key={stat.id} {...stat} />
      ))}
    </div>
  );
}

async function RevenueChart() {
  const data = await fetch('https://api.example.com/revenue', {
    next: { revalidate: 300 }
  });
  const chartData = await data.json();
  
  return <Chart data={chartData} />;
}

import { Suspense } from 'react';

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {/* Critical: Hydrate immediately for interactivity */}
        <Header />
        
        {/* Main content with Suspense - hydrates after shell */}
        <Suspense fallback={<MainSkeleton />}>
          <main>{children}</main>
        </Suspense>
        
        {/* Non-critical: Hydrate last */}
        <Suspense fallback={null}>
          <Footer />
        </Suspense>
        
        {/* Interactive widget: Hydrate on user interaction */}
        <Suspense fallback={<ChatPlaceholder />}>
          <ChatWidget />
        </Suspense>
        
        {/* Analytics: Load in background, no blocking */}
        <Suspense fallback={null}>
          <AnalyticsScript />
        </Suspense>
      </body>
    </html>
  );
}

// Client component with lazy hydration
'use client';

import { useState, Suspense } from 'react';

function ChatWidget() {
  const [isOpen, setIsOpen] = useState(false);
  
  // Only load chat when user interacts
  if (!isOpen) {
    return (
      <button onClick={() => setIsOpen(true)}>
        Open Chat
      </button>
    );
  }
  
  return (
    <Suspense fallback={<ChatLoading />}>
      <ChatInterface />
    </Suspense>
  );
}

import { useOptimistic, useTransition } from 'react';

interface Todo {
  id: string;
  title: string;
  completed: boolean;
}

function TodoList({ todos }: { todos: Todo[] }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo: Todo) => [...state, newTodo]
  );
  
  const [isPending, startTransition] = useTransition();

  const handleAdd = async (title: string) => {
    // Create temporary todo for optimistic update
    const tempTodo: Todo = {
      id: crypto.randomUUID(),
      title,
      completed: false
    };
    
    // Show optimistic update immediately
    startTransition(() => {
      addOptimisticTodo(tempTodo);
    });
    
    // Actual API call
    try {
      const response = await fetch('/api/todos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title })
      });
      
      if (!response.ok) {
        throw new Error('Failed to add todo');
      }
      
      // Server response will update todos, optimistic update replaced
      const newTodo = await response.json();
      // State updates automatically
    } catch (error) {
      // Rollback handled automatically by React
      console.error('Failed to add todo:', error);
    }
  };

  return (
    <ul>
      {optimisticTodos.map(todo => (
        <li 
          key={todo.id}
          style={{ 
            opacity: isPending ? 0.6 : 1,
            transition: 'opacity 0.2s'
          }}
        >
          {todo.title}
        </li>
      ))}
    </ul>
  );
}

// app/actions.ts
'use server';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
  
  // Validate
  if (!title || !content) {
    throw new Error('Title and content are required');
  }
  
  // Database operation
  const post = await db.post.create({
    data: { title, content, authorId: getCurrentUserId() }
  });
  
  // Revalidate and redirect
  revalidatePath('/posts');
  redirect(`/posts/${post.id}`);
}

// app/new-post/page.tsx
'use client';

import { useFormStatus } from 'react-dom';
import { createPost } from './actions';

function SubmitButton() {
  const { pending } = useFormStatus();
  
  return (
    <button 
      type="submit" 
      disabled={pending}
      className={pending ? 'opacity-50 cursor-not-allowed' : ''}
    >
      {pending ? 'Creating...' : 'Create Post'}
    </button>
  );
}

export default function NewPost() {
  return (
    <form action={createPost}>
      <input 
        name="title" 
        placeholder="Post title"
        required 
      />
      <textarea 
        name="content" 
        placeholder="Post content"
        required
      />
      <SubmitButton />
    </form>
  );
}

import { useState, useTransition, Suspense } from 'react';
import { use } from 'react';

function Router() {
  const [page, setPage] = useState('/');
  const [isPending, startTransition] = useTransition();

  function navigate(url: string) {
    // Mark navigation as transition
    startTransition(() => {
      setPage(url);
    });
  }

  let content;
  if (page === '/') {
    content = <IndexPage navigate={navigate} />;
  } else if (page === '/artists/:id') {
    content = <ArtistPage artistId={page.split('/')[2]} />;
  }

  return (
    <Layout isPending={isPending}>
      <Suspense fallback={<PageSkeleton />}>
        {content}
      </Suspense>
    </Layout>
  );
}

function Layout({ children, isPending }: { children: React.ReactNode; isPending: boolean }) {
  return (
    <div className="layout">
      <header style={{ opacity: isPending ? 0.7 : 1 }}>
        <nav>
          <a href="/">Home</a>
          <a href="/artists">Artists</a>
        </nav>
      </header>
      <main>{children}</main>
    </div>
  );
}

function ArtistPage({ artistId }: { artistId: string }) {
  const artist = use(fetchArtist(artistId));
  
  return (
    <div>
      <h1>{artist.name}</h1>
      <Suspense fallback={<AlbumsSkeleton />}>
        <Albums artistId={artistId} />
      </Suspense>
    </div>
  );
}