HTML event handler vs React event handler

Question

I would like to ask a question about event handlers when used in HTML and React.

In the book Javascript and Jquery written by Jon Duckett, the author mentioned that using HTML event handler attribute is considered bad practice for instance something like the following:

<button onClick="hide()">click me</button>

But recently I am starting to learn React and when a component is defined, there are many examples of event handlers used as an attribute and it seems common to do so, not getting criticism for doing so,

<button onClick={doSomething}>
  xxxyyyzzz
</button>

Is there a reason to this? is it because this is the only way to bind a event handler in React?, from the way I see it React is essentially building the component element via HTML but uses the event handler attribute to assign an event to it, so why is React bringing back a concept that is considered bad practice?

Answer 1

Why are inline event listeners bad practice?

HTML describes the content and structure of a document, CSS describes the appearance and JavaScript is about the logic or behavior. These things should be kept separately. HTML and JavaScript code shouldn't be mixed. Your example for that was:

<button onClick="hide()">click me</button>

This, however, does not apply to React: we don't have one HTML file. Instead, we have modularized components, which have their own structure, style and behavior.

In React, we don't want the separation of presentation and logic, but self-contained components. That's what sets it apart from an application using just "Vanilla JavaScript" / the DOM API.

Answer 2

In the previous era of Javascript, this is considered as bad practice because we want to seperate HTML and JS as much as possible for better code management. You cannot quickly navigate to your onClick within an HTML page with another bunch of button.

And here in React, you manage your application code through the component tree. I think the power of React are:

• Modularity
• Composition
• DRY (don't repeat yourself)

Back to your simple example, the onClick handler will be easily managed inside your component. Maybe with some other handler as well but it still be convenient within the scope of 1 component. Depend on which level of your component hierachy, everything you want to do lies on the same page, same class, same function.