Why this React code not work in production

Posted on Edited on Disqus:

Today I was migrating a personal project to create-react-app, then I found my RadioButton stops working in production while it works perfectly in development. After I figured out why, I think it worth noticing people why.

What’s the code

It’s about auto-binding, where the <RadioButtons> will bind some props to its children if the child pass the following check.

1
2
3
isRegisteredComponent = child =>
  typeof child.type === "function" &&
  child.type.name.toString() === "RadioButton";

It works flawlessly. But after yarn build, which create-react-app will generate production code, it stops working.

Why

The reason is simple, after uglify, the name of the component get changed from RadioButton to r, then this check failed to pass, so it stops working.

How to solve

Add a displayName property to RadioButton

1
RadioButton.displayName = "RadioButton";

Then the check will be

1
isRegisteredComponent = child => child.type.displayName === "RadioButton";

So now you are rely on something stable and won’t get uglified. Even better, reply on this is much better than rely on a prop name. And you should set the displayName for a HOC too to make it clear.

A takeaway is:

remember the fact that your code maybe change when build for production, and handle that case as well.

Hope it helps. :)

Thanks for reading!

Follow me (albertgao) on twitter, if you want to hear more about my interesting ideas.