Title: dev-notes-7-1 – Make WordPress Core --- # Tag Archives: dev-notes-7-1 [ ](https://profiles.wordpress.org/jsnajdr/) [Jarda Snajdr](https://profiles.wordpress.org/jsnajdr/) 10:37 am _on_ May 27, 2026 Tags: [7.1 ( 4 )](https://make.wordpress.org/core/tag/7-1/), [dev-notes ( 620 )](https://make.wordpress.org/core/tag/dev-notes/), dev-notes-7- 1    # 󠀁[React 19 Upgrade in WordPress](https://make.wordpress.org/core/2026/05/27/react-19-upgrade-in-wordpress/)󠁿 WordPress is upgrading from ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. [https://reactjs.org](https://reactjs.org/) 18 to React 19. This change will first ship in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/) pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress. org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. (version 23.3) and is expected to land in WordPress 7.1. In June 2024, WordPress 6.6 shipped React 18.3, which added deprecation warnings to help developers prepare for this upgrade (see [Preparation for React 19 Upgrade](https://make.wordpress.org/core/2024/06/07/preparation-for-react-19-upgrade/)). Now that the migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. work is complete, this post covers everything plugin and theme developers need to know. ## Timeline * **Gutenberg plugin**: React 19 will be merged into the Gutenberg `trunk` branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". after the 7.0 release. It will ship in a Gutenberg release shortly after, with npm packages following. * **WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.**: The upgrade is targeted for WordPress 7.1, providing a full release cycle for testing. We encourage developers to begin testing as early as possible once the Gutenberg plugin release with React 19 is available. ## Removed APIs The following functions have been removed from React 19 after a long deprecation period. In WordPress, these were deprecated since WordPress 6.2 (March 2023): ### `render` and `hydrate` `ReactDOM.render()` and `ReactDOM.hydrate()` have been removed. Use `createRoot()` and `hydrateRoot()` instead: ```notranslate // Before (deprecated). import { render } from '@wordpress/element'; render( , document.getElementById( 'root' ) ); // After. import { createRoot } from '@wordpress/element'; const root = createRoot( document.getElementById( 'root' ) ); root.render( ); ``` ### `unmountComponentAtNode` `ReactDOM.unmountComponentAtNode()` has been removed. Use `root.unmount()` instead: ```notranslate // Before (deprecated). import { unmountComponentAtNode } from '@wordpress/element'; unmountComponentAtNode( document.getElementById( 'root' ) ); // After. root.unmount(); ``` ### `findDOMNode` `ReactDOM.findDOMNode()` has been removed from React 19. However, `@wordpress/element` continues to export a polyfill for `findDOMNode` to ease the transition. Note that the `react-dom` script itself will no longer include this function — only the `wp- element` script will provide it. We recommend migrating away from `findDOMNode` by using refs instead, as it was already discouraged in earlier versions of React. ### `defaultProps` for function components As noted in the [React 18.3 dev note](https://make.wordpress.org/core/2024/06/07/preparation-for-react-19-upgrade/),` defaultProps` for function components is no longer supported. Use ES6 default parameters instead: ```notranslate // Before (no longer supported). function MyComponent( { size } ) { return
; } MyComponent.defaultProps = { size: 100 }; // After. function MyComponent( { size = 100 } ) { return
; } ``` ## Changed behavior ### The `inert` attribute is now a boolean The HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. `inert` attribute has changed from a `string` type to a `boolean` in React 19. If your code sets `inert` as a string(` inert="true"` or `inert=""`), update it to use a boolean value: ```notranslate // Before.
// After.
``` ### Ref callbacks can return cleanup functions Ref callbacks can now optionally return a cleanup function, similar to `useEffect`. React will call the cleanup function when the element is removed from the DOM. This is a powerful new pattern that reduces the need for separate `useEffect` hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. to manage DOM element lifecycle. ```notranslate // New pattern: ref callback with cleanup.
{ if ( node ) { const handler = () => { /* ... */ }; node.addEventListener( 'scroll', handler ); return () => node.removeEventListener( 'scroll', handler ); } } } /> ``` **Important**: If your existing ref callbacks return a value (e.g., returning something other than `undefined`), React 19 may interpret that as a cleanup function. Make sure your ref callbacks either return `undefined` or a valid cleanup function. ### `forwardRef` is no longer needed In React 19, function components can accept `ref` as a regular prop. `forwardRef` still works but is considered deprecated and will be removed in a future version. ```notranslate // Before. const MyInput = forwardRef( ( props, ref ) => { return ; } ); // After. function MyInput( { ref, ...props } ) { return ; } ``` ## New APIs available React 19 introduces several new APIs, now available through `@wordpress/element`: * [`use`](https://react.dev/reference/react/use) — Read a resource (Promise or Context) during render. * [`useActionState`](https://react.dev/reference/react/useActionState) — Manage state based on form action results. * [`useOptimistic`](https://react.dev/reference/react/useOptimistic) — Show optimistic UIUI User interface state while an async action is in progress. * [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus) — Access the status of a parent form. From React 19.2: * [`Activity`](https://react.dev/reference/react/Activity) — Hide and show parts of the UI while preserving their state and DOM. * [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent) — Extract non-reactive logic from effects. ## TypeScript type changes React 19 includes a major update to its TypeScript types. Developers using TypeScript should be aware of the following: ### Ref types The `MutableRefObject` type is deprecated. The type inference rules for `useRef` and `RefObject` have changed, especially regarding declaring values as “`T` or ` null`“. Update your code to use the new `RefObject` type. ### `ReactElement` props type changed from `any` to `unknown` The `ReactElement` type now types its props as `unknown` instead of `any`. This reveals previously unsound access to props that was silently allowed before. This manifests especially in `cloneElement` calls, where reading or setting props on a cloned element now requires the element type to explicitly support those props. ### HTML element prop conflicts Many WordPress components extend native HTML elements, accepting all props that ( for example) a `
` accepts plus custom props. If the HTML standard adds a new prop to `
` with a name that conflicts with a custom prop, TypeScript may report errors. Developers may need to resolve naming conflicts (as was the case with `onToggle` in this migration). For a comprehensive list of TypeScript changes, see the [React 19 typechecking guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#typescript-changes). ## How to test your plugin 1. **Install the latest Gutenberg plugin** that includes React 19 (version TBD). 2. **Enable development mode** (`SCRIPT_DEBUG` set to `true` in `wp-config.php`) to get detailed warnings and errors. 3. **Test all major features** of your plugin — especially any code that uses the removed APIs (`render`, `hydrate`, `unmountComponentAtNode`, `findDOMNode`, `defaultProps` for function components). 4. **Check the browser console** for React warnings and errors. React 19 has improved error reporting and may surface issues that were previously silent. 5. **Test iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. interactions** if your plugin renders content inside iframes or communicates between frames, as there have been subtle behavior changes in this area. ## Further reading * [Official React 19 upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)— Full list of breaking changes, deprecations, and new features. * [React 19 blog post](https://react.dev/blog/2024/12/05/react-19) — Overview of what’s new in React 19. * [Gutenberg tracking issue #71336](https://github.com/WordPress/gutenberg/issues/71336)— Tracking the migration effort. * [Gutenberg PR #61521](https://github.com/WordPress/gutenberg/pull/61521) — The main implementation PR. * [Preparation for React 19 Upgrade (WP 6.6 dev note)](https://make.wordpress.org/core/2024/06/07/preparation-for-react-19-upgrade/)— The earlier dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. from the React 18.3 upgrade. ## Call for testing We encourage all plugin and theme developers to test their code with the Gutenberg plugin as soon as the React 19 release is available. Early testing helps us identify and fix issues before the upgrade reaches WordPress Core. If you encounter bugs, please report them on the [Gutenberg GitHub repository](https://github.com/WordPress/gutenberg/issues/new/choose). --- Props to [@tyxla](https://profiles.wordpress.org/tyxla/), [@Mamaduka](https://profiles.wordpress.org/mamaduka/), [@jsnajdr](https://profiles.wordpress.org/jsnajdr/), [@ellatrix](https://profiles.wordpress.org/ellatrix/), [@aduth](https://profiles.wordpress.org/aduth/), [@youknowriad](https://profiles.wordpress.org/youknowriad/), and [@mciampini](https://profiles.wordpress.org/mciampini/) for their contributions to this migration. [#7-1](https://make.wordpress.org/core/tag/7-1/), [#dev-notes](https://make.wordpress.org/core/tag/dev-notes/), [#dev-notes-7-1](https://make.wordpress.org/core/tag/dev-notes-7-1/) * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fcore%2F2026%2F05%2F27%2Freact-19-upgrade-in-wordpress%2F%23respond&locale=en_US)