Catch deceptive typos in your React apps

Want to catch those elusive typos in you React apps without losing hours to debugging?

I’ve been working with React for a few years now, and in my experience the prop system is one of its greatest attributes — it’s the life-blood of the reusable component philosophy. The React team has put a lot of effort into making working with props a painless experience. PropTypes provides the capabilities to define and enforce schema’s for a given Component’s property requirements, and covering optional cases is a breeze with defaultProps. Still, I have found that some of the most time-consuming bugs have been at the root of a simple typo.

Consider the following component:

class Foo extends Component {
  static propTypes = {
    foobar: PropTypes.string
  }
  static defaultProps = {
    foobar: 'bar'
  }
  //...
}

Simple enough. Our component has one prop requirement: foo an optional string. Now, are you familiar with the following conundrum?

<Foo foobbar='not bar' />

If you didn’t notice, we passed foobbar when we meant to pass foobar. Small typo, but nonetheless pretty common. In some cases, like when we’re passing components to DOM elements, this will blow up immediately giving us a warning like “Warning: Unknown prop `foobbar` on <div> tag. Remove this prop from the element”. In many, this may be the beginning of an hour (or more) that we will never get back. Why? We have defined a default value for foobar, so when foobbar is passed our component doesn’t blow up, but the behavior of our app is in jeopardy. The example may be contrived, but imagine that foobar is one of 5–15 property requirements, on one of the dozens (or hundreds) of components in our app, stuffed way down deep in our tree. When components are abstracting other components, especially when passing properties to deeply nested components, a typo like the preceding can be hard to catch.

Maybe-you-meant to the Rescue

After wasting quite a bit of time with a bug very similar to the following, I decided to write maybe-you-meant, a tool that detects possible prop typos in your React apps. With maybe-you-meant, we would receive a warning in our console like:

If you like what you see, head on over to the github repository to get started.

But there’s more

In addition to finding typos in your component calls, it turns out the maybe-you-meant works quite well in finding typos in your propType definitions. When I first started using it in one of my projects, I noticed the following warnings in my console:

I had some similar components to Background, but after some grepping and deduction (these warnings were only showing up on my apps “login” page), I found that these were warnings caused by Auth0’s Lock Library. It turns out they had the opposite problem: a propType definition that was misspelled.

My hope is not to criticize the work of the Auth0 as their product is great and ultimately works fine. But, suffice it to say, errors like these can find their way into production builds. By the way, I did my submit a pull-request to Auth0’s Lock Library.

Anyhow, maybe-you-meant is a small, helpful tool to catch these deceptive typos in your React apps during development. Feel free to start using it!

If you liked this, click the💚 below so other people will see this here on Medium