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.

Practice

1. In React, how do you correctly attach a click event handler to a button?

easy

A. <button onclick="handleClick()">Click me</button>

B. <button onClick={handleClick}>Click me</button>

C. <button OnClick={handleClick}>Click me</button>

D. <button onClick="handleClick()">Click me</button>

Solution

1. Step 1: Understand React event naming

   React uses camelCase for event handlers, so onClick is correct, not lowercase or capitalized differently.

2. Step 2: Attach event handler as a function reference

   In React, event handlers are passed as functions, not strings. So {handleClick} is correct, not a string like "handleClick()".

3. Final Answer:

   <button onClick={handleClick}>Click me</button> -> Option B

4. Quick Check:

   React event handler syntax = <button onClick={handleClick}>Click me</button> [OK]

Hint: Use camelCase and pass function, not string, for events [OK]

Common Mistakes:

• Using lowercase event names like onclick
• Passing event handler as a string instead of function
• Capitalizing event names incorrectly

2. Which of the following is the correct syntax to define an event handler function inside a React functional component?

easy

A. const handleClick = () => console.log('Clicked');

B. handleClick = () => console.log('Clicked');

C. handleClick() => { console.log('Clicked'); }

D. def handleClick() { console.log('Clicked'); }

Solution

1. Step 1: Recognize JavaScript function syntax in React

   React functional components use JavaScript, preferring arrow functions declared with const for event handlers.

2. Step 2: Identify correct arrow function syntax

   const handleClick = () => console.log('Clicked'); is correct. Other options have syntax errors such as missing variable declaration or invalid syntax.

3. Final Answer:

   const handleClick = () => console.log('Clicked'); -> Option A

4. Quick Check:

   Arrow function syntax = const handleClick = () => console.log('Clicked'); [OK]

Hint: Use arrow functions for event handlers inside components [OK]

Common Mistakes:

• Using invalid function syntax like 'handleClick() => {}'
• Using Python syntax 'def' in JavaScript
• Not assigning function to a variable

3. What will be the output when the button is clicked in this React component?

import React, { useState } from 'react';

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

medium

A. Button shows 'Clicked 0 times' initially and increments on each click

B. Button shows 'Clicked 1 times' initially and increments on click

C. Button shows 'Clicked 0 times' and never changes

D. Button causes a runtime error on click

Solution

1. Step 1: Understand useState initial value

   The state variable count starts at 0, so the button initially shows 'Clicked 0 times'.

2. Step 2: Analyze handleClick behavior

   Each click calls handleClick, which updates count by adding 1, so the displayed count increments on each click.

3. Final Answer:

   Button shows 'Clicked 0 times' initially and increments on each click -> Option A

4. Quick Check:

   useState increments count on click = Button shows 'Clicked 0 times' initially and increments on each click [OK]

Hint: useState updates UI on event, so count increments on clicks [OK]

Common Mistakes:

• Thinking state does not update on click
• Confusing initial state with updated state
• Expecting runtime errors from correct code

4. Identify the error in this React event handler code:

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

medium

A. Missing parentheses when calling handleClick

B. Button element must be self-closing

C. Incorrect event name 'onclick' should be 'onClick'

D. handleClick function is not defined

Solution

1. Step 1: Check event handler attribute name

   React requires camelCase event names, so onclick is incorrect; it should be onClick.

2. Step 2: Verify function definition and usage

   The function handleClick is correctly defined and passed as a reference, so no error there.

3. Final Answer:

   Incorrect event name 'onclick' should be 'onClick' -> Option C

4. Quick Check:

   React event names are camelCase = Incorrect event name 'onclick' should be 'onClick' [OK]

Hint: React event names use camelCase, not lowercase [OK]

Common Mistakes:

• Using lowercase event names
• Forgetting to pass function reference
• Misunderstanding JSX syntax for elements

5. You want to create a React component that increments a counter only when the user presses the Enter key inside an input box. Which is the correct way to handle this event?

function EnterCounter() {
  const [count, setCount] = React.useState(0);
  const handleKeyDown = (event) => {
    // What condition should be here?
  };
  return (
    <>
      <input type="text" onKeyDown={handleKeyDown} aria-label="Enter key counter input" />
      <p>Count: {count}</p>
    </>
  );
}

hard

A. if (event.which === 'Enter') setCount(count + 1);

B. if (event.keyCode === 13) setCount(count + 1);

C. if (event.key === 13) setCount(count + 1);

D. if (event.key === 'Enter') setCount(count + 1);

Solution

1. Step 1: Identify the correct property for key detection

   Modern React and browsers use event.key as a string to detect keys, so checking event.key === 'Enter' is correct.

2. Step 2: Understand deprecated properties

   event.keyCode and event.which are deprecated or inconsistent; also, comparing event.key to a number like 13 is incorrect.

3. Final Answer:

   if (event.key === 'Enter') setCount(count + 1); -> Option D

4. Quick Check:

   Use event.key string for key detection = if (event.key === 'Enter') setCount(count + 1); [OK]

Hint: Use event.key === 'Enter' to detect Enter key presses [OK]

Common Mistakes:

• Using deprecated event.keyCode or event.which
• Comparing event.key to a number instead of string
• Not checking key inside keydown event