Naming conventions are something that helps to keep a codebase readable. On the frontend side, we use standard JavaScript conventions. Camel case for common variable names, pascal case for classes and components, and upper case for constant values. But this only covers the basics of naming conventions.
If we go to the React world, there are some other stable naming conventions; some come from when the primary way of creating React components was by using classes, and some are new, from React hooks.
One that comes from the old React, and is still used, is the prefix handle for functions that handles some component behavior, like handleSubmit or handleClose. Another common prefix from that era is the on__, which is used to declare that something happens on a specific event, like an onClick or onOpen. React class components also use two naming conventions that come from Object Oriented Programming, the use of setters and getters.
The major one from the hooks era is the useSomething. An eslint plugin even enforces this one. This is used both on the React default hooks and is forced to be used on any custom hook.
At last, one source of confusion reported by the team I work with is the name given to variables inside array iteration methods. Because of the similarity between singular and plural versions of entity names, a fast reading can make someone think that the plural version is singular and vice-versa. One way to solve that is to use generic names for the internal variable, like “item” or “element”. However, it’s up to the dev to do that or use the singular version of the entity since that proposition can change its value based on how long or complicated is the interation.
Two other classic naming conventions that can help anyone that wants to go further on this are https://www.oracle.com/java/technologies/javase/codeconventions-namingconventions.html and https://learn.microsoft.com/en-us/dotnet/standard/design-guidelines/general-naming-conventions.
This article was originally published on https://felipebosi.com/programming/naming-conventions/
Top comments (0)