React · Theory

Events in React

Theory

21/94

Events in React

React events are camelCase: onClick, onChange, onSubmit. You pass a function: onClick={handleClick}. If you write onClick={handleClick()} it runs during render — classic bug. Synthetic events wrap the browser event so the API is the same across browsers.

Need the event in a delayed callback? Save e.target.value first, or call e.persist() in very old React. In modern React 17+ pooling is gone, but still copy values you need later. For lists, pass an id: onClick={() => remove(id)}.

Events in React — click Save → console — saved. onClick={handleClick} not onClick={handleClick()}.

Exam tip

onClick={fn} not fn(). camelCase.

Example

// Events
export default function Save() {
  function handleClick() {
    console.log("saved");
  }
  return <button onClick={handleClick}>Save</button>;
}

Events in React — click Save → console: saved. onClick={handleClick} not onClick={handleClick()}.

Short notes

RulecamelCase, pass the function.
TraponClick={fn()} on render.
List : () => remove(id).

React · Theory

Events in React

← All stacks

Theory

21/94

Events in React

Events in React — click Save → console — saved. onClick={handleClick} not onClick={handleClick()}.

Exam tip

onClick={fn} not fn(). camelCase.

Example

// Events
export default function Save() {
  function handleClick() {
    console.log("saved");
  }
  return <button onClick={handleClick}>Save</button>;
}

Events in React — click Save → console: saved. onClick={handleClick} not onClick={handleClick()}.

Short notes

RulecamelCase, pass the function.
TraponClick={fn()} on render.
List : () => remove(id).

Events in React

Example

Short notes

Questions

Events in React

Example

Short notes

Questions