React 19 Interactive Lab
Counter.jsx

Component Code Workbench

Component.jsx
JSX / React 19
1function Counter() {
2  const [count, setCount] = React.useState(0);
3  
4  return (
5    <div className="p-6 rounded-xl border border-border bg-card shadow-lg max-w-sm text-center">
6      <h1 className="text-2xl font-bold mb-4 text-foreground">Count: {count}</h1>
7      <button 
8        onClick={() => setCount(c => c + 1)}
9        className="px-6 py-2.5 bg-cyan-500 hover:bg-cyan-400 text-black text-xs font-bold uppercase tracking-wider rounded-lg shadow-md transition-all"
10      >
11        Increment State
12      </button>
13    </div>
14  );
15}
Simulation Logs
[2] Fiber root initialized.
[1] Initial render complete.

Simulation Ready

Click "Run Simulation" to observe Virtual DOM & Fiber reconciliation.