`useRequestContext` not working when using `await` and the `html` helper together

[2G14]

What version of Hono are you using?

4.11.1

What runtime/platform is your app running on? (with version if possible)

Node.js 20.15.1, @hono/node-server 1.19.7

What steps can reproduce the bug?

Descendant components in a parent component using await and the html helper will not be able to use useRequestContext.

import { serve } from '@hono/node-server';
import { Hono } from 'hono';
import { html } from 'hono/html';
import { jsxRenderer, useRequestContext } from 'hono/jsx-renderer';

const app = new Hono();

app.use(jsxRenderer());

const Parent = async (props: { children?: any }) => {
  // An error occurs when using `await` and the `html` helper together.
  // => `Error: RequestContext is not provided.`
  await new Promise((r) => setTimeout(r, 1000));
  return html`<div>${props.children}</div>`;
};
// The following is a safe pattern.
// const Parent = async (props: { children?: any }) => {
//   return html`<div>${props.children}</div>`;
// };
// const Parent = async (props: { children?: any }) => {
//   return <div>{props.children}</div>;
// };
// const Parent = async (props: { children?: any }) => {
//   await new Promise((r) => setTimeout(r, 1000));
//   return <div>{props.children}</div>;
// };

const Child = () => {
  // I want to use the request context in a child component.
  const c = useRequestContext();
  return <div>hoge</div>;
};

app.get('/', async (c) => {
  return c.render(
    <Parent>
      <Child />
    </Parent>
  );
});

serve({
  fetch: app.fetch,
  port: 8080,
});

What is the expected behavior?

I expect useRequestContext to function correctly when using the await and html helpers in conjunction.

What do you see instead?

Error: RequestContext is not provided.
    at useRequestContext (file:///usr/src/app/node_modules/hono/dist/middleware/jsx-renderer/index.js:49:11)
    at Child (/usr/src/app/src/index.tsx:30:13)
    at JSXFunctionNode.toStringToBuffer (file:///usr/src/app/node_modules/hono/dist/jsx/base.js:178:26)
    at JSXFunctionNode.toString (file:///usr/src/app/node_modules/hono/dist/jsx/base.js:106:12)
    at html (file:///usr/src/app/node_modules/hono/dist/helper/html/index.js:21:29)
    at Parent (/usr/src/app/src/index.tsx:14:10)
    at async Promise.all (index 1)
    at async stringBufferToString (file:///usr/src/app/node_modules/hono/dist/utils/html.js:17:26)
    at async Promise.all (index 1)
    at async stringBufferToString (file:///usr/src/app/node_modules/hono/dist/utils/html.js:17:26)

Additional information

If this is the specification, I would appreciate any ideas on how to avoid it. Thank you.

I am not good at English, so I am creating this using a translation AI. I apologize if there are any inappropriate expressions.

[EdamAme-x]

Please try to use this.
https://hono.dev/docs/middleware/builtin/context-storage

[2G14]

@EdamAme-x

Please try to use this. https://hono.dev/docs/middleware/builtin/context-storage

Thank you! It seems to be working without any problems.

What is the difference between useRequestContext and getContext?
I couldn't understand how to use them differently even after looking at the documentation.
https://hono.dev/docs/middleware/builtin/context-storage
https://hono.dev/docs/middleware/builtin/jsx-renderer#userequestcontext

[EdamAme-x]

My view is that when using an HTML helper, child JSX components become just syntax sugar, and this goes beyond the scope of what Hono JSX can manage via its context.

hono/src/middleware/jsx-renderer/index.ts

Line 55 in d3abeb1

RequestContext.Provider,

I believe we can close this issue as a workaround has been provided, but do you think this is a documentation issue?

[2G14]

@EdamAme-x

I believe we can close this issue as a workaround has been provided, but do you think this is a documentation issue?

I believe there are two issues with the documentation.

1. html act as functional component.

Looking at the documentation below, the html helper appears to be equivalent to a functional component.
I feel that the behavior of the sample code I sent is not as intended.

https://hono.dev/docs/helpers/html#act-as-functional-component

Act as functional component
Since html returns an HtmlEscapedString, it can act as a fully functional component without using JSX.

https://hono.dev/docs/helpers/html#receives-props-and-embeds-values

Receives props and embeds values

interface SiteData {
  title: string
  description: string
  image: string
  children?: any
}
const Layout = (props: SiteData) => html`
<html>
<head>
  <meta charset="UTF-8">
  <title>${props.title}</title>
  <meta name="description" content="${props.description}">
  <head prefix="og: http://ogp.me/ns#">
  <meta property="og:type" content="article">
  <!-- More elements slow down JSX, but not template literals. -->
  <meta property="og:title" content="${props.title}">
  <meta property="og:image" content="${props.image}">
</head>
<body>
  ${props.children}
</body>
</html>
`

const Content = (props: { siteData: SiteData; name: string }) => (
  <Layout {...props.siteData}>
    <h1>Hello {props.name}</h1>
  </Layout>
)

app.get('/', (c) => {
  const props = {
    name: 'World',
    siteData: {
      title: 'Hello <> World',
      description: 'This is a description',
      image: 'https://example.com/image.png',
    },
  }
  return c.html(<Content {...props} />)
})

2. The difference between useRequestContext and getContext

Furthermore, regarding the difference between useRequestContext and getContext, as mentioned earlier, I don't think it can be understood from the documentation.

I apologize, but I am still having trouble understanding these.