?? "" is a Code Smell

In typed JavaScript codebases (TypeScript/Flow) I see this pattern a lot:

<Component prop={someValue ?? ""} />

It is almost always in places when someone has a nullable string and wants to pass it to a component or function that expects a non-nullable string. I posit that nearly every API which expects a non-nullable string is broken if passed an empty string.

Lets consider some examples:

• Using an empty string as an image src can destroy your site.

• Using an empty string as a link href will create a confusingly broken link back to your home page.

• An empty accessibility label or alt attribute means a broken experience for anyone using a screen reader.

• Passing '' as the non-nullable content/field prop of a React component probably leads to an oddly collapsed and broken feeling UI — otherwise the component would have allowed null.

It is almost always better to do one of the following two things:

1. If the component you are passing the value to can render sensibly without the string value, you should make the component accept a nullable value.

2. If that component really does need a string in order to render sensibly, you should explicitly handle the potential nullability of your value by either throwing or rendering some other type of fallback.

When you find yourself tempted to write ?? '' ask yourself, "Am I simply tricking TypeScript into allowing me to write a bug?”