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} />);
})

Hono•2y ago•

4 replies

Sun

Setting up Client Components

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} />);
})

Setting up Client Components

Similar Threads

Setting up Client Components

Similar Threads

Similar Threads

Similar Threads