Where are event handlers typically defined in a class component?

Where are event handlers typically defined in a class component?

• A. inside the component class but before render()
• B. inside the constructor only
• C. outside the class
• D. inside render() only

Answer: (A)

Event handlers in a class component are defined as methods on the component class itself, outside of the render method. This keeps the handler tied to the component instance so it can access this, along with state and props, and avoids creating a new function on every render. Two common patterns you’ll see: defining the handler as a class method and binding it in the constructor, or using the class fields syntax to define the handler as an arrow function. Both place the logic inside the class body, not inside render, and they ensure onClick (or other events) can reference this reliably. For example, using class fields: handleClick = () => { ... }; and then render uses onClick={this.handleClick}. Defining a handler inside render would recreate the function each time the component renders, which is inefficient, and defining it outside the class would detach it from the component instance.

Event handlers in a class component are defined as methods on the component class itself, outside of the render method. This keeps the handler tied to the component instance so it can access this, along with state and props, and avoids creating a new function on every render.

Two common patterns you’ll see: defining the handler as a class method and binding it in the constructor, or using the class fields syntax to define the handler as an arrow function. Both place the logic inside the class body, not inside render, and they ensure onClick (or other events) can reference this reliably. For example, using class fields: handleClick = () => { ... }; and then render uses onClick={this.handleClick}. Defining a handler inside render would recreate the function each time the component renders, which is inefficient, and defining it outside the class would detach it from the component instance.