Hono client components package? #2771

MrAlex94 · 2024-02-09T12:03:04Z

MrAlex94
Feb 9, 2024

Hono v4.0.0 has just released with "client components". A great alternative to React, having properly designed Clerk components would be handy.

Client Components

hono/jsx was originally designed to run server-side as an alternative to template engines such as Mustache. Server-side JSX is an interesting experiment, creating a new stack to combine with HTMX and Alpine.js. But that's not all.

Now, hono/jsx runs on the client as well. We call it hono/jsx/dom or Client Components.

The exact same code as React runs with Hono's JSX.
import { useState } from 'hono/jsx'
import { render } from 'hono/jsx/dom'

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

function App() {
  return (
    <html>
      <body>
        <Counter />
      </body>
    </html>
  )
}

const root = document.getElementById('root')
render(<App />, root)
The Hooks listed below are also implemented and you can create Client Components just like in React.

useContext

useEffect

useState

useCallback

use

startTransition

useDeferredValue

useMemo

useLayoutEffect

Memo

isValidElement

Ultra-small

The hono/jsx/dom is fast and ultra-small. It has a smaller JSX runtime dedicated to the DOM in addition to the common server and client ones. Just specify hono/jsx/dom instead of hono/jsx in tsconfig.json.

"jsx": "react-jsx",
"jsxImportSource": "hono/jsx/dom"

The above counter example is 2.8KB with Brotli compression.

In comparison, React is 47.3 KB for the same thing.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Clerk

Hono client components package? #2771

{{title}}

Replies: 0 comments

Select a reply

Clerk

Hono client components package? #2771

MrAlex94 Feb 9, 2024

Replies: 0 comments

MrAlex94
Feb 9, 2024