45

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?

5
  • 3
    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}/>
    – Michael
    Feb 3, 2020 at 22:55
  • 2
    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.
    – j-petty
    Feb 3, 2020 at 23:00
  • Does this answer your question? Backbone.js best practice for event handlers naming Sep 10, 2021 at 14:28
  • 1
    @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. Dec 15, 2021 at 6:53
  • @ReverseEngineered, my comment was just a reference to another discussion stackoverflow.com/questions/11990176/… 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. Dec 15, 2021 at 18:16

4 Answers 4

63

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
32

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.

8

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.

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}
          />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.