Handling events in React - Performance & Optimization

Performance: Handling events in React

MEDIUM IMPACT

This affects how quickly the app responds to user actions and how efficiently the browser updates the UI after events.

Attaching event handlers to buttons in React

React

function MyButton() {
  const handleClick = React.useCallback(() => {
    console.log('Clicked');
  }, []);
  return <button onClick={handleClick}>Click me</button>;
}

Uses useCallback to memoize the handler, so the same function reference is used across renders, reducing re-renders and event re-registrations.

📈 Performance GainReduces re-renders and event handler re-registrations, improving interaction responsiveness and CPU efficiency.

Attaching event handlers to buttons in React

React

function MyButton() {
  return <button onClick={() => console.log('Clicked')}>Click me</button>;
}

Creates a new function on every render causing React to think the prop changed, triggering extra re-renders and re-registrations.

📉 Performance CostTriggers multiple re-renders and re-registrations on each render, increasing CPU usage and slowing interaction response.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline arrow function in JSX	Multiple event handler re-registrations	Multiple reflows if state changes unnecessarily	Higher paint cost due to frequent updates	[X] Bad
Memoized handler with useCallback	Single event handler registration	Minimal reflows only when needed	Lower paint cost due to fewer updates	[OK] Good

Rendering Pipeline

When an event occurs, React calls the event handler, which may update state causing React to schedule a re-render. React then reconciles the virtual DOM and updates the real DOM as needed.

→JavaScript Execution

→Reconciliation

→DOM Updates

→Paint

⚠️ BottleneckJavaScript Execution and Reconciliation when handlers cause unnecessary state updates or re-renders.

Core Web Vital Affected

INP

This affects how quickly the app responds to user actions and how efficiently the browser updates the UI after events.

Optimization Tips

1Avoid inline functions in JSX event handlers to prevent unnecessary re-renders.

2Use React.useCallback to memoize event handlers when passing them to child components.

3Keep event handlers lightweight to reduce JavaScript execution time during interactions.

Performance Quiz - 3 Questions

Why is using an inline arrow function for event handlers in React often less performant?

A Because arrow functions are slower than normal functions

B Because it creates a new function on every render causing extra re-renders

C Because React does not support arrow functions

D Because inline functions block the main thread

DevTools: React DevTools and Chrome Performance panel

How to check: Use React DevTools Profiler to record interactions and check how many times components re-render. Use Chrome Performance to see scripting time during events.

What to look for: Look for excessive re-renders or long scripting times during user interactions indicating inefficient event handling.