Hello!

"use client";

import { useState } from "react";

export function ClientComponentA() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <div>
        <h1>Hello!</h1>
        <span>Count: {count}</span>
        <br />
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </main>
  );
}

{
  '$$typeof': Symbol(react.transitional.element),
  type: 'main',
  key: null,
  props: {
    children: {
      '$$typeof': Symbol(react.transitional.element),
      type: 'div',
      key: null,
      props: [Object],
      _owner: [Object],
      _store: {}
    }
  },
  _owner: {
    parent: { parent: [Object], type: 'div', owner: [Object], stack: null },
    type: {
      '$$typeof': Symbol(react.lazy),
      _payload: [Promise],
      _init: [Function: readChunk],
      _debugInfo: []
    },
    owner: {
      name: 'Chapter4_reconciliation',
      env: 'Server',
      key: null,
      owner: null,
      props: [Object]
    },
    stack: null
  },
  _store: {}
}