Inline vs function handlers in React - Performance Comparison

Performance: Inline vs function handlers

MEDIUM IMPACT

This affects interaction responsiveness and rendering performance by controlling how event handlers are created and reused in React components.

Handling button clicks in a React component

React

import { useCallback } from 'react';

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

Reuses the same function reference on each render, avoiding unnecessary re-renders and reducing CPU work.

📈 Performance GainSingle function created once, fewer re-renders, better input responsiveness

Handling button clicks in a React component

React

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

Creates a new function on every render causing React to think props changed, triggering extra re-renders and more work.

📉 Performance CostTriggers 1 new function creation and potential re-render per render cycle

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline function handler	No extra DOM ops	Causes extra React re-renders	No direct paint cost	[X] Bad
Stable function handler reference	No extra DOM ops	Minimal React re-renders	No direct paint cost	[OK] Good

Rendering Pipeline

Inline handlers create new function objects each render, causing React to treat props as changed, triggering reconciliation and re-rendering. This increases work in the commit phase and can delay input response.

→Reconciliation

→Commit

→Paint

⚠️ BottleneckReconciliation due to new function references causing unnecessary updates

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering performance by controlling how event handlers are created and reused in React components.

Optimization Tips

1Avoid creating new inline functions inside JSX on every render.

2Define event handlers outside the render function or memoize them.

3Use React DevTools Profiler to detect unnecessary re-renders caused by handler changes.

Performance Quiz - 3 Questions

Why can inline function handlers cause slower React app performance?

A They block the main thread for long periods

B They increase the bundle size significantly

C They create new function objects each render causing extra re-renders

D They cause layout shifts on the page

DevTools: React DevTools Profiler

How to check: Record interactions and look for frequent re-renders of components with inline handlers compared to stable handlers.

What to look for: High render counts and wasted renders indicate inline handlers causing performance issues.