Hono•7mo ago

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「無用」OP•7mo ago

I also posted a gh discussion, but there was no response https://github.com/orgs/honojs/discussions/2596

kalaivanan•7mo ago

hi, Have you find the way to render client component?

Sun「無用」OP•7mo ago

nope

Gaming

Programming

Setting up Client Components