jsx/dom : Improve compatibility with React 19

[usualoma]

What is the feature you are proposing?

https://react.dev/blog/2024/04/25/react-19

• ref as a prop
• use
• <Context> as a provider
  • feat(jsx/dom): implement "<Context> as a provider" for compatibility with React 19 #2962
• Cleanup functions for refs
  • feat(jsx/dom): Compatible implementation of new features in React 19 (document metadata, "form" element and related hooks, and new behavior of hooks) #2960
• useDeferredValue initial value
  • feat(jsx/dom): Compatible implementation of new features in React 19 (document metadata, "form" element and related hooks, and new behavior of hooks) #2960
• Support for Document Metadata
  • feat(jsx/dom): Compatible implementation of new features in React 19 (document metadata, "form" element and related hooks, and new behavior of hooks) #2960
• Support for stylesheets
  • feat(jsx/dom): Compatible implementation of new features in React 19 (document metadata, "form" element and related hooks, and new behavior of hooks) #2960
• Support for async scripts
  • feat(jsx/dom): Compatible implementation of new features in React 19 (document metadata, "form" element and related hooks, and new behavior of hooks) #2960
• Support for preloading resources
• form with useActionState, useFormStatus, useOptimistic
  • feat(jsx/dom): Compatible implementation of new features in React 19 (document metadata, "form" element and related hooks, and new behavior of hooks) #2960
• bump reactAPICompatVersion
  • feat(jsx): bump react compat version to 19.0.0-hono-jsx #2963

[usualoma]

Hi @yusukebe
Please create a "react-19-compat" branch. Merge each PR into it, and when it's all together, we can merge "react-19-compat" into "main" or "next".

[yusukebe]

@usualoma

React 19!!!! Created https://github.com/honojs/hono/tree/react-19-compat

[yusukebe]

I want to have the form.

[usualoma]

@yusukebe

Thank you! > react-19-compat

I've added the "form with useActionState, useFormStatus, useOptimistic" to the to-do list!

[yusukebe]

Thanks @usualoma !

I like the action attribute in form, though I've never used React 19 so many times. This makes handling a form action very simple.

export default function Form() {
  async function action(formData: FormData) {
    const query = formData.get('query')?.toString() ?? 'no query'
    console.log(query)
  }
  return (
    <form action={action}>
      <input name="query" />
      <button type="submit">Submit</button>
    </form>
  )
}

[usualoma]

'Support for preloading resources' is a bit tricky compared to the existing JSX behaviour, so I'd like to put it on the back burner and perfect the other features.

[yusukebe]

Hey @usualoma

I think we can close this issue now.

[usualoma]

Yes, let's close this!

[usualoma]

The following was not implemented but will be considered separately if requested.
Support for preloading resources

I close this issue as the others have been implemented.

[sor4chi]

From React 19, there is an additional function for allocating arrays for caching used by React Compiler under the module name react/compiler-runtime, is it correct to assume that this does not directly affect React 19 compatibility and therefore is not provided?

The default value of the so-called React Compiler's runtimeModule option is react/compiler-runtime, which is the module to use there.