Inline vs function handlers in React - Quick Revision & Key Differences

Recall & Review

beginner

What is an inline event handler in React?

An inline event handler is a function written directly inside the JSX element's event attribute, like alert('Hi')}>Click. It runs when the event happens.

beginner

What is a function event handler in React?

A function event handler is a separate function defined outside the JSX, then passed as a reference to the event attribute, like Click where handleClick is a function.

intermediate

Why might you prefer function handlers over inline handlers in React?

Function handlers improve readability, avoid creating a new function on every render, and help with performance by preventing unnecessary re-renders.

intermediate

What is a downside of using inline handlers in React?

Inline handlers create a new function every time the component renders, which can cause extra work for React and may lead to performance issues in large or complex apps.

intermediate

How can you keep the benefits of function handlers but still pass parameters to them?

You can define a function that returns another function or use an arrow function inside the handler, like onClick={() => handleClick(param)}. This keeps the main handler separate but allows parameters.

Which of these is an example of an inline event handler in React?

A <button onClick='alert("Hi")'>Click</button>

B const handleClick = () => alert('Hi'); <button onClick={handleClick}>Click</button>

C <button onClick={handleClick()}>Click</button>

D <button onClick={() => alert('Hi')}>Click</button>

Inline handlers are functions written directly inside the JSX attribute, like option D.

What is a main benefit of using function handlers instead of inline handlers?

A They create a new function on every render

B They prevent any event from firing

C They improve readability and performance

D They require less code to write

Function handlers improve readability and avoid creating new functions each render, helping performance.

What happens if you write onClick={handleClick()} instead of onClick={handleClick}?

A The function runs immediately on render

B The function runs only when clicked

C React throws an error

D Nothing happens

Using parentheses calls the function immediately during render, not on click.

How can you pass a parameter to a function handler without making it inline?

A Use a function that returns another function

B You can't pass parameters without inline functions

C Pass parameters directly in JSX like onClick={handleClick(param)}

D Use a string with the parameter

You can create a function that returns a function to pass parameters without inline handlers.

Why might inline handlers cause performance issues?

A They block the UI thread

B They create new functions on every render causing extra work

C They prevent React from updating the DOM

D They cause syntax errors

Inline handlers create new functions each render, which can slow down React's rendering process.

Explain the difference between inline and function event handlers in React and when you might use each.

Think about where the function is written and how React handles it during rendering.

Describe how to pass parameters to event handlers in React without causing performance issues.

Consider how to keep handlers stable but still flexible.