Catch deceptive typo’s in your React apps – Nick Pisacane – Medium

  • Catch deceptive typo’s in your React appsWant to catch those elusive typo’s in you React apps without loosing 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.
  • When components are abstracting other components, especially when passing properties to deeply nested components, a typo like the preceding can be hard to catch.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 typo’s 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 moreIn addition to finding typo’s in your component calls, it turns out the maybe-you-meant works quite well in finding typo’s 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.
  • 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 typo’s in your React apps during development.

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…

@ReactDOM: Catch deceptive typo’s in your React apps #javascript #debugging #react #tech #programming…

Want to catch those elusive typo’s in you React apps without loosing 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:

foobar: ‘bar’

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

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

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.

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 typo’s 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.

In addition to finding typo’s in your component calls, it turns out the maybe-you-meant works quite well in finding typo’s 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 typo’s in your React apps during development. Feel free to start using it!

Catch deceptive typo’s in your React apps – Nick Pisacane – Medium