Add support for React 18 server rendering #1409
Conversation
in React 18, the API for rendering and hydrating elements is updating. This updates the syntax to support both syntax so that users of both APIs can still work with the same interface.
|
@kylemellander Big thanks for trying this out! Please try to use React.version rather than just checking if the function exists to determine what API to use. |
| @@ -150,7 +152,8 @@ function render(el: Element, railsContext: RailsContext): void { | |||
| } | |||
|
|
|||
| // Hydrate if available and was server rendered | |||
| const shouldHydrate = !!ReactDOM.hydrate && !!domNode.innerHTML; | |||
| // @ts-expect-error potentially present if React 18 or greater | |||
There was a problem hiding this comment.
Please check if the @ts-expect-error messages are still needed.
There was a problem hiding this comment.
Unfortunately, these are still needed. We could upgrade the types library to the react beta to get around having to do this.
There was a problem hiding this comment.
I think the pros are:
- Using an API that is up-to-date with the latest React.
The cons are a couple:
- It would be depending on beta code for our types
- It could potentially have removed deprecated types that are no longer used in React 18. This could be seen as a positive as well because it would alert us to changes in the API that we might be using.
My recommendation would be to ignore it for now until it gets out of beta and then upgrade the types.
|
|
||
| export default function reactHydrate(domNode: Element, reactElement: ReactElement): void | Element | Component { | ||
| if (supportsReactCreateRoot) { | ||
| // @ts-expect-error potentially present if React 18 or greater |
There was a problem hiding this comment.
Please check if the @ts-expect-error messages are still needed.
|
|
||
| export default function reactRender(domNode: Element, reactElement: ReactElement): void | Element | Component { | ||
| if (supportsReactCreateRoot) { | ||
| // @ts-expect-error potentially present if React 18 or greater |
There was a problem hiding this comment.
Please check if the @ts-expect-error messages are still needed.
|
@Judahmeek please review and merge if you approve and CI Passes. @kylemellander Thanks for the contribution! Please consider joining us on our Slack for React and Rails. |
|
We're getting this error now:
|
With React 18, the client-side rendering process has been updated. To prepare the way for supporting React 18's features, the new way of rendering needs to be adopted.
This change creates some helpers that support both methods of rendering and hydrating on the client to start the path forward to supporting React 18.
NOTE: Because there is no current support for testing against React versions, I am forgoing adding extra tests for this. If there is an approach to doing this, we can add that.
This change is