Code Smell 90 - Implementative Callback Events

mcsee

Maxi Contieri

Posted on October 7, 2021

Code Smell 90 - Implementative Callback Events

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

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

Problems

Solutions

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

Sample Code

Wrong

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

//handlePageChange is coupled to what you decide to do
//instead of what really happened
//
//We cannot reuse this kind of callbacks
Enter fullscreen mode Exit fullscreen mode

Right

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

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

Detection

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

Tags

  • Coupling

  • Naming

Conclusion

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

More Info

Credits

Photo by Ashim D’Silva on Unsplash

Thanks to @macsikora 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.

💖 💪 🙅 🚩
mcsee
Maxi Contieri

Posted on October 7, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related