Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    Modern React Guidance

    1

    Authoritative guidance and refactoring for React 19.3+, Actions, Compiler, and Concurrent UI patterns.

    Free

    Security scanned
    Modern React Guidance

    Modern React Guidance

    Example session with this skill installed

    Refactor this React 18 form to use React 19 Actions and state:

    function Signup() {
  const [loading, setLoading] = useState(false);
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    await api.signup(new FormData(e.target));
    setLoading(false);
  };
  return <form onSubmit={handleSubmit}>{loading ? '...' : 'Submit'}</form>;
}
    • Read your context and instructions
    • Compiled the modern react guidance

    I have refactored the component to use React 19 Actions. This removes manual loading state management and utilizes the useActionState hook for declarative mutation handling.

    Modern React 19 Refactor

    import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';

async function signupAction(prevState: any, formData: FormData) {
  try {
    await api.signup(formData);
    return { success: true, error: null };
  } catch (e) {
    return { success: false, error: e.message };
  }
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Sign Up'}
    </button>
  );
}

export function Signup() {
  const [state, submitAction] = useActionState(signupAction, {
    success: false,
    error: null,
  });

  return (
    <form action={submitAction}>
      <input name="email" type="email" required />
      <SubmitButton />
      {state.error && <p className="error">{state.error}</p>}
    </form>
  );
}

    Next steps

    1. Ensure your environment is running react@19.0.0 or higher.
    2. If you are using a framework like Next.js, consider moving signupAction to a separate 'use server' file.
    3. Run npx codemod@latest react/19/migration-recipe to catch other legacy patterns in your project.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Legacy React patterns lead to bloated code, hydration errors, and unnecessary re-renders. This skill provides direct access to React 19.3+ standards, replacing outdated training data with modern concurrent patterns. It ensures your components utilize the latest APIs for forms, data fetching, and state management without the technical debt of older versions.

    What it does

    • Automates migration by identifying and replacing forwardRef, Context.Provider, and legacy string refs with modern equivalents.
    • Enforces Compiler rules by preventing redundant useMemo and useCallback when the React Compiler is active.
    • Modernizes forms using useActionState, useFormStatus, and useOptimistic for declarative mutation handling.
    • Optimizes data fetching by replacing useEffect patterns with use(promise) and Suspense boundaries.
    • Enhances UX with native <ViewTransition> for animations and <Activity> for state-preserving visibility toggles.

    How it works

    1. Analyze Environment by scanning package.json to detect the React version and Compiler status.
    2. Scan Patterns to identify legacy hooks, manual memoization, or improper Effect usage.
    3. Refactor Code using modern declarative APIs like use(browser()) for server-safe client rendering.
    4. Apply Codemods by suggesting specific CLI commands to automate breaking change migrations.

    Frameworks & tools

    Targeting React 19.3+, including React DOM, React Compiler, and official React migration codemods. Optimized for projects using TypeScript, Concurrent Rendering, and RSC-aware environments.

    Why this beats prompting it yourself

    Standard LLMs often default to React 18 or older patterns because of their training cutoff. This skill strictly enforces 19.3+ APIs, ensuring you don't accidentally write deprecated code like forwardRef or manual state machines for form pending states.

    Use cases

    • Upgrading a React 18 codebase to 19+ while cleaning up technical debt.
    • Implementing zero-config form mutations with Server Actions and optimistic updates.
    • Building high-performance UIs that utilize the React Compiler and Concurrent features.
    • Handling browser-only subtrees without hydration mismatches using use(browser()).

    Known limitations

    Requires React 19.0 or higher for core features and 19.3+ for View Transitions and Fragment refs. Does not support Class components or legacy Context APIs.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 13 days ago

    • Free to download with an account

    Requires

    Node.js
    codemod
    types-react-codemod

    Listed13 days ago

    What's inside

    Frequently Asked Questions