React 19 Beta - How to Upgrade

Is React 19 Beta available on NPM?

Yes, Let's explore how to upgrade step by step instructions for upgrading your app to React 19 Beta.

React 19 Beta version is aimed at libraries, helping them get ready for React 19. React App developers are advised to transition to version 18.3.0 and await the stable release of React 19. React Dev is actively collaborating with libraries, incorporating feedback to refine and make essential adjustments.

React 19 Beta Installation

Let's check how to Install React 19 Beta. To Install React 19 Beta, New JSX Transform is required. Already react introduced a new JSX transform in 2020 to improve bundle size and we can use JSX without importing React.

If the new transform is not enabled, we can see the below warning:
Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform

To install the latest version of React 19 Beta and React DOM

npm install react@beta react-dom@beta

NOTE: If we are using TypeScript, you also need to update the types. Once React 19 is available as a stable version, then we can install the types from @types/react and @types/react-dom. Now its beta version, during the beta version, the types are available in different packages which need to be apply in our package.json

{
  "dependencies": {
    "@types/react": "npm:types-react@alpha",
    "@types/react-dom": "npm:types-react-dom@alpha"
  },
  "overrides": {
    "@types/react": "npm:types-react@alpha",
    "@types/react-dom": "npm:types-react-dom@alpha"
  }
}

React 19 Removed deprecated APIs

Prior to diving into React 19 Beta development, ensure to review all removed deprecated APIs.

Removed propTypes and defaultProps for functional components.

if we want to use propTypes, It is recommended to migrate the TypeScript or another type-checking solution.

DefaultProps removed from functional components. whereas Class components will continue to support defaultProps.

  import PropTypes from 'prop-types';
  function Heading({text}) {
    return <h1>{text}</h1>;
  }
  Heading.propTypes = {
    text: PropTypes.string,
  };
  Heading.defaultProps = {
    text: 'Hello, world!',
  };

   interface Props {
     text?: string;
   }
   function Heading({text = 'Hello, world!'}: Props) {
     return <h1>{text}</h1>;
   }

Removed contextTypes and getChildContext

We are using Legacy Context to communicate with each and every component without having to pass props down manually at every level.

The Legacy Context, is mostly used in class components with the help of contextTypes and getChildContext APIs, has been replaced with contextType due to the presence of gentle bugs that might easily be overlooked

  import PropTypes from 'prop-types';
  class Child extends React.Component {
    static contextTypes = {
      foo: PropTypes.string.isRequired,
    };
    render() {
      return <div>{this.context.foo}</div>;
    }
  }

  const FooContext = React.createContext();
  class Child extends React.Component {
    static contextType = FooContext;
    render() {
      return <div>{this.context}</div>;
    }
  }

Removed string refs

We know that, by using refs, React will allows us to access DOM elements directly

  class MyComponent extends React.Component {
    componentDidMount() {
      this.refs.input.focus();
    }
    render() {
      return <input ref='input' />;
    }
  }

 class MyComponent extends React.Component {
   componentDidMount() {
      this.input.focus();
   }
   render() {
      return <input ref={input => this.input = input} />;
   }
  }

React.createFactory is removed

createFactory lets us to create a function that generates React elements of a given type.

const factory = createFactory(type)

  import { createFactory } from 'react';
  const button = createFactory('button');

   const button = <button />;

react-test-renderer/shallow is removed

In React 18, React Dev enhanced react-test-renderer/shallow by re-exporting react-shallow-renderer. However, in React 19, React Dev is removing this package

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