React: What to Revisit After Upgrading to React 19

React 19 introduces improvements to forms, Actions, refs, and asynchronous workflows. Upgrading an existing application is a good opportunity to review how components manage state, submit data, and handle loading and error states. However, an upgrade should not automatically become a large refactoring project.

Review the existing React setup

Start by checking the React and React DOM versions in package.json:

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

The exact version range should match the application’s compatibility requirements. Before upgrading, review the release notes and confirm that the router, testing libraries, UI components, and other dependencies support the intended version.

Run the existing test suite before making changes. This establishes a baseline and makes upgrade-related regressions easier to identify.

Understand Actions and form handling

React 19 makes it easier to coordinate form submissions with asynchronous functions.

For example, a form can use an Action to submit data:

function ProfileForm() {
  async function saveProfile(formData) {
    const name = formData.get("name");

    await fetch("/api/profile", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ name })
    });
  }

  return (
    <form action={saveProfile}>
      <label>
        Name
        <input name="name" required />
      </label>

      <button type="submit">Save profile</button>
    </form>
  );
}

This illustrates the basic form Action pattern. A production implementation should also check the HTTP response, handle network errors, and display feedback to the user.

React 19 also provides useActionState for managing the result of an Action and useFormStatus for reading the status of a parent form submission. These APIs can reduce the amount of manually maintained submission state.

Review refs and component APIs

React 19 allows function components to receive ref as a prop, reducing the need for forwardRef in new code.

function TextInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

This does not mean every existing component needs to be rewritten. Review components when their APIs are already being changed, and verify compatibility with third-party libraries.

Reconsider unnecessary memoization

Existing applications may contain extensive use of useMemo, useCallback, and React.memo. React 19 does not make all manual memoization obsolete. These tools can still be useful when referential stability matters or profiling demonstrates a performance issue.

Keep optimizations that solve real problems, and avoid removing them without tests or measurements.

Upgrade incrementally

A practical upgrade process is:

1. Review React 19 migration notes.
2. Upgrade React and React DOM together.
3. Update incompatible dependencies.
4. Run unit, integration, and end-to-end tests.
5. Test forms, navigation, error boundaries, and asynchronous workflows.
6. Measure performance before making additional optimizations.

Conclusion

React 19 provides useful improvements, but the best upgrade strategy is deliberate rather than disruptive. Focus on compatibility, correctness, and opportunities to simplify existing code. Adopt new APIs where they provide a clear benefit instead of rewriting stable components merely because a new version is available.