Code Smell 90 - Implementative Callback Events

Code Smell 90 - Implementative Callback Events

When creating events, we should decouple the trigger from the action.

TL;DR: Name your functions according to what happened.



  1. Name the events after "what happened", not "what you should do"

Sample Code


const Item = ({name, handlePageChange)} =>
  <li onClick={handlePageChange}>

// handlePageChange is coupled with what you decide to do
/ /instead of what really happened
// We cannot reuse this kind of callback


const Item = ({name, onItemSelected)} =>
  <li onClick={onItemSelected}>

// onItemSelected will be called just when an item was selected. KISS
// Parent can decide what to do (or do nothing)
// We defer the decision


This is a semantic smell. We can detect it on peer code reviews.


  • Coupling

  • Naming


Names are very important. We should delay implementation coupled names until the very last moment.

More Info


Photo by Ashim D’Silva on Unsplash

Thanks to Maciej for this tip

Beyond basic mathematical aptitude, the difference between good programmers and great programmers is verbal ability.

Marissa Mayer

This article is part of the CodeSmell Series.