React Hooks Explorer
Pick any hook from the sidebar and explore interactive playgrounds with animated visualizations. See exactly when re-renders fire, how dependencies are compared, and how each hook behaves under the hood.
useState
Add reactive state to components
tsx
1function Counter() {2 const [count, setCount] = useState(0);34 return (5 <div>6 <p>Count: {count}</p>7 <button onClick={() => setCount(count + 1)}>8 Increment9 </button>10 <button onClick={() => setCount(prev => prev - 1)}>11 Decrement12 </button>13 <button onClick={() => setCount(0)}>14 Reset15 </button>16 </div>17 );18}
visualization
Waiting for updates
count
0
R1
Component
Idle
Click a button to see useState in action.
Note: This tool runs entirely in your browser. No code is sent to a server.