React19 Concurrent Patterns

GitHubOfficialFirst committed by SaravananRajaramanDistributed by GitHub

Skill
Guidelines
Software development
MIT
No issues found

From the author

Preserve React 18 concurrent patterns and adopt React 19 APIs (useTransition, useDeferredValue, Suspense, use(), useOptimistic, Actions) during migration.

— the description by SaravananRajaraman

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to migrating React applications to version 19. It emphasizes a two-phase strategy: first, ensuring that existing React 18 concurrent patterns remain intact and functional during the initial migration, and second, introducing new React 19 features like Actions, the use() hook, and improved Suspense patterns only after the migration is stabilized. It includes specific verification steps to prevent accidental breakage of concurrent logic.

What it does

Validates that existing React 18 concurrent patterns are preserved during migration.
Provides guidance on when to introduce new React 19 APIs.
Offers patterns for using React 19 Actions with useActionState and useFormStatus.
Demonstrates how to implement Suspense for data fetching using the use() hook.
Includes command-line verification to check for accidental modification of concurrent patterns.
Distinguishes between code-splitting and data-fetching use cases for Suspense.

When to use it

When planning or executing a migration from React 18 to React 19.
When you need to ensure concurrent mode features remain stable during a framework upgrade.
When you are ready to refactor legacy form handling into the new React 19 Actions pattern.
When adopting new data-fetching patterns using Suspense and the use() hook.

Advantages

Reduces the risk of breaking concurrent features during the migration process.
Provides a clear separation between migration stability and feature adoption.
Simplifies form handling by replacing complex useReducer logic with Actions.
Offers standardized patterns for modern data fetching and state management.

Usage examples

“How do I verify that my concurrent patterns were not broken during the React 19 migration?”: The agent provides a grep command to scan the codebase for key concurrent patterns like useTransition and useDeferredValue to ensure they remain untouched.
“Show me how to replace my React 18 form logic with React 19 Actions.”: The agent provides a side-by-side comparison showing the transition from useReducer to the useActionState hook.
“How can I use Suspense for data fetching in React 19?”: The agent explains the use() hook and provides patterns for memoizing promises to prevent unnecessary re-renders.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/github/react19-concurrent-patterns/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip react19-concurrent-patterns.zip -d .agents/skills

Documentation by SaravananRajaraman

React 19 Concurrent Patterns

React 19 introduced new APIs that complement the migration work. This skill covers two concerns:

Preserve existing React 18 concurrent patterns that must not be broken during migration
Adopt new React 19 APIs worth introducing after migration stabilizes

Part 1 Preserve: React 18 Concurrent Patterns That Must Survive the Migration

These patterns exist in React 18 codebases and must not be accidentally removed or broken:

createRoot Already Migrated by the R18 Orchestra

If the R18 orchestra already ran, ReactDOM.render → createRoot is done. Verify it's correct:

// CORRECT React 19 root (same as React 18):
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

useTransition No Migration Needed

useTransition from React 18 works identically in React 19. Do not touch these patterns during migration:

// React 18 useTransition  unchanged in React 19:
const [isPending, startTransition] = useTransition();

function handleClick() {
  startTransition(() => {
    setFilteredResults(computeExpensiveFilter(input));
  });
}

useDeferredValue No Migration Needed

// React 18 useDeferredValue  unchanged in React 19:
const deferredQuery = useDeferredValue(query);

Suspense for Code Splitting No Migration Needed

// React 18 Suspense with lazy  unchanged in React 19:
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}

Part 2 React 19 New APIs

These are worth adopting in a post-migration cleanup sprint. Do not introduce these DURING the migration stabilize first.

For full patterns on each new API, read:

references/react19-use.md the use() hook for promises and context
references/react19-actions.md Actions, useActionState, useFormStatus, useOptimistic
references/react19-suspense.md Suspense for data fetching (the new pattern)

Migration Safety Rules

During the React 19 migration itself, these concurrent-mode patterns must be left completely untouched:

# Verify nothing touched these during migration:
grep -rn "useTransition\|useDeferredValue\|Suspense\|startTransition" \
  src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

If the migrator touched any of these files, review the changes the migration should only have modified React API surface (forwardRef, defaultProps, etc.), never concurrent mode logic.

Files

ATTRIBUTION.mdAdded by AutoGineer907 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md2.8 KiB
references/react19-actions.md9.4 KiB
references/react19-suspense.md7.6 KiB
references/react19-use.md5.0 KiB

references/react19-actions.md

title: React 19 Actions Pattern Reference

React 19 Actions Pattern Reference

React 19 introduces Actions a pattern for handling async operations (like form submissions) with built-in loading states, error handling, and optimistic updates. This replaces the useReducer + state pattern with a simpler API.

What are Actions?

An Action is an async function that:

Can be called automatically when a form submits or button clicks
Runs with automatic loading/pending state
Updates the UI automatically when done
Works with Server Components for direct server mutation

useActionState()

useActionState is the client-side Action hook. It replaces useReducer + useEffect for form handling.

React 18 Pattern

// React 18  form with useReducer + state:
function Form() {
  const [state, dispatch] = useReducer(
    (state, action) => {
      switch (action.type) {
        case 'loading':
          return { ...state, loading: true, error: null };
        case 'success':
          return { ...state, loading: false, data: action.data };
        case 'error':
          return { ...state, loading: false, error: action.error };
      }
    },
    { loading: false, data: null, error: null }
  );
  
  async function handleSubmit(e) {
    e.preventDefault();
    dispatch({ type: 'loading' });
    try {
      const result = await submitForm(new FormData(e.target));
      dispatch({ type: 'success', data: result });
    } catch (err) {
      dispatch({ type: 'error', error: err.message });
    }
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      {state.loading && <Spinner />}
      {state.error && <Error msg={state.error} />}
      {state.data && <Success data={state.data} />}
      <button disabled={state.loading}>Submit</button>
    </form>
  );
}

React 19 useActionState() Pattern

// React 19  same form with useActionState:
import { useActionState } from 'react';

async function submitFormAction(prevState, formData) {
  // prevState = previous return value from this function
  // formData = FormData from <form action={submitFormAction}>
  
  try {
    const result = await submitForm(formData);
    return { data: result, error: null };
  } catch (err) {
    return { data: null, error: err.message };
  }
}

function Form() {
  const [state, formAction, isPending] = useActionState(
    submitFormAction,
    { data: null, error: null } // initial state
  );
  
  return (
    <form action={formAction}>
      <input name="email" />
      {isPending && <Spinner />}
      {state.error && <Error msg={state.error} />}
      {state.data && <Success data={state.data} />}
      <button disabled={isPending}>Submit</button>
    </form>
  );
}

Differences:

One hook instead of useReducer + logic
formAction replaces onSubmit, form automatically collects FormData
isPending is a boolean, no dispatch calls
Action function receives (prevState, formData)

useFormStatus()

useFormStatus is a child component hook that reads the pending state from the nearest form. It acts like a built-in isPending signal without prop drilling.

// React 18  must pass isPending as prop:
function SubmitButton({ isPending }) {
  return <button disabled={isPending}>Submit</button>;
}

function Form({ isPending, formAction }) {
  return (
    <form action={formAction}>
      <input />
      <SubmitButton isPending={isPending} />
    </form>
  );
}

// React 19  useFormStatus reads it automatically:
function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>Submit</button>;
}

function Form() {
  const [state, formAction] = useActionState(submitFormAction, {});
  
  return (
    <form action={formAction}>
      <input />
      <SubmitButton /> {/* No prop needed */}
    </form>
  );
}

Key point: useFormStatus only works inside a <form action={...}> regular <form onSubmit> won't trigger it.

useOptimistic()

useOptimistic updates the UI immediately while an async operation is in-flight. When the operation succeeds, the confirmed data replaces the optimistic value. If it fails, the UI reverts.

React 18 Pattern

// React 18  manual optimistic update:
function TodoList({ todos, onAddTodo }) {
  const [optimistic, setOptimistic] = useState(todos);
  
  async function handleAddTodo(text) {
    const newTodo = { id: Date.now(), text, completed: false };
    
    // Show optimistic update immediately
    setOptimistic([...optimistic, newTodo]);
    
    try {
      const result = await addTodo(text);
      // Update with confirmed result
      setOptimistic(prev => [
        ...prev.filter(t => t.id !== newTodo.id),
        result
      ]);
    } catch (err) {
      // Revert on error
      setOptimistic(optimistic);
    }
  }
  
  return (
    <ul>
      {optimistic.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

React 19 useOptimistic() Pattern

import { useOptimistic } from 'react';

async function addTodoAction(prevTodos, formData) {
  const text = formData.get('text');
  const result = await addTodo(text);
  return [...prevTodos, result];
}

function TodoList({ todos }) {
  const [optimistic, addOptimistic] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );
  
  const [, formAction] = useActionState(addTodoAction, todos);
  
  async function handleAddTodo(formData) {
    const text = formData.get('text');
    // Optimistic update:
    addOptimistic({ id: Date.now(), text, completed: false });
    // Then call the form action:
    formAction(formData);
  }
  
  return (
    <>
      <ul>
        {optimistic.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
      <form action={handleAddTodo}>
        <input name="text" />
        <button>Add</button>
      </form>
    </>
  );
}

Key points:

useOptimistic(currentState, updateFunction)
updateFunction receives (state, optimisticInput) and returns new state
Call addOptimistic(input) to trigger the optimistic update
The server action's return value replaces the optimistic state when done

Full Example: Todo List with All Hooks

import { useActionState, useFormStatus, useOptimistic } from 'react';

// Server action:
async function addTodoAction(prevTodos, formData) {
  const text = formData.get('text');
  if (!text) throw new Error('Text required');
  const newTodo = await api.post('/todos', { text });
  return [...prevTodos, newTodo];
}

// Submit button with useFormStatus:
function AddButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? 'Adding...' : 'Add Todo'}</button>;
}

// Main component:
function TodoApp({ initialTodos }) {
  const [optimistic, addOptimistic] = useOptimistic(
    initialTodos,
    (state, newTodo) => [...state, newTodo]
  );
  
  const [todos, formAction] = useActionState(
    addTodoAction,
    initialTodos
  );
  
  async function handleAddTodo(formData) {
    const text = formData.get('text');
    // Optimistic: show it immediately
    addOptimistic({ id: Date.now(), text });
    // Then submit the form (which updates when server confirms)
    await formAction(formData);
  }
  
  return (
    <>
      <ul>
        {optimistic.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
      <form action={handleAddTodo}>
        <input name="text" placeholder="Add a todo..." required />
        <AddButton />
      </form>
    </>
  );
}

Migration Strategy

Phase 1 No changes required

Actions are opt-in. All existing useReducer + onSubmit patterns continue to work. No forced migration.

Phase 2 Identify refactor candidates

After React 19 migration stabilizes, profile for useReducer + async patterns:

grep -rn "useReducer.*case.*'loading\|useReducer.*case.*'success" src/ --include="*.js" --include="*.jsx"

Patterns worth refactoring:

Form submissions with loading/error state
Async operations triggered by user events
Current code uses dispatch({ type: '...' })
Simple state shape (object with loading, error, data)

Phase 3 Refactor to useActionState

// Before:
function LoginForm() {
  const [state, dispatch] = useReducer(loginReducer, { loading: false, error: null, user: null });
  
  async function handleSubmit(e) {
    e.preventDefault();
    dispatch({ type: 'loading' });
    try {
      const user = await login(e.target);
      dispatch({ type: 'success', data: user });
    } catch (err) {
      dispatch({ type: 'error', error: err.message });
    }
  }
  
  return <form onSubmit={handleSubmit}>...</form>;
}

// After:
async function loginAction(prevState, formData) {
  try {
    const user = await login(formData);
    return { user, error: null };
  } catch (err) {
    return { user: null, error: err.message };
  }
}

function LoginForm() {
  const [state, formAction] = useActionState(loginAction, { user: null, error: null });
  
  return <form action={formAction}>...</form>;
}

Comparison Table

Feature	React 18	React 19
Form handling	`onSubmit` + useReducer	`action` + useActionState
Loading state	Manual dispatch	Automatic `isPending`
Child component pending state	Prop drilling	`useFormStatus` hook
Optimistic updates	Manual state dance	`useOptimistic` hook
Error handling	Manual in dispatch	Return from action
Complexity	More boilerplate	Less boilerplate

Requirements and compatibility

Written for: GitHub Copilot

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

First committed by

SaravananRajaraman

Publisher

GitHub (Official)

Distributed by

GitHub

Source

github/awesome-copilot · skills/react19-concurrent-patterns · commit 797337f

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

Contributors

SaravananRajaraman, stbenjam

AutoGineer is not affiliated with or endorsed by SaravananRajaraman or GitHub.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download react19-concurrent-patterns.zip

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by SaravananRajaraman

React 19 Concurrent Patterns

Part 1 Preserve: React 18 Concurrent Patterns That Must Survive the Migration

createRoot Already Migrated by the R18 Orchestra

useTransition No Migration Needed

useDeferredValue No Migration Needed

Suspense for Code Splitting No Migration Needed

Part 2 React 19 New APIs

Migration Safety Rules

Files

references/react19-actions.md

title: React 19 Actions Pattern Reference

React 19 Actions Pattern Reference

What are Actions?

useActionState()

React 18 Pattern

React 19 useActionState() Pattern

useFormStatus()

useOptimistic()

React 18 Pattern

React 19 useOptimistic() Pattern

Full Example: Todo List with All Hooks

Migration Strategy

Phase 1 No changes required

Phase 2 Identify refactor candidates

Phase 3 Refactor to useActionState

Comparison Table

Requirements and compatibility

Security

Attribution and licence

Related skills

Implement

Source Driven Development

Write Swift

Cardputer Buddy

Typescript Pro

Scala Pro

Download ZIP