React Stack Patterns

When to Use

• Use this as a reference when choosing your React stack (framework, build tools, routing, state management)
• This is helpful when starting a new React project and evaluating modern ecosystem options

Instructions

• For full-stack apps needing SSR/SEO: use Next.js or Remix as the framework
• For SPAs, internal tools, and dashboards: use Vite + React Router or TanStack Router
• Use Vite as the build tool for any custom (non-framework) React setup
• Consider TanStack Router for type-safe routing in custom stacks; use framework-provided routing otherwise
• Use TanStack Query (React Query) for server state and Zustand or Redux for complex global state
• Use React 19 APIs (ref as prop, use(), Actions) where supported
• Embrace AI-assisted development tools but always validate generated code

Details

Official Guidance and Evolving Best Practices

'use server'

Build Tools in 2025: Vite, Turbopack, and Beyond

• Vite has become the de facto choice for non-framework React projects. Vite provides a super-fast dev server (powered by ESBuild) and uses Rollup for production bundling. Its popularity has surged, and by 2025 its React integration is the second most widely used build setup after Next.js. The appeal: instant server start and near-instant module hot reloads. If you're migrating off CRA, the React team explicitly suggests Vite as a top choice.
• Turbopack - the new Rust-based bundler introduced by Vercel - is an upcoming star positioned as the spiritual successor to Webpack, focused on incremental compilation for ultrafast reloads. It's integrated within Next.js, so if you use Next, you'll likely benefit from it. Outside of Next, Turbopack isn't yet a generic tool.
• Webpack - the long-time workhorse - is still with us, but mostly in legacy mode. For new projects, you'd rarely choose Webpack directly in 2025 unless you have very specific needs. Webpack for legacy, Vite (or framework default) for greenfield.
• Rspack / RSBuild - part of a new breed of Rust-powered bundlers. Rspack is a high-performance bundler largely compatible with Webpack's ecosystem. RSBuild is a zero-config build tool built on Rspack, offering an easy setup for frameworks including React.

Frameworks and Starting Points

• Next.js for public-facing apps that need SSR, SEO, or server components
• Remix for apps that emphasize progressive enhancement and web fundamentals
• Vite + React Router/TanStack Router for SPAs, dashboards, internal tools, and any app where SSR isn't a requirement

// server.ts — minimal custom Vite SSR setup
import express from 'express'
import { createServer as createViteServer } from 'vite'

const app = express()
const vite = await createViteServer({ server: { middlewareMode: true } })
app.use(vite.middlewares)

app.use('*', async (req, res) => {
  const template = await vite.transformIndexHtml(req.originalUrl, indexHtml)
  const { render } = await vite.ssrLoadModule('/src/entry-server.tsx')
  const appHtml = await render(req.originalUrl)
  res.send(template.replace('<!--app-->', appHtml))
})

Routing Solutions: React Router vs. TanStack Router

import { createRootRoute, createRoute, createRouter, RouterProvider } from '@tanstack/react-router';

const rootRoute = createRootRoute();
const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => <div>Hello, world!</div>,
});

const routeTree = rootRoute.addChildren([indexRoute]);
const router = createRouter({ routeTree });

export default function App() {
  return <RouterProvider router={router} />;
}

State Management and Data Fetching Libraries

useState

useReducer

useQuery

useMutation

import { useQuery } from '@tanstack/react-query';

function TodoList() {
  const { data: todos, error, isLoading } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  });
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <ul>{todos.map(t => <li key={t.id}>{t.title}</li>)}</ul>;
}

Testing with Vitest

// vite.config.ts — Vitest uses this directly
/// <reference types="vitest/config" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/test/setup.ts',
    css: true,
  },
})

// src/test/setup.ts
import '@testing-library/jest-dom/vitest'

// src/components/Button.test.tsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Button } from './Button'

test('calls onClick when clicked', async () => {
  const onClick = vi.fn()
  render(<Button onClick={onClick}>Save</Button>)
  await userEvent.click(screen.getByRole('button', { name: 'Save' }))
  expect(onClick).toHaveBeenCalledOnce()
})

describe

it

expect

vi.fn()

v8

istanbul

React 19 and Modern APIs

forwardRef

ref

// React 19 — ref is just a prop
function Input({ ref, ...props }: InputProps & { ref?: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />
}

use()

import { use } from 'react'

function UserPanel({ show }: { show: boolean }) {
  if (!show) return null
  const user = use(UserContext)
  return <div>{user.name}</div>
}

function ContactForm() {
  const [state, formAction, isPending] = useActionState(submitContact, null)
  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      <button disabled={isPending}>Submit</button>
      {state?.error && <p>{state.error}</p>}
    </form>
  )
}

useOptimistic

function TodoList({ todos }: { todos: Todo[] }) {
  const [optimisticTodos, addOptimistic] = useOptimistic(todos)

  async function addTodo(text: string) {
    addOptimistic([...optimisticTodos, { id: 'temp', text, pending: true }])
    await saveTodo(text)
  }

  return <ul>{optimisticTodos.map(t => <li key={t.id}>{t.text}</li>)}</ul>
}

useMemo

useCallback

React.memo

// vite.config.ts
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
})

'use memo'

Vite-Specific Best Practices

• Barrel file imports are the #1 bundle size issue — import directly from source files, not barrel

  index.ts

  files. Use

  vite-plugin-barrel

  if you need ergonomic syntax.
• Manual chunk splitting — split vendor code by stability (react, router, query, UI library) for better caching.
• Route-level code splitting — use

  React.lazy()

  for each route, wrapped in

  <Suspense>

  .
• Dependency pre-bundling — add slow-to-resolve deps to

  optimizeDeps.include

  for faster dev server.
• Bundle analysis — run

  npx vite-bundle-visualizer

  after every major dependency change.

React + AI: The New Frontier of "Vibe Coding"

• Use AI for boilerplate and configuration
• Generate component templates
• Leverage AI for tests and types
• Stay in control — always review AI-generated code

useChat

Conclusion

• Build tool: Start with Vite for most cases (or Turbopack if inside Next.js).
• Framework or not: Lean towards using a React framework (Next.js being the frontrunner) for any sizeable app.
• Routing: If on Next/Remix, use what's built-in. If building your own stack, consider TanStack Router for type safety or React Router for reliability.
• State and data libraries: Use React Query for server data, Zustand or Redux for complex global state.
• Embrace new React features: Hooks are standard. Use React 19 APIs (

  use()

  , Actions,

  useOptimistic

  ). Understand Server Components. Try the React Compiler for auto-memoization.
• Performance: Use

  useTransition

  for non-urgent updates, derived state over stored state,

  useSyncExternalStore

  for external subscriptions. See the react-render-optimization and react-data-fetching skills.
• AI in your workflow: Enhance productivity with AI coding assistants, but always validate output.

Source

• patterns.dev/react/react-2026