Frontend
The Importance of Naming Components Well
Readable names beat clever ones every time
Photo by Fabian Wiktor from Pexels.
Naming things is famously one of the hard problems in programming. But when it comes to React or any component-driven UI, naming becomes a matter of communication.
A well-named component tells you what it does without opening the file. It should feel obvious at a glance. That's why names like UserCard, TransactionList, or SidebarNavigation are much better than MainBox, Thing, or Container.
I try to follow this simple guideline:
- Is the name descriptive of the visual or function?
- Does it match the mental model of the UI?
Over time, I've learned that clear, boring names almost always win.