Compare React versions and see exactly what changes, what requires action, and what you can start using.
UpgradePath detects relevant tools and selects them automatically.
Select the tools in your project to include relevant dependency updates in this guide.
React 19 requires the modern JSX transform. Projects still using the legacy transform should update their build configuration before upgrading.
Ensure your build tool uses the modern JSX transform before upgrading to React 19.
React 19 removes runtime propTypes checks for function components. Existing propTypes declarations on function components are ignored.
import PropTypes from "prop-types";
function Heading({ text }) {
return <h1>{text}</h1>;
}
Heading.propTypes = {
text: PropTypes.string,
};interface HeadingProps {
text?: string;
}
function Heading({
text,
}: HeadingProps) {
return <h1>{text}</h1>;
}Remove function-component propTypes and migrate to TypeScript or another type-checking solution.
React 19 removes defaultProps support from function components. Class components continue to support defaultProps.
function Heading({
text,
}: {
text?: string;
}) {
return <h1>{text}</h1>;
}
Heading.defaultProps = {
text: "Hello",
};function Heading({
text = "Hello",
}: {
text?: string;
}) {
return <h1>{text}</h1>;
}Replace function-component defaultProps with JavaScript default parameters.
React 19 removes the legacy contextTypes and getChildContext APIs that were deprecated in React 16.6.
class Parent extends React.Component {
getChildContext() {
return {
theme: "dark",
};
}
render() {
return <Child />;
}
}
Parent.childContextTypes = {
theme: PropTypes.string,
};const ThemeContext =
React.createContext("light");
function Parent() {
return (
<ThemeContext value="dark">
<Child />
</ThemeContext>
);
}Replace contextTypes and getChildContext with createContext and the modern Context API.
React 19 removes string refs from class components. Ref callbacks or createRef should be used instead.
class Form extends React.Component {
componentDidMount() {
this.refs.input.focus();
}
render() {
return (
<input ref="input" />
);
}
}class Form extends React.Component {
input = null;
componentDidMount() {
this.input?.focus();
}
render() {
return (
<input
ref={(input) => {
this.input = input;
}}
/>
);
}
}Replace string refs with callback refs or createRef. React provides a codemod for this migration.
React 19 removes support for the legacy module pattern factory component style.
function FactoryComponent() {
return {
render() {
return <div>Hello</div>;
},
};
}function FactoryComponent() {
return <div>Hello</div>;
}Convert module pattern factories into normal function components.
React 19 removes React.createFactory, an API that predates widespread JSX adoption.
import {
createFactory,
} from "react";
const Button =
createFactory("button");
const element =
Button({
children: "Save",
});const element = (
<button>
Save
</button>
);Replace React.createFactory usage with JSX.
React 19 removes the react-test-renderer/shallow entry point. React recommends moving away from shallow rendering.
import ShallowRenderer from
"react-test-renderer/shallow";import ShallowRenderer from
"react-shallow-renderer";Prefer migrating tests to React Testing Library. If shallow rendering must temporarily remain, install react-shallow-renderer directly.
React 19 moves act to the React package. The react-dom/test-utils version is deprecated and the other legacy test utilities are removed.
import {
act,
} from "react-dom/test-utils";import {
act,
} from "react";Import act directly from react. Review other react-dom/test-utils usage and migrate away from low-level test utilities.
React 19 removes ReactDOM.render after its deprecation in React 18. Applications must use createRoot.
import {
render,
} from "react-dom";
render(
<App />,
document.getElementById("root"),
);import {
createRoot,
} from "react-dom/client";
const container =
document.getElementById("root");
const root =
createRoot(container!);
root.render(<App />);Replace ReactDOM.render with createRoot from react-dom/client. The React 19 migration recipe includes a codemod for this change.
React 19 removes the legacy ReactDOM.hydrate API. Server-rendered applications must use hydrateRoot.
import {
hydrate,
} from "react-dom";
hydrate(
<App />,
document.getElementById("root"),
);import {
hydrateRoot,
} from "react-dom/client";
hydrateRoot(
document.getElementById("root")!,
<App />,
);Replace ReactDOM.hydrate with hydrateRoot from react-dom/client.
React 19 removes ReactDOM.unmountComponentAtNode. Applications using the root API should unmount through the root instance.
import {
unmountComponentAtNode,
} from "react-dom";
unmountComponentAtNode(
container,
);const root =
createRoot(container);
root.render(<App />);
// Later:
root.unmount();Keep the root returned by createRoot and call root.unmount() when the application needs to be removed.
React 19 removes findDOMNode. The API was a legacy escape hatch that broke component abstraction and was fragile during refactoring.
import {
findDOMNode,
} from "react-dom";
useEffect(() => {
const input =
findDOMNode(component);
input?.focus();
}, []);const inputRef =
useRef<HTMLInputElement>(null);
useEffect(() => {
inputRef.current?.focus();
}, []);
return (
<input ref={inputRef} />
);Replace findDOMNode with an explicit DOM ref.
React 19 allows function components to access ref directly as a prop, reducing the need for forwardRef in new function components.
import {
forwardRef,
} from "react";
const Input = forwardRef<
HTMLInputElement,
InputProps
>((props, ref) => {
return (
<input
{...props}
ref={ref}
/>
);
});function Input({
ref,
...props
}: InputProps & {
ref?: React.Ref<HTMLInputElement>;
}) {
return (
<input
{...props}
ref={ref}
/>
);
}New function components can accept ref directly as a prop. Existing forwardRef components can continue to work, and React provides a codemod for migration.
React 19 supports returning a cleanup function from a ref callback. React calls the cleanup when the element is removed.
<div
ref={(node) => {
if (node) {
setup(node);
}
}}
/><div
ref={(node) => {
setup(node);
return () => {
cleanup(node);
};
}}
/>React 19 allows <Context> to be used directly as a provider instead of requiring <Context.Provider>.
<ThemeContext.Provider value="dark">
<App />
</ThemeContext.Provider><ThemeContext value="dark">
<App />
</ThemeContext>React 19 introduces Actions for handling asynchronous transitions, including pending states, optimistic updates, errors, and form mutations.
async function submit() {
setPending(true);
try {
await updateName(name);
} finally {
setPending(false);
}
}const [
isPending,
startTransition,
] = useTransition();
function submit() {
startTransition(async () => {
await updateName(name);
});
}React 19 introduces useActionState for updating state based on the result of an Action while exposing pending state.
import {
useActionState,
} from "react";
const [
error,
submitAction,
isPending,
] = useActionState(
async (
previousState,
formData,
) => {
const error =
await updateName(
formData.get("name"),
);
return error;
},
null,
);React 19 introduces useOptimistic for temporarily showing an expected result while an asynchronous Action is in progress.
import {
useOptimistic,
} from "react";
const [
optimisticName,
setOptimisticName,
] = useOptimistic(name);
async function submit(
formData: FormData,
) {
const nextName =
String(formData.get("name"));
setOptimisticName(nextName);
await updateName(nextName);
}React 19 introduces use for reading resources such as promises and context during rendering. Unlike Hooks, use can be called conditionally.
import {
use,
} from "react";
function Comments({
commentsPromise,
}: {
commentsPromise: Promise<Comment[]>;
}) {
const comments =
use(commentsPromise);
return comments.map(
(comment) => (
<Comment
key={comment.id}
comment={comment}
/>
),
);
}React 19 extends form action, input formAction, and button formAction props so they can receive functions that handle form submissions.
<form
onSubmit={handleSubmit}
>
<input name="name" />
<button type="submit">
Save
</button>
</form>async function saveName(
formData: FormData,
) {
await updateName(
formData.get("name"),
);
}
<form action={saveName}>
<input name="name" />
<button type="submit">
Save
</button>
</form>React 19 adds useFormStatus in react-dom so components can read information about the parent form submission, including whether it is pending.
import {
useFormStatus,
} from "react-dom";
function SubmitButton() {
const {
pending,
} = useFormStatus();
return (
<button
disabled={pending}
type="submit"
>
{pending
? "Saving..."
: "Save"}
</button>
);
}React 19 adds native support for title, meta, and link metadata tags rendered from components and hoists them to the document head.
function ProductPage({
product,
}: {
product: Product;
}) {
return (
<>
<title>
{product.name}
</title>
<meta
name="description"
content={
product.description
}
/>
<ProductDetails
product={product}
/>
</>
);
}React 19 adds built-in support for stylesheet links with precedence, allowing React to coordinate stylesheet loading with rendering.
<link
rel="stylesheet"
href="/styles.css"
precedence="default"
/>React 19 improves support for async scripts rendered anywhere in the component tree by deduplicating and managing them as document resources.
<script
async
src="https://example.com/sdk.js"
/>Because React 19 ref callbacks may return cleanup functions, TypeScript no longer accepts some implicit returns that return the assigned value instead of void.
<div
ref={(current) =>
(instance = current)
}
/><div
ref={(current) => {
instance = current;
}}
/>Change ref callback assignments that implicitly return a value into block-bodied callbacks that return nothing.
React 19 adds APIs for prefetching DNS, preconnecting to origins, preloading resources, and preinitializing scripts and stylesheets.
import {
preconnect,
preload,
} from "react-dom";
preconnect(
"https://cdn.example.com",
);
preload(
"/fonts/inter.woff2",
{
as: "font",
},
);React 19 improves hydration mismatch reporting by combining related messages and providing more useful information about the mismatch.
React 19 changes render error handling. Uncaught errors are reported to window.reportError and errors caught by Error Boundaries are reported to console.error instead of being caught and re-thrown.
const root = createRoot(container);
root.render(<App />);const root = createRoot(container, {
onUncaughtError(error, errorInfo) {
reportError(error, errorInfo);
},
onCaughtError(error, errorInfo) {
reportCaughtError(
error,
errorInfo,
);
},
});
root.render(<App />);If your error reporting relies on React re-throwing render errors, migrate to the onUncaughtError and onCaughtError options available on createRoot and hydrateRoot.
React 19 treats ref as a regular prop and deprecates accessing element.ref directly.
const element = <Input ref={inputRef} />;
const ref = element.ref;const element = <Input ref={inputRef} />;
const ref = element.props.ref;Read ref from element.props.ref instead of element.ref. Direct element.ref access will be removed from the JSX Element type in a future release.