React Component Naming Conventions

As the saying goes, there are only 2 hard problems in computer science:

  • Cache invalidation

  • Naming things

  • Off by 1 errors

When you're building a component library, whether with react or any UI framework, naming things is the challenge that surfaces. Here's my current take on approaching this problem.

Component Naming Guidelines 

  • keep it as simple and focused as possible

  • Use utility specific language - what is the key function of the component? What does the component do for the developer? How is it used? What developer need does the component address? 

  • Do not include extra words that don’t help the developer understand the component function 

  • Use vocabulary consistent with the html spec  

  • eg; if html spec has input type=”number”, NumberInput is a better name for that component than NumericInput 

  • If the naming is difficult, break down the component further into smaller atoms and molecules that are easier to name simply 

  • Add JSDoc comments before your components /** */ describing to a developer the basic usage of the component. These will show up in VSCode on hover. 

Ambiguities / Research

  1. Do names go from general to specific or specific to general? InputText or TextInput? The first allows similar components to be sorted next to eachother in the component list, while the second allows the first part of the component name to be the most specific and reads better in the markup in many scenarios.