Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React 19 #865

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

React 19 #865

wants to merge 4 commits into from

Conversation

imjordanxd
Copy link

@imjordanxd imjordanxd commented Dec 11, 2024

Overview

Adds support for React 19. I don't have a lot of time to add this and would appreciate any help 🙏

New context rendering

In React 19, we can render a context as follows:

const Context = React.createContext();
function Foo({ children }) {
	return <Context>{children}</Context>;
}

The React Element produced by this is identical (as far as I can see!) to the React Element produced if we were to render:

const Context = React.createContext();
function Foo({ children }) {
	return <Context.Provider>{children}</Context.Provider>;
}

Because of this change, serialisation is broken. We don't know how a context was rendered. Therefore, we can't produce a JSX string that accurately reflects the original JSX that was written. To support a wide range of React versions, we should serialise the new context rendering (<Context>...</Context>) as <Context.Provider>...</Context.Provider>. This isn't exactly a 1:1 serialisation but React will still treat the JSX the same.

Furthermore, the element type symbols have changed between React major versions. For example:

// React 18:
<Context.Provider /> // Symbol.for('react.provider');

// React 19:
<Context /> /*or*/ <Context.Provider />  // Symbol.for("react.context");

This means we cannot bundle react-is as a dependency and allow a wide range or React peer dependencies. We should expect consumers of this package to provide react-is as a dependency which is aligned to their React version. This is a breaking change.

@imjordanxd imjordanxd changed the title React 19 Draft: React 19 Dec 11, 2024
@imjordanxd imjordanxd marked this pull request as draft December 11, 2024 08:04
@imjordanxd imjordanxd changed the title Draft: React 19 React 19 Dec 11, 2024
@oscarcarlstrom
Copy link

Great! This would be much appreciated! 🙏

@imjordanxd imjordanxd marked this pull request as ready for review December 17, 2024 22:50
@@ -7,7 +7,7 @@
/* eslint-disable react/no-string-refs */

import React, { Fragment, Component } from 'react';
import { createRenderer } from 'react-test-renderer/shallow';
import ShallowRenderer from 'react-shallow-renderer';
Copy link
Author

@imjordanxd imjordanxd Dec 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this import crashes the test runner for some reason

update: it's because it depends on React internals and they've changed between majors. I wonder can the tests that depend on this be deleted. Not entirely sure what value they provide

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants