What is the right name of event handler? onClick or handleClick? [closed]

Question

I believe keeping code consistent is kind of important stuff. Sometimes I mess my code with different handler names (working with Javascript). What is the right name for event handlers? onClick vs handleClick?

Flash

I think it's common to call the attribute of a component onClick, just as in the 'onclick' attribute of an html element. The handler is the function that is attached to that attribute, so for e.g. a React component you might do something like const handleClick = () => 'click' and <myComponent onClick={handleClick}/> – Exogamy

There is no "right name" for an event handler, it depends on which convention you decide to follow. I like to think of onClick as the actual event, and use handleClick as the function which handles the event. There are lots of different opinions and approaches on this, the main thing is that when you're writing your functions you should be consistent across your whole application. – Symer

Does this answer your question? Backbone.js best practice for event handlers naming – Lexy

@michael The point of naming things is to communicate meaning and make things easier to reason about. The problem with using "handleClick" for a click handler is that it doesn't communicate anything we don't already know. We already know that the click handler is going to handle a click. Better to name the click handler descriptively—i.e., if it increments something, call it "incrementNumber". If it logs the user out, call it "logOutUser", etc. – Houdini

@ReverseEngineered, my comment was just a reference to another discussion #11990676 that imho better answer the question. The wording of a comment is misleadingly generated by the system and should be read as “Possible duplicate”. Your considerations should not be a comment, but an answer for one of 2 questions. – Lexy

Answer 1

This is subjective, but what you would see the most is the following:

• if you are creating component and exposing event hooks, those props would be on: onClick, onHover, onUsernameChanged, onError. From inside your components, these props are just functions you call on some event. You don't care what they do, your job is to just call them at the right time
• if you are consuming another component, you want to add handling in response to these events, so you use handle: handleChange, handleClick, handleUserLogout, because your job is now to handle some event and make something happen in response to it. If you don't handle, no changes to the app state will be made

Antilepton

"By convention, it is common to name event handlers as handle followed by the event name. You’ll often see onClick={handleClick}, onMouseEnter={handleMouseEnter}, and so on." – Frodeen

Answer 2

According to: Naming-Event-Handlers-React. The author of the page says:

For props:

We usually use the prefix on*, as in onClick. This matches the built-in event handler convention. And by matching it, we declare that these props will house similarly-used event handler functions.

For the function names:

We follow the exact same pattern, but we replace on with handle*, as in handleClick.

Adulterer

Answer 3

I prefer naming event handler props/attributes on* and event handler functions handle*.

The reasoning for that is simple, otherwise sometimes they clash. Take a look at this example:

const Foo = ({ onClick }) => {
  const handleClick = (event) => {
    doSomethingElseHere();
    onClick(event);
  }
  
  return (
    <button onClick={handleClick}>Bar</button>
  )
}

If we named both the handler and the prop onClick, their names would clash.

Disbranch

Answer 4

To props use on... for example:

const ProductVariants = ({ productId, onCancel, onReturnProducts })

but your functions names you should use handle...

<ProductVariants
            productId={productId}
            onCancel={handleCancel}
            onReturnProducts={handleReturnProduct}
          />

Stephanistephania