A Naming Convention for Null Components
A component that returns
null, and likely uses lifecycle hooks to make side effects, is a "Null Component".
(I got the name from this oooold issue: https://github.com/facebook/react/issues/1058)
Can You Spot Them?
Can you tell me which of these components renders nothing?
I can't either. I'd need prior knowledge of the components or read through how they were implemented.
If you are familiar with React Router V4, you may know that it doesn't render anything, but what if you could know without prior knowledge?
<_NullComponent_ /> Convention
Aligning closely with the <Injector_ > naming convention, Null Components are denoted with a postfix AND prefix
<_NullComponent_ />. The idea is that the additional prefix
_ of a Null Component denotes that it is even more incomplete than an Injector.
Null Components are denoted with a prefix and postfix
Let's look at our example again with the naming convention applied. Which component(s) render nothing?
<_Redirect_ /> jumps out as a Null Component. I don't need to read its source or have prior knowledge of it's implementation to know this.
How about one more example, with an Injector Component added. How many components are rendered to the DOM?
By convention, we know that
_Redirect_ do not add anything to the DOM. So, we can mentally comment them out:
I count 2 in the above code.
It Gets Better
Can you spot the error(s) in this render?
Yes! Null Components should never have
children - they'd never be rendered.
Even Better with Tooling
Naming conventions enable tooling. I've edited my vim color scheme to style Null Components similarly to comments, which further reinforces their concept, and allows me to easily skim renders and identify or ignore them.
In the future, we might also have an editor with a toggleable option to hide all components that do not add to the DOM directly.
more conventions => more helpful tooling
Other naming conventions
- <Injector_ > Components