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.