useState and Event Handlers

State plus a setter

useState(initial) returns the current value and a setter. Calling the setter schedules a re-render with the new value; the component function runs again and returns updated JSX. Event handlers are passed as props such as onClick and onChange. Hooks must be called at the top level of a component, in the same order every render, never inside conditions or loops. State is local to each component instance.

Data that changes over time

State drives re-renders; updates are batched and must be immutable.

A counter clicked twice, run

I ran this with React 19.3 and react-dom 19.3 on Node.js 22, compiling JSX with esbuild 0.28. Browser-style examples use jsdom 29 as a fake DOM (imported from a small setup-dom.mjs file) and act() to apply updates. The button starts at "Clicked 0 times"; after two clicks, React re-renders and the text reads "Clicked 2 times".

import "./setup-dom.mjs";   // test setup: jsdom provides a browser-like DOM in Node
import { useState, act } from "react";
import { createRoot } from "react-dom/client";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}
const root = createRoot(document.getElementById("root"));
await act(() => root.render(<Counter />));
const button = document.querySelector("button");
console.log(button.textContent);
await act(() => button.click());
await act(() => button.click());
console.log(button.textContent);

Output:

Clicked 0 times
Clicked 2 times

Keep state minimal

Store only what cannot be computed from props or other state; derive the rest during rendering.

त्वरित जाँच: Where can hooks like useState be called?

• At the top level of a component or custom hook, never inside conditions or loops
• Anywhere, including inside if statements
• Only inside event handlers
• Only in class components