jsx/dom : Improve compatibility with React 19

[usualoma]

What is the feature you are proposing?

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

• [x] ref as a prop
• [x] use
• [x] <Context> as a provider
  • #2962
• [ ] Cleanup functions for refs
  • #2960
• [ ] useDeferredValue initial value
  • #2960
• [ ] Support for Document Metadata
  • #2960
• [ ] Support for stylesheets
  • #2960
• [ ] Support for async scripts
  • #2960
• Support for preloading resources
• [ ] form with useActionState, useFormStatus, useOptimistic
  • #2960
• [x] bump reactAPICompatVersion
  • #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.