Responding to events

What an event handler is

React uses camelCase names (onClick, not onclick) and receives a SyntheticEvent wrapper around the native event.

Handlers are the right place to update state, call props callbacks, or start a Nest mutation.

// Correct — React calls later
<button onClick={handleSave}>Save</button>
<button onClick={() => deleteTicket(id)}>Delete</button>

// Wrong — runs during render
<button onClick={deleteTicket(id)}>Delete</button>

// Wrong — runs during render
<button onClick={deleteTicket(id)}>Delete</button>

// Right — runs on click
<button onClick={() => deleteTicket(id)}>Delete</button>

Pointer and click handlers

onClick is the everyday action handler for buttons and interactive rows.

onMouseEnter / onMouseLeave are useful for hover UI, but keyboard users need an equivalent (focus styles or onFocus).

function RowActions({ onDelete }) {
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Save</button>
      <button type="button" onClick={onDelete}>
        Delete
      </button>
    </form>
  );
}

// Wrong — deletes AND submits the form
<form onSubmit={save}>
  <button onClick={onDelete}>Delete</button>
</form>

// Right
<form onSubmit={save}>
  <button type="button" onClick={onDelete}>Delete</button>
  <button type="submit">Save</button>
</form>

Typing: onChange and controlled inputs

Read text with e.target.value (or e.currentTarget.value).

Checkboxes usually use e.target.checked.

const [title, setTitle] = useState('');
const [urgent, setUrgent] = useState(false);

<input
  value={title}
  onChange={(e) => setTitle(e.target.value)}
/>
<input
  type="checkbox"
  checked={urgent}
  onChange={(e) => setUrgent(e.target.checked)}
/>

// Wrong — React warns; typing feels stuck
<input value={title} />

// Right
<input value={title} onChange={(e) => setTitle(e.target.value)} />

Focus: onFocus and onBlur

Blur validation is friendlier than validating on every keystroke for long forms.

RelatedTarget on focus/blur events can tell you where focus is going (useful for dropdowns).

const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);

function handleBlur() {
  if (!email.includes('@')) {
    setError('Enter a valid email');
  } else {
    setError(null);
  }
}

<label>
  Email
  <input
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    onBlur={handleBlur}
    onFocus={() => setError(null)}
  />
</label>
{error && <p role="alert">{error}</p>}

// Wrong — "a" is instantly "invalid email"
onChange={(e) => {
  setEmail(e.target.value);
  setError(e.target.value.includes('@') ? null : 'Invalid');
}}

// Right — update on change, validate on blur
onChange={(e) => setEmail(e.target.value)}
onBlur={() => setError(email.includes('@') ? null : 'Invalid')}

Forms: onSubmit and preventDefault

Read drafts from state inside the submit handler, then call Nest (via Query mutation / Axios).

Disable the submit button while pending to prevent double posts.

function CreateForm({ onCreate }) {
  const [title, setTitle] = useState('');

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!title.trim()) return;
    await onCreate({ title });
    setTitle('');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={title} onChange={(e) => setTitle(e.target.value)} />
      <button type="submit">Create</button>
    </form>
  );
}

// Wrong — full page reload; React state looks "wiped"
function handleSubmit() {
  createTicket({ title });
}

// Right
function handleSubmit(e: React.FormEvent) {
  e.preventDefault();
  createTicket({ title });
}

Keyboard handlers

Escape often closes dialogs; Enter may confirm if not inside a textarea.

Do not block browser accessibility shortcuts without a strong reason.

function Dialog({ open, onClose, children }) {
  if (!open) return null;
  return (
    <div
      role="dialog"
      tabIndex={-1}
      onKeyDown={(e) => {
        if (e.key === 'Escape') onClose();
      }}
    >
      {children}
    </div>
  );
}

// Wrong
if (e.keyCode === 27) onClose();

// Right
if (e.key === 'Escape') onClose();

Other useful handlers (quick map)

Scroll: onScroll (throttle if heavy).

Clipboard: onCopy / onCut / onPaste.

Drag: onDragStart / onDrop (needs preventDefault on dragOver for drop targets).

Media/load: onLoad / onError on images.

Composition (IME): onCompositionStart / onCompositionEnd for CJK input.

onClick / onDoubleClick     → activate
onChange                   → value changed (inputs)
onFocus / onBlur           → entered / left field
onSubmit                   → form submit (use preventDefault)
onKeyDown / onKeyUp        → shortcuts, Escape
onMouseEnter / onMouseLeave→ hover (pair with focus styles)
onPointerDown / onPointerUp→ pointer-accurate interactions
onScroll                   → scroll position
onPaste                    → clipboard into a field

Propagation and stopping events

preventDefault stops the browser’s default action (link navigate, form submit).

stopPropagation stops React/parent listeners from seeing the event.

<li onClick={() => openTicket(id)}>
  {title}
  <button
    type="button"
    onClick={(e) => {
      e.stopPropagation();
      deleteTicket(id);
    }}
  >
    Delete
  </button>
</li>

// Wrong — delete also triggers row open
<li onClick={() => open(id)}>
  <button type="button" onClick={() => remove(id)}>X</button>
</li>

// Right
<button
  type="button"
  onClick={(e) => {
    e.stopPropagation();
    remove(id);
  }}
>
  X
</button>

Keep in mind

• Pass functions; do not call them while rendering.
• Forms: onSubmit + preventDefault; buttons that should not submit: type="button".
• Blur = leave-field validation; Change = live value; Focus = enter-field UX.
• When Nest is involved, the handler starts the request — rendering never should.