What is the recommended way to ensure 'this' refers to the component inside an event handler?

What is the recommended way to ensure 'this' refers to the component inside an event handler?

• A. Use an arrow function in the constructor to bind it
• B. Bind at render time using this.methodName.bind(this)
• C. Bind the method in the constructor
• D. Avoid using 'this' in event handlers

Answer: (C)

Binding the event handler to the component instance in the constructor ensures that this inside the handler always refers to the component. In class components, methods aren’t bound automatically, so without binding, this can be undefined when the event fires. Binding in the constructor runs once per instance, so the same bound function is reused as the handler, avoiding creating new functions on every render and the extra work that would entail. Binding at render time creates a new function on every render, which can hurt performance and trigger unnecessary re-renders. Using an arrow function in the constructor could work, but the standard, widely adopted approach among the given options is binding the method in the constructor. This keeps the context reliable and the code clear.

Binding the event handler to the component instance in the constructor ensures that this inside the handler always refers to the component. In class components, methods aren’t bound automatically, so without binding, this can be undefined when the event fires. Binding in the constructor runs once per instance, so the same bound function is reused as the handler, avoiding creating new functions on every render and the extra work that would entail. Binding at render time creates a new function on every render, which can hurt performance and trigger unnecessary re-renders. Using an arrow function in the constructor could work, but the standard, widely adopted approach among the given options is binding the method in the constructor. This keeps the context reliable and the code clear.