hono/jsx/dom not re-rendering on state change

hiii, can someone tell me if i'm doing something wrong with client side rendering/hydration using hono/jsx/dom? it seems to mount and render properly but then state changes don't cause it to update.

onClick={() => alert('...')}

onClick={() => alert('...')}

onClick={() => alert('...')}

onClick={() => alert('...')} works as expected but

onClick={() => setState(...)}

onClick={() => setState(...)}

onClick={() => setState(...)}

onClick={() => setState(...)} does nothing, nothing in the console and no action.

useEffect

useEffect

useEffect

useEffect also does nothing. i think i followed the Client Components page pretty closely

this is the component in question, it's rendered on both the client and server

import { useState } from "hono/jsx";

export default function () {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

import { useState } from "hono/jsx";

export default function () {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

import { useState } from "hono/jsx";

export default function () {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

import { useState } from "hono/jsx";

export default function () {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

this is the server-rendered page container, which includes the script tag for importing the client application and rendering it

import { html, raw } from "hono/html";

const Page = (props: PageProps) =>
  html`<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>${props.title}</title>
  </head>
  <body>
    <div id="appRoot">
      ${props.children}
    </div>

    <script type="module">
      import App from "${props.templatePath}";
      import { render } from 'https://esm.sh/hono/jsx/dom';
      import { jsx } from 'https://esm.sh/hono/jsx/dom/jsx-runtime';

      const props = ${raw(JSON.stringify(props.appProps))};
      const app = jsx(App, props);
      const root = document.getElementById('appRoot');

      render(app, root);
    </script>
  </body>
</html>
`;

import { html, raw } from "hono/html";

const Page = (props: PageProps) =>
  html`<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>${props.title}</title>
  </head>
  <body>
    <div id="appRoot">
      ${props.children}
    </div>

    <script type="module">
      import App from "${props.templatePath}";
      import { render } from 'https://esm.sh/hono/jsx/dom';
      import { jsx } from 'https://esm.sh/hono/jsx/dom/jsx-runtime';

      const props = ${raw(JSON.stringify(props.appProps))};
      const app = jsx(App, props);
      const root = document.getElementById('appRoot');

      render(app, root);
    </script>
  </body>
</html>
`;

import { html, raw } from "hono/html";

const Page = (props: PageProps) =>
  html`<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>${props.title}</title>
  </head>
  <body>
    <div id="appRoot">
      ${props.children}
    </div>

    <script type="module">
      import App from "${props.templatePath}";
      import { render } from 'https://esm.sh/hono/jsx/dom';
      import { jsx } from 'https://esm.sh/hono/jsx/dom/jsx-runtime';

      const props = ${raw(JSON.stringify(props.appProps))};
      const app = jsx(App, props);
      const root = document.getElementById('appRoot');

      render(app, root);
    </script>
  </body>
</html>
`;

import { html, raw } from "hono/html";

const Page = (props: PageProps) =>
  html`<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>${props.title}</title>
  </head>
  <body>
    <div id="appRoot">
      ${props.children}
    </div>

    <script type="module">
      import App from "${props.templatePath}";
      import { render } from 'https://esm.sh/hono/jsx/dom';
      import { jsx } from 'https://esm.sh/hono/jsx/dom/jsx-runtime';

      const props = ${raw(JSON.stringify(props.appProps))};
      const app = jsx(App, props);
      const root = document.getElementById('appRoot');

      render(app, root);
    </script>
  </body>
</html>
`;

i've tried variations, like putting it in the

<head>

<head>

<head>

<head>, writing it as a script instead of a module, but it doesn't seem to make a difference

i am using deno on the server and hono 4.4.10. the code is bundled for the client using esbuild with

format: "esm"

format: "esm"

format: "esm"

format: "esm" and the

jsxImportSource

jsxImportSource

jsxImportSource

jsxImportSource set to

hono/jsx/dom

hono/jsx/dom

hono/jsx/dom

hono/jsx/dom.

Client Components - Hono

Ultrafast web framework for Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Node.js, and others. Fast, but not only fast.

hono/jsx/dom not re-rendering on state change

Similar Threads

Similar Threads

Similar Threads