Inline vs function handlers in React - When to Use Which

The Big Idea

Discover why writing your click code inside the button can secretly slow down your app!

The Scenario

Imagine you have a button on a webpage, and you want to run some code when someone clicks it. You write the code directly inside the button tag every time.

The Problem

Writing code directly inside the button tag for every click event makes your code messy, hard to read, and difficult to update. It also causes the webpage to slow down because the code runs again and again unnecessarily.

The Solution

Using separate function handlers lets you keep your code clean and organized. React can reuse these functions efficiently, making your app faster and easier to maintain.

Before vs After

✗ Before

<button onClick={() => alert('Clicked!')}>Click me</button>

✓ After

function handleClick() { alert('Clicked!'); }
<button onClick={handleClick}>Click me</button>

What It Enables

This approach makes your app faster, your code easier to read, and your work simpler when you want to change what happens on a click.

Real Life Example

Think of a light switch: instead of rewiring the switch every time you want to turn the light on or off, you just flip the switch that calls the same function every time.

Key Takeaways

Inline handlers can clutter your code and slow down your app.

Function handlers keep code clean and improve performance.

Using function handlers makes updating and debugging easier.