Making ready for React 19: a information for WordPress 6.6 customers

As WordPress builders, we steadily combine tradition React parts into our topics and plugins to create dynamic and responsive person interfaces.

With the upcoming unlock of React 19, it’s an important to arrange for adjustments and deprecations that would affect our present codebases. WordPress 6.6, which was once just lately launched, contains React 18.3. This model is just about similar to 18.2 however provides warnings for deprecated options that will help you get ready for React 19.

Addressing those deprecations is very important to verify compatibility with React 19, and ignoring them may end up in insects or problems to your tradition blocks, plugins, or topics when React 19 is launched and incorporated in WordPress.

This text outlines each and every deprecation, supplies code examples, and guides you thru changing deprecated options to deal with easy capability.

Got rid of deprecations in React

A number of deprecated APIs and contours had been got rid of to streamline the React library and inspire perfect practices. This segment covers the important thing adjustments and the best way to replace your code accordingly.

1. Elimination of defaultProps for serve as parts

React 19 will take away defaultProps for serve as parts in want of ES6 default parameters. In step with the WordPress workforce, this deprecation is maximum recurrently utilized in plugins and topics.

As a WordPress developer, you may use defaultProps to offer default values for props to your serve as parts, making sure that parts behave appropriately despite the fact that positive props aren’t handed.

Here’s what your present code might appear to be with defaultProps:

serve as CustomButton({ label, colour }) {
    go back { label };
}

CustomButton.defaultProps = {
    label: 'Click on me',
    colour: 'blue',
};

On this instance, a CustomButton element has default label and colour values supplied by means of defaultProps. With React 19, this may throw a caution error, urging you to make use of ES6 default parameters as an alternative.

This is the up to date code with ES6 default parameters:

serve as CustomButton({ label = 'Click on me', colour = 'blue' }) {
    go back { label };
}

The usage of ES6 default parameters, the default values at the moment are immediately within the serve as signature, making the code more uncomplicated to learn and deal with.

2. Elimination of propTypes for serve as parts

propTypes was once deprecated in React 15.5.0 and can also be utterly got rid of within the React bundle in v19. Should you’re the usage of propTypes, it’s advisable that you just migrate to TypeScript or some other type-checking resolution.

You may have been the usage of propTypes to validate the props handed in your serve as parts to verify they obtain the right kind varieties and values. As an example:

import PropTypes from 'prop-types';

serve as CustomButton({ label, colour }) {
    go back { label };
}

CustomButton.defaultProps = {
    label: 'Click on me',
    colour: 'blue',
};

CustomButton.propTypes = {
    label: PropTypes.string,
    colour: PropTypes.string,
};

These days, you’ll get started the usage of TypeScript for those type-checkings:

form CustomButtonProps = {
    label?: string;
    colour?: string;
};

const CustomButton = ({ label = 'Click on me', colour = 'blue' }: CustomButtonProps) => {
    go back { label };
};

3. Elimination of Legacy Context (contextTypes and getChildContext)

Given the longstanding nature of many plugins and codebases in WordPress, you may nonetheless be the usage of the legacy contextTypes and getChildContext APIs to your elegance parts. Those APIs have been used to move knowledge from a father or mother element to its descendants with out explicitly passing props at each and every stage.

Then again, it’s essential to notice that Legacy Context was once deprecated in React 16.6.0 and shall be got rid of in React v19. This alteration is meant to make React reasonably smaller and sooner, because the Legacy Context API had refined insects that have been steadily simple to omit.

The legacy means has been changed with the brand new contextType API.

Right here’s an instance of the way you will be the usage of the deprecated Context API in a WordPress plugin to move international settings, such because the web site name, from a father or mother element to a kid element with out prop drilling:

import PropTypes from 'prop-types';

elegance SettingsProvider extends React.Part {
  static childContextTypes = {
    siteTitle: PropTypes.string.isRequired,
  };

  getChildContext() {
    go back { siteTitle: 'My WordPress Website online' };
  }

  render() {
    go back ;
  }
}

elegance SettingsConsumer extends React.Part {
  static contextTypes = {
    siteTitle: PropTypes.string.isRequired,
  };

  render() {
    go back 
Website online Name: {this.context.siteTitle}
;
  }
}

By contrast, the trendy method makes use of the createContext means. That is the process you must undertake as you get ready for React 19:

import React from 'react';

const SettingsContext = React.createContext();

elegance SettingsProvider extends React.Part {
  render() {
    go back (
      
        
      
    );
  }
}

elegance SettingsConsumer extends React.Part {
  static contextType = SettingsContext;

  render() {
    const { siteTitle } = this.context;
    go back 
Website online Name: { siteTitle }
;
  }
}

4. Elimination of string refs

The usage of string refs was once as soon as a commonplace technique to get admission to a DOM detail in React parts. Then again, they’ve been thought to be legacy since React 16.3.0 and shall be got rid of in v19.

Whilst string refs have been easy, they’d a number of problems, akin to attainable naming conflicts and a loss of flexibility.

Believe an instance of the usage of string refs in a WordPress tradition block. Believe you may have a tradition Gutenberg block that comes with an enter box, and you need the enter box to be targeted mechanically when the block is added to the editor. Right here’s how you will have accomplished this the usage of string refs:

elegance CustomBlock extends React.Part {
  componentDidMount() {
    this.refs.enter.center of attention();
  }

  render() {
    go back ;
  }
}

To arrange for React 19, you should update string refs with callback refs or the React.createRef API. Right here’s the similar instance the usage of a callback ref:

elegance CustomBlock extends React.Part {
  componentDidMount() {
    this.enter.center of attention();
  }

  render() {
    go back  (this.enter = enter)} placeholder="Input textual content..." />;
  }
}

5. Elimination of module trend factories

Some other deprecated characteristic that shall be got rid of in React 19 is module trend factories. This trend was once hardly used and brought about React to be reasonably greater and slower than vital.

Module trend factories allowed builders to create parts much less conventionally. Right here’s an instance of the way you will be the usage of it:

serve as SettingsPanelFactory() {
  go back {
    render() {
      go back (
        

          
Settings
          {/* different settings UI parts */}
        
      );
    }
  };
}

On this trend, SettingsPanelFactory returns an object the usage of a render means moderately than returning JSX immediately.

To conform to React 19, you should migrate module trend factories to common purposes that go back JSX immediately. Right here’s the up to date instance:

serve as SettingsPanel() {
  go back (
    

      
Settings
      {/* different settings UI parts */}
    
  );
}

6. Elimination of createFactory API

In React 19, React.createFactory is being got rid of. This system was once extra recurrently used ahead of JSX become broadly supported. It allowed builders to create React components with out the usage of JSX syntax.

Then again, with the superiority of JSX, createFactory has change into out of date and can also be changed with more effective, extra readable JSX code.

Right here’s an instance of the usage of createFactory to create a button detail. This may well be a part of a tradition WordPress plugin that dynamically generates button components in response to person enter:

import { createFactory } from 'react';

const button = createFactory('button');

serve as CustomButton() {
  go back button({ className: 'custom-button', form: 'button' }, 'Click on Me');
}

To replace this code for React 19, update createFactory with JSX. This alteration makes the code extra fashionable, readable, and maintainable:

serve as CustomButton() {
  go back Click on Me;
}

7. Elimination of react-test-renderer/shallow

React 19 gets rid of react-test-renderer/shallow to streamline the checking out utilities and inspire perfect practices. In React 18, react-test-renderer/shallow was once up to date to re-export react-shallow-renderer.

In the past, you will have used react-test-renderer/shallow to create shallow render assessments on your React parts:

import ShallowRenderer from 'react-test-renderer/shallow';

verify('MyComponent shallow render', () => {
  const renderer = new ShallowRenderer();
  renderer.render();
  const end result = renderer.getRenderOutput();
  anticipate(end result.form).toBe('div');
});

To conform to React 19, you wish to have to put in react-shallow-renderer:

npm set up react-shallow-renderer --save-dev

And replace your import:

import ShallowRenderer from 'react-shallow-renderer';

verify('MyComponent shallow render', () => {
  const renderer = new ShallowRenderer();
  renderer.render();
  const end result = renderer.getRenderOutput();
  anticipate(end result.form).toBe('div');
});

The React workforce recommends migrating to the React Checking out Library, which supplies extra tough checking out practices by means of specializing in how customers have interaction together with your parts.

To try this, set up the @testing-library/react library as a dev dependency:

npm set up @testing-library/react --save-dev

Subsequent, you’ll verify the similar element the usage of this contemporary method:

import { render, display screen } from '@testing-library/react';
import MyBlock from './MyBlock';

verify('MyBlock renders appropriately', () => {
  render();
  const detail = display screen.getByText('MyBlock content material');
  anticipate(detail).toBeInTheDocument();
});

Got rid of deprecations in React DOM

React DOM has additionally modified in React 19, with positive deprecated strategies got rid of. This segment outlines those adjustments and guides you thru updating your DOM-related code.

1. Elimination of react-dom/test-utils API

The react-dom/test-utils API can also be got rid of in React 19. This affects how we write assessments for our React parts. Particularly, the act application has been moved from react-dom/test-utils to the react bundle.

Moreover, maximum different utilities from react-dom/test-utils had been got rid of. Right here’s the best way to adapt your assessments to conform to those adjustments.

The act application is very important for making sure that every one updates linked in your assessments had been processed and implemented to the DOM. In React 19, you must import act immediately from react as an alternative of react-dom/test-utils.

// Sooner than
import { act } from 'react-dom/test-utils';

// Now
import { act } from 'react';

The React workforce additionally recommends migrating your assessments to the React Checking out Library for a contemporary and well-supported checking out enjoy. Listed here are some commonplace use circumstances and the best way to replace them.

The renderIntoDocument application shall be got rid of. You’ll update it with render from @testing-library/react.

// Sooner than
import { renderIntoDocument } from 'react-dom/test-utils';

renderIntoDocument();

// Now
import { render } from '@testing-library/react';

render();

In a similar fashion, the Simulate application for simulating occasions shall be got rid of. As a substitute, you should utilize fireEvent from @testing-library/react, which dispatches a real match at the detail.

// Sooner than
import { Simulate } from 'react-dom/test-utils';

const detail = report.querySelector('button');
Simulate.click on(detail);

// Now
import { fireEvent } from '@testing-library/react';

const detail = report.querySelector('button');
fireEvent.click on(detail);

Bear in mind that fireEvent dispatches an actual match, this means that it interacts with the detail extra naturally than the unreal occasions created by means of Simulate. To correctly perceive the React checking out library, learn its documentation.

2. Elimination of findDOMNode API

Some other vital trade coming to React 19 is the removing of ReactDOM.findDOMNode, which was once deprecated in React 16.6.0.

This serve as was once used to get admission to the underlying DOM node of a React element, but it surely had a number of drawbacks, akin to being sluggish to execute, fragile to refactoring, and breaking abstraction ranges.

As a substitute, you should utilize DOM refs, which give a extra dependable and environment friendly technique to have interaction with DOM components to your React parts.

Right here’s an instance of the usage of findDOMNode to make a choice the textual content in an enter box when the element mounts:

import { findDOMNode } from 'react-dom';

serve as AutoselectingInput() {
  useEffect(() => {
    const enter = findDOMNode(this);
    enter.make a selection()
  }, []);

  render() {
    go back ;
  }
}

To replace this code for React 19, update findDOMNode with a ref. This alteration makes the code extra tough and aligns it with fashionable React practices:

import React, { useEffect, useRef } from 'react';

serve as AutoselectingInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.present.make a selection();
  }, []);

  go back ;
}

3. Elimination of render API

With React 19, ReactDOM.render shall be got rid of. This system was once deprecated in React 18.0.0 in want of createRoot API from react-dom/consumer, which supplies a extra environment friendly and fashionable technique to initialize and render React packages. This alteration is a part of React’s ongoing effort to streamline and optimize the library.

In a normal WordPress setup, you will have a tradition block or a plugin that initializes a React app when the DOM is in a position. In the past, you can use ReactDOM.render:

import { render } from 'react-dom';
render(, report.getElementById('root'));

With React 19, you should utilize createRoot to initialize and render your React utility:

import { createRoot } from 'react-dom/consumer';
const root = createRoot(report.getElementById('root'));
root.render();

4. Elimination of unmountComponentAtNode API

React 19 additionally gets rid of the ReactDOM.unmountComponentAtNode means, which was once deprecated in React 18.0.0. This system was once used to unmount a React element from the DOM.

In React 19, you must migrate to the usage of the root.unmount() means, which is extra aligned with the up to date API for growing and hydrating roots.

// Sooner than
unmountComponentAtNode(report.getElementById('root'));

// Now
root.unmount();

5. Elimination of hydrate API

ReactDOM.hydrate was once deprecated in React 18 and shall be utterly got rid of in React 19.

The brand new means of the React DOM consumer API, hydrateRoot, replaces ReactDOM.hydrate, offering a extra environment friendly and fashionable technique to hydrate server-rendered React packages.

In a WordPress context, you may use server-side rendering (SSR) to ship preliminary HTML content material for sooner web page so much. To hydrate this content material into an interactive React utility, you can up to now use ReactDOM.hydrate:

import { hydrate } from 'react-dom';
import App from './App.js';

hydrate(
  ,
  report.getElementById('root')
);

With React 19, you should utilize hydrateRoot from react-dom/consumer for hydration:

import { hydrateRoot } from 'react-dom/consumer';
import App from './App.js';

hydrateRoot(
  report.getElementById('root'),
  
);

Got rid of deprecated TypeScript varieties

WordPress builders steadily use TypeScript so as to add form protection and reinforce code high quality in React parts. With React 19, a number of deprecated TypeScript varieties had been got rid of or relocated to extra related applications.

Working out those adjustments is an important for making sure your codebase stays tough and appropriate with the newest React model.

To help with the transition, the React workforce has supplied a device known as types-react-codemod, which will mechanically replace your codebase to deal with those adjustments.

To make use of it, run the next codemod command, which incorporates a number of transforms to replace deprecated varieties.

npx types-react-codemod@newest preset-19 ./path-to-app

The device additionally gives an interactive mode the place you’ll select particular transforms to use:

? Select transforms to use (Press  to make a choice,  to toggle all,  to invert variety, and  to continue)
❯◯ context-any
◉ deprecated-react-type
◉ deprecated-sfc-element
◉ deprecated-sfc
◉ deprecated-stateless-component
◯ implicit-children
◯ useCallback-implicit-any

Let’s check out some key adjustments with examples.

1. Ref cleanup required

With React 19, ref cleanup purposes reinforce form protection by means of implementing specific returns in ref callbacks. Implicit returns may cause TypeScript to misread the go back price.

// Sooner than
 (example = present)} />

// Now
 { example = present }} />

2. useRef calls for an issue

In the past, useRef might be known as with out arguments, resulting in attainable form problems. In React 19, useRef calls for an issue to make certain that refs are at all times mutable.

// Sooner than — @ts-expect-error: Anticipated 1 argument however noticed none
useRef();

// Now — right kind utilization with an issue
useRef(undefined);

3. Adjustments to the ReactElement TypeScript Sort

The default form for ReactElement props has modified from any to unknown, making improvements to form protection by means of requiring specific dealing with of unknown varieties.

// In the past, this was once 'any'
form Instance = ReactElement["props"];

// Now, that is 'unknown'
form Instance = ReactElement["props"];

In case your code trusted any, you should replace it to deal with unknown explicitly or forged it to any.

Abstract

As WordPress builders, staying up to date with the newest React developments is an important. This information guarantees you realize the quite a lot of adjustments coming to React so you’ll practice them in your WordPress tasks.

One final piece of knowledge: With React 19, the brand new JSX remodel shall be required. The excellent news is that it already comes with WordPress 6.6. If the brand new remodel isn’t enabled, you’ll see this caution:

Your app (or one among its dependencies) is the usage of an out of date JSX remodel. Replace to the trendy JSX remodel for sooner efficiency: https://react.dev/hyperlink/new-jsx-transform

All you must do is forestall the usage of React imports for JSX transformations, as they’re now not vital.

Did we omit anything else? Please percentage with us within the feedback segment!

The put up Making ready for React 19: a information for WordPress 6.6 customers seemed first on Kinsta®.

WP Hosting

[ continue ]