Inline vs function handlers in React - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when using inline event handlers in React?

Consider a React component that uses an inline arrow function as an event handler inside JSX. What is the main behavior difference compared to using a named function handler?

React

function Button() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

A Inline handlers cause the component to lose state on every click.

B The inline handler is cached automatically by React, so it never creates a new function on re-renders.

C Using inline handlers disables React's event system, causing native DOM events to fire instead.

D The inline handler creates a new function on every render, which can cause unnecessary re-renders in child components if passed as props.

💡 Hint

Think about how JavaScript functions behave inside JSX when the component re-renders.

Inline arrow functions inside JSX create a new function every time the component renders. This can cause child components receiving these functions as props to re-render unnecessarily because the prop reference changes.

📝 Syntax

intermediate

Which React event handler syntax correctly binds a class method?

Given a React class component, which option correctly binds the handleClick method to the component instance?

React

class MyButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    // Binding happens here
  }
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return <button onClick={this.handleClick}>Clicked {this.state.count} times</button>;
  }
}

A this.handleClick = function() { this.setState({ count: this.state.count + 1 }); };

B this.handleClick = () => this.handleClick();

C this.handleClick = this.handleClick.bind(this);

D No binding needed, just use onClick={this.handleClick}

💡 Hint

Remember how JavaScript class methods lose this context unless bound.

In class components, methods need to be bound to the instance to keep the correct this context. Binding in the constructor with this.handleClick = this.handleClick.bind(this); is the standard approach.

❓ state_output

advanced

What is the output when using inline handlers with state updates in React functional components?

Examine this React functional component. What will be displayed after clicking the button twice?

React

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

A Count: 2

B Count: NaN

C Count: 0

D Count: 1

💡 Hint

Consider how state updates work with the current state value inside the inline function.

Each click calls setCount(count + 1) with the current count value. After two clicks, the count increments twice, showing 2.

🔧 Debug

advanced

Why does this React component re-render infinitely with an inline handler?

Look at this React functional component. It causes an infinite re-render loop. Why?

React

function Timer() {
  const [seconds, setSeconds] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setSeconds(seconds + 1), 1000);
    return () => clearInterval(id);
  }, [() => setSeconds(seconds + 1)]);
  return <div>Seconds: {seconds}</div>;
}

A The setInterval callback is not updating state correctly, causing infinite updates.

B The dependency array contains a new inline function on every render, causing useEffect to run repeatedly.

C The clearInterval is missing, so intervals stack up infinitely.

D React.useEffect cannot use arrow functions inside dependency arrays.

💡 Hint

Think about how React compares dependencies in useEffect.

Functions are objects in JavaScript and a new inline arrow function is created on every render. This makes the dependency array change every time, causing useEffect to run infinitely.

🧠 Conceptual

expert

Why prefer named function handlers over inline handlers in React components?

Which reason best explains why using named function handlers is often better than inline handlers in React?

A Named handlers help React optimize rendering by keeping stable function references, reducing unnecessary child re-renders.

B Inline handlers are deprecated in React and will be removed in future versions.

C Inline handlers cause React to skip reconciliation, leading to UI inconsistencies.

D Named handlers automatically batch state updates, while inline handlers do not.

💡 Hint

Think about how React uses props to decide when to re-render components.

Named handlers keep the same function reference between renders, which helps React avoid unnecessary re-renders of child components that receive these handlers as props.