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?

PeterMader · Accepted Answer · 2017-08-17 09:09:06Z

9

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.

answered Aug 17, 2017 at 9:09

PeterMader

7,3352 gold badges24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

T.J. Crowder Over a year ago

Another important aspect: With HTML onXYZ-attribute-style event handlers, you can only call global functions, you can't assign a function reference (you can if you assign to onxyz on the DOM element, but not in the HTML). But with JSX onXYZ properties, you can use a function reference, and the function doesn't have to be (and basically never is) a global.

An Nguyen · Accepted Answer · 2017-08-17 08:59:37Z

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.

Collectives™ on Stack Overflow

HTML event handler vs React event handler

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related