H
Hono•9mo ago
Sun「無用」

Setting up Client Components

I'm trying to setup a simple counter client component, code can be seen below. Code is minimal so it's easy to test it (first time using client components on hono) When using the example given in the docs, an "obvious" error that document is not defined would happen, since I'm in the server. Code: 
function Counter({start}) {
  const [count, setCount] = useState(start ?? 0);

  useEffect(() => {
    console.log(`Count is now ${count}`)
  }, [count]);

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      {count}
    </button>
  )
}

app.get("/counter", async (c) => [
  const counterState = await db.getCounterState()

  // Does not update properly, just stays at 0 forever.
  return c.html(<Counter start={counterState} />);
})
function Counter({start}) {
  const [count, setCount] = useState(start ?? 0);

  useEffect(() => {
    console.log(`Count is now ${count}`)
  }, [count]);

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      {count}
    </button>
  )
}

app.get("/counter", async (c) => [
  const counterState = await db.getCounterState()

  // Does not update properly, just stays at 0 forever.
  return c.html(<Counter start={counterState} />);
})
3 Replies
Sun「無用」
Sun「無用」OP•9mo ago
I also posted a gh discussion, but there was no response https://github.com/orgs/honojs/discussions/2596
kalaivanan
kalaivanan•9mo ago
hi, Have you find the way to render client component?
Sun「無用」
Sun「無用」OP•9mo ago
nope

Did you find this page helpful?