Passing arguments to handlers in React - Performance & Optimization

Performance: Passing arguments to handlers

MEDIUM IMPACT

This affects interaction responsiveness and rendering speed when event handlers receive arguments.

Passing arguments to event handlers in React components

React

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

function handleClick(value) {
  console.log(value);
}

Uses useCallback to memoize the handler, so the same function instance is passed on each render, reducing unnecessary re-renders.

📈 Performance GainPrevents extra reconciliations and reduces rendering work, improving interaction responsiveness.

Passing arguments to event handlers in React components

React

function MyButton() {
  return <button onClick={() => handleClick('arg')}>Click me</button>;
}

function handleClick(value) {
  console.log(value);
}

Creates a new arrow function on every render, causing React to treat it as a new prop and potentially re-render child components unnecessarily.

📉 Performance CostTriggers extra React reconciliations and may cause multiple re-renders per update.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline arrow function in JSX	No direct DOM ops, but triggers React reconciliation	0	Low paint cost but extra React work	[X] Bad
Memoized handler with useCallback	No extra DOM ops, stable React props	0	Minimal paint cost, efficient React updates	[OK] Good

Rendering Pipeline

When a new function is created inline in JSX, React treats it as a new prop causing reconciliation and possible re-render of child components. This affects the React rendering pipeline by increasing the work in the commit phase.

→Reconciliation

→Commit

→Paint

⚠️ BottleneckReconciliation phase due to new function references causing unnecessary updates

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering speed when event handlers receive arguments.

Optimization Tips

1Avoid creating new functions inline in JSX for event handlers.

2Use useCallback to memoize handlers that need arguments.

3Keep handler references stable to reduce unnecessary React re-renders.

Performance Quiz - 3 Questions

Why is creating an inline arrow function in JSX for event handlers a performance concern?

A Because it increases the bundle size significantly.

B Because arrow functions are slower to execute than normal functions.

C Because it creates a new function on every render causing React to re-render components unnecessarily.

D Because it blocks the main thread during rendering.

DevTools: React DevTools Profiler

How to check: Record interactions and look for components re-rendering when handlers are passed inline vs memoized.

What to look for: Repeated renders of components without prop changes indicate performance issues from new handler functions.

Practice

1. What is the correct way to pass an argument id to a click handler in React without calling the function immediately?

easy

A. onClick={handleClick.bind(id)}

B. onClick={() => handleClick(id)}

C. onClick={handleClick}

D. onClick={handleClick(id)}

Solution

1. Step 1: Understand function call vs function reference

   Using handleClick(id) calls the function immediately, which is not desired on render.

2. Step 2: Use arrow function to delay call

   Wrapping the call in an arrow function () => handleClick(id) passes a function reference that calls handleClick with id only when clicked.

3. Final Answer:

   onClick={() => handleClick(id)} -> Option B

4. Quick Check:

   Use arrow function to pass argument without immediate call [OK]

Hint: Wrap call in arrow function to pass args without running [OK]

Common Mistakes:

• Calling function directly in JSX causing immediate execution
• Using bind incorrectly without context
• Passing function reference without arguments

2. Which of the following is the correct syntax to pass multiple arguments event and id to a handler handleClick in React?

easy

A. onClick={handleClick(event, id)}

B. onClick={() => handleClick(event, id)}

C. onClick={handleClick.bind(id, event)}

D. onClick={(event) => handleClick(event, id)}

Solution

1. Step 1: Recognize event parameter handling

   The event object is passed automatically by React to the event handler, so it must be received as a parameter.

2. Step 2: Use arrow function to pass extra argument

   Using (event) => handleClick(event, id) correctly receives the event and passes both event and id to the handler.

3. Final Answer:

   onClick={(event) => handleClick(event, id)} -> Option D

4. Quick Check:

   Arrow function with event param passes multiple args correctly [OK]

Hint: Use arrow with event param to pass event plus extra args [OK]

Common Mistakes:

• Calling handler directly causing immediate execution
• Using bind with wrong argument order
• Ignoring event parameter in arrow function

3. Given the code below, what will be logged when the button is clicked?

function MyButton() {
  const handleClick = (id) => {
    console.log('Clicked id:', id);
  };
  return <button onClick={() => handleClick(5)}>Click me</button>;
}

medium

A. Clicked id: 5

B. Clicked id: undefined

C. Clicked id: () => handleClick(5)

D. Nothing is logged

Solution

1. Step 1: Understand the arrow function usage in onClick

   The onClick uses an arrow function that calls handleClick(5) when clicked, passing 5 as argument.

2. Step 2: Check what handleClick logs

   handleClick logs the string plus the passed id, so it logs 'Clicked id: 5'.

3. Final Answer:

   Clicked id: 5 -> Option A

4. Quick Check:

   Arrow function calls handler with 5, logs 'Clicked id: 5' [OK]

Hint: Arrow function calls handler with argument on click [OK]

Common Mistakes:

• Expecting immediate log on render
• Confusing function reference with function call
• Ignoring argument passed inside arrow function

4. Identify the error in this React code snippet:

function ListItem({ id }) {
  return <li onClick={handleClick(id)}>Item {id}</li>;
  function handleClick(id) {
    alert('Clicked ' + id);
  }
}

medium

A. The alert syntax is incorrect

B. handleClick is not defined inside the component

C. handleClick is called immediately during render, not on click

D. The onClick attribute should be on a button, not li

Solution

1. Step 1: Check how onClick is assigned

   Using onClick={handleClick(id)} calls handleClick immediately during render, which is wrong.

2. Step 2: Correct way to assign onClick

   It should be wrapped in a function like onClick={() => handleClick(id)} to call on user click.

3. Final Answer:

   handleClick is called immediately during render, not on click -> Option C

4. Quick Check:

   Direct call in JSX runs function immediately, must wrap in arrow [OK]

Hint: Wrap handler call in arrow to avoid immediate execution [OK]

Common Mistakes:

• Calling handler directly in JSX
• Misplacing function definition
• Thinking alert syntax is wrong

5. You want to create a list of buttons that alert their own index when clicked. Which code correctly passes the index to the handler without causing all alerts on render?

const List = () => {
  const handleClick = (index) => alert(`Button ${index} clicked`);
  return (
    <div>
      {[0,1,2].map((i) => (
        <button key={i} onClick={/* ??? */}>Button {i}</button>
      ))}
    </div>
  );
};

hard

A. onClick={() => handleClick(i)}

B. onClick={handleClick(i)}

C. onClick={handleClick}

D. onClick={handleClick.bind(i)}

Solution

1. Step 1: Avoid immediate call in map

   Using handleClick(i) calls the function immediately during render, causing all alerts at once.

2. Step 2: Use arrow function to pass index on click

   Wrapping in () => handleClick(i) delays the call until the button is clicked, passing the correct index.

3. Final Answer:

   onClick={() => handleClick(i)} -> Option A

4. Quick Check:

   Arrow function passes index on click, prevents immediate call [OK]

Hint: Use arrow function in map to pass index without immediate call [OK]

Common Mistakes:

• Calling handler directly in map causing immediate alerts
• Passing handler without arguments losing index info
• Using bind with incorrect context