React Event Handling Patterns

Proper event handling in React is crucial for interactive applications. Here's how to do it right.

Basic Event Handling#

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

// Named handler (better for debugging)
function Button() {
  const handleClick = () => {
    console.log('clicked');
  };

  return <button onClick={handleClick}>Click me</button>;
}

// Event object
function Input() {
  const handleChange = (event) => {
    console.log('Value:', event.target.value);
  };

  return <input onChange={handleChange} />;
}

Passing Arguments#

// Using arrow function (creates new function each render)
function TodoList({ todos, onDelete }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
          <button onClick={() => onDelete(todo.id)}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

// Using data attributes
function TodoList({ todos, onDelete }) {
  const handleDelete = (event) => {
    const id = event.currentTarget.dataset.id;
    onDelete(id);
  };

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
          <button data-id={todo.id} onClick={handleDelete}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

// Using curried function
function TodoList({ todos, onDelete }) {
  const handleDelete = (id) => () => {
    onDelete(id);
  };

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
          <button onClick={handleDelete(todo.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

Event Pooling (Legacy)#

// React 16 and earlier pooled events
// This was removed in React 17+

// Pre-React 17 issue
function OldComponent() {
  const handleClick = (event) => {
    // event properties are nullified after handler
    setTimeout(() => {
      console.log(event.target);  // null!
    }, 100);
  };

  // Solution was event.persist()
  const handleClickFixed = (event) => {
    event.persist();
    setTimeout(() => {
      console.log(event.target);  // works
    }, 100);
  };
}

// React 17+ - no pooling, no persist() needed
function ModernComponent() {
  const handleClick = (event) => {
    setTimeout(() => {
      console.log(event.target);  // works!
    }, 100);
  };

  return <button onClick={handleClick}>Click</button>;
}

Preventing Default#

// Prevent form submission
function Form() {
  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form data
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">Submit</button>
    </form>
  );
}

// Prevent link navigation
function CustomLink({ href, children, onClick }) {
  const handleClick = (event) => {
    event.preventDefault();
    onClick?.(href);
    // Custom navigation logic
  };

  return <a href={href} onClick={handleClick}>{children}</a>;
}

Stop Propagation#

// Stop event bubbling
function Dropdown({ onClose }) {
  const handleInnerClick = (event) => {
    event.stopPropagation();
    // Don't trigger parent click handler
  };

  return (
    <div onClick={onClose}>
      <div className="dropdown-content" onClick={handleInnerClick}>
        {/* Click here won't close */}
      </div>
    </div>
  );
}

// Modal pattern
function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}

Keyboard Events#

function SearchInput({ onSearch }) {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      onSearch(event.target.value);
    }

    if (event.key === 'Escape') {
      event.target.blur();
    }
  };

  return <input onKeyDown={handleKeyDown} placeholder="Search..." />;
}

// With modifiers
function ShortcutHandler({ children }) {
  const handleKeyDown = (event) => {
    // Cmd/Ctrl + S
    if ((event.metaKey || event.ctrlKey) && event.key === 's') {
      event.preventDefault();
      handleSave();
    }

    // Cmd/Ctrl + Z
    if ((event.metaKey || event.ctrlKey) && event.key === 'z') {
      event.preventDefault();
      handleUndo();
    }
  };

  return <div onKeyDown={handleKeyDown}>{children}</div>;
}

Focus and Blur#

function Input({ onFocus, onBlur }) {
  const [focused, setFocused] = useState(false);

  const handleFocus = (event) => {
    setFocused(true);
    onFocus?.(event);
  };

  const handleBlur = (event) => {
    setFocused(false);
    onBlur?.(event);
  };

  return (
    <input
      className={focused ? 'focused' : ''}
      onFocus={handleFocus}
      onBlur={handleBlur}
    />
  );
}

// Focus trap
function FocusTrap({ children }) {
  const containerRef = useRef(null);

  const handleKeyDown = (event) => {
    if (event.key !== 'Tab') return;

    const focusable = containerRef.current.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );

    const first = focusable[0];
    const last = focusable[focusable.length - 1];

    if (event.shiftKey && document.activeElement === first) {
      event.preventDefault();
      last.focus();
    } else if (!event.shiftKey && document.activeElement === last) {
      event.preventDefault();
      first.focus();
    }
  };

  return (
    <div ref={containerRef} onKeyDown={handleKeyDown}>
      {children}
    </div>
  );
}

Touch Events#

function SwipeableCard({ onSwipe }) {
  const [startX, setStartX] = useState(0);
  const [offsetX, setOffsetX] = useState(0);

  const handleTouchStart = (event) => {
    setStartX(event.touches[0].clientX);
  };

  const handleTouchMove = (event) => {
    const currentX = event.touches[0].clientX;
    setOffsetX(currentX - startX);
  };

  const handleTouchEnd = () => {
    if (Math.abs(offsetX) > 100) {
      onSwipe(offsetX > 0 ? 'right' : 'left');
    }
    setOffsetX(0);
  };

  return (
    <div
      style={{ transform: `translateX(${offsetX}px)` }}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      Card Content
    </div>
  );
}

TypeScript Event Types#

// Common event types
function TypedEvents() {
  // Mouse event
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log(event.clientX, event.clientY);
  };

  // Change event
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
  };

  // Form event
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
  };

  // Keyboard event
  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log(event.key);
  };

  // Focus event
  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
    event.target.select();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        onFocus={handleFocus}
      />
      <button onClick={handleClick}>Submit</button>
    </form>
  );
}

// Generic handler type
type EventHandler<E extends React.SyntheticEvent> = (event: E) => void;

// Handler with element type
function Input({
  onChange,
}: {
  onChange: React.ChangeEventHandler<HTMLInputElement>;
}) {
  return <input onChange={onChange} />;
}

Debounced Events#

import { useState, useCallback, useRef, useEffect } from 'react';

// Debounce hook
function useDebounce(callback, delay) {
  const timeoutRef = useRef(null);

  const debouncedFn = useCallback((...args) => {
    clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(() => {
      callback(...args);
    }, delay);
  }, [callback, delay]);

  useEffect(() => {
    return () => clearTimeout(timeoutRef.current);
  }, []);

  return debouncedFn;
}

// Usage
function SearchInput({ onSearch }) {
  const [query, setQuery] = useState('');

  const debouncedSearch = useDebounce((value) => {
    onSearch(value);
  }, 300);

  const handleChange = (event) => {
    const value = event.target.value;
    setQuery(value);
    debouncedSearch(value);
  };

  return <input value={query} onChange={handleChange} />;
}

Event Delegation#

// Handle events at parent level
function TodoList({ todos, onToggle, onDelete }) {
  const handleClick = (event) => {
    const action = event.target.dataset.action;
    const id = event.target.closest('[data-id]')?.dataset.id;

    if (!id || !action) return;

    if (action === 'toggle') onToggle(id);
    if (action === 'delete') onDelete(id);
  };

  return (
    <ul onClick={handleClick}>
      {todos.map(todo => (
        <li key={todo.id} data-id={todo.id}>
          <span data-action="toggle">{todo.text}</span>
          <button data-action="delete">Delete</button>
        </li>
      ))}
    </ul>
  );
}

Custom Event Hooks#

// useClickOutside
function useClickOutside(ref, handler) {
  useEffect(() => {
    const listener = (event) => {
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }
      handler(event);
    };

    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);

    return () => {
      document.removeEventListener('mousedown', listener);
      document.removeEventListener('touchstart', listener);
    };
  }, [ref, handler]);
}

// Usage
function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef(null);

  useClickOutside(ref, () => setIsOpen(false));

  return (
    <div ref={ref}>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      {isOpen && <div className="menu">Content</div>}
    </div>
  );
}

Best Practices#

Handlers:
✓ Use named functions for readability
✓ Extract complex logic to functions
✓ Keep handlers close to usage
✓ Use useCallback when passing down

Performance:
✓ Avoid inline arrow functions in lists
✓ Use event delegation for many items
✓ Debounce frequent events
✓ Memoize callbacks appropriately

TypeScript:
✓ Use proper event types
✓ Type event.target correctly
✓ Use generic handlers when needed
✓ Prefer React event types

Avoid:
✗ Inline handlers for complex logic
✗ Missing preventDefault when needed
✗ Ignoring cleanup in useEffect
✗ Unnecessary event.stopPropagation

React event handling is straightforward but has nuances. Use named handlers for clarity, proper TypeScript types for safety, and patterns like debouncing for performance. Understand event bubbling and when to use preventDefault and stopPropagation. For complex scenarios, create custom hooks that encapsulate event logic and cleanup.