/Knowledge/sources/honojs__hono/llms-full/client-components-counter-example--a12d57493b23.md
Client Components: Counter example - hono-docs
Client Components: Counter example Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt counter example Sum...
Client Components: Counter example
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#counter-example
Summary
Here is an example of a simple counter, the same code works as in React. ```tsx import { useState } from 'hono/jsx' import { render } from 'hono/jsx/dom' function Counter() { const [count, setCount] = useState(0) return ( Count: {count}...
Content
Here is an example of a simple counter, the same code works as in React.
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)
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#counter-example",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / Client Components > Counter example",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 89,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "Client Components: Counter example",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki