This blog post starts and ends with the same question: should state variables in React be named according to a distinct naming convention?

According to Devopedia, naming conventions in the programming world exist to improve the “four Cs”: communication, code integration, consistency, and clarity. Any time multiple developers are looking at the same code, or a developer returns to their code after a time away, code written following a standard naming convention is easier to review and the structure and intent is more quickly understood.

- Phil Karlton https://www.karlton.org/2017/12/naming-things-hard/

Beyond making it easier for reviewers to read and understand your code, following a naming convention eases the code developer’s burden as well. Every programmer has experienced the challenge of trying to come up with an appropriate name for their variable/method/Component, etc. Much like writer’s block, it can stop you dead in your tracks as you search your brain for a ‘good’ name so you can move on to writing the code. A naming convention keeps you rolling by providing a few simple guidelines. Knowing that a boolean variable should be begin with ‘is’, or a function name should consist of a verbNoun() may be just enough of a prompt to settle on a name and move on to coding.

Code that has been written according to the grammatical conventions above (isXxxx for a boolean, verbNoun for a function) is more easily read because, for example, you can quickly pick out which variables are booleans. When the code is written following capitalization guidelines (PascalCase, camelCase) as well, even more information is available at a glance: constants named in ALLCAPS, components named in PascalCase, and methods named in camelCase.

React has very few naming requirements. There are restrictions against special characters or spaces in names, and a requirement that components be named in Pascal case (see React.org), but that is about it. There are, however, conventions that a programmer should follow if they wish to share their code with the world and have it easily understood. These are the rules I researched, looking for standard practices in naming state variables. Why did I think they might exist?

State variables are declared by assignment from useState(), whereas standard variables are declared and assigned directly:

const [stateVariable, setStateVariable] = useState(400);let standardVariable = 400;

Similarly, state variables are modified by calling their update function, while standard variables are updated directly:

setStateVariable(stateVariable + 50);
standardVariable = standardVariable + 50;

A developer, therefore, must keep track of whether the variable they are working with is a *state* variable or a conventional variable. This unique declaration/update requirement of state variables, to me, felt significant enough to suggest there should be a standard way of naming the variables so they stand out when code is reviewed.

An internet search produced many ‘Naming conventions in React’ blogs, quite a few posts asking a question similar to my own (‘is there a recommended naming convention for state variables in React?’), but no convention was found.

So, the question remains: should state variables in React be named according to a distinct naming convention? To me, the most obvious choice to have state variables stand out is to use _stateVariable_ underscores, or perhaps sVariableName — preceeding the variable name with an ‘s’. I may try that in a few labs and see if it helps or hinders the readability of my code.

While I did not find a convention for naming state variables in React, I did note some naming conventions that I will follow. Below is a summary, along with references for further reading.

Variables

• camelCase with descriptive name
• boolean variables should begin with is, has, are:
  isDivisible, hasOwner, areEqual
• constants should be ALLUPPER

Functions/Methods

• camelCase, typically verbNoun: getName()
• Some good verb choices: get, push, apply, calculate, compute, post
• Be consistent in your verb choices. If you use get , use it everywhere, do not use get some places and fetch elsewhere
• When defining the state setter function for a state variable it should start with set and be followed by the variable name.
• Handler functions should be named as handleEvent or handleSubjectEvent:
  - handleNameChange
  - handleChange
  - handleFormReset
  - handleReset
• Props that handle something should be named as onEvent or onSubjectEvent :
  - onNameChange
  - onChange
  - onFormReset
  - onReset
• Combining the two above:

<SomeComponent
 onNameChange={handleNameChange}
 onFormReset={handleFormReset}
/>

• Exception to the verbNoun() convention: if the main behavior of the method/function is to return something then its name should be a noun and describe what it returns: game.totalScore() not game.calculateTotalScore()

Components/Classes

• Name using PascalCase

References

Handy Naming Conventions for Event Handler Functions & Props in React

10 JavaScript Naming Conventions Every Developer Should Know

The Ultimate Guide to JavaScript Naming Conventions

An opinionated guide to naming your code, aimed at new developers