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

• Observer Pattern violation

• Coupling

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

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

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

• What is exactly in a name

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

Software Engineering Great Quotes

Maxi Contieri ・ Dec 28 '20

#codenewbie #programming #quotes #software

---

This article is part of the CodeSmell Series.

How to Find the Stinky parts of your Code

Maxi Contieri ・ May 21 '21

#codenewbie #tutorial #codequality #beginners