Skip to main content

Adding Interactivity

Events, state, and how React re-renders when data changes.

Official docs

Mirrors Adding Interactivity — react.dev.

Responding to Events​

function Counter() {
  function handleClick() {
    console.log('clicked');
  }
  return <button onClick={handleClick}>Click me</button>;
}

State with useState​

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

State as a Snapshot​

Each render has its own state snapshot. Calling setState schedules a re-render with the updated value.

Further Reading​