Naming Conventions in React: camelCase or snake_case?
Ali Navidi

Ali Navidi @westernal

About: Maybe a Frontend Developer

Joined:
Mar 24, 2022

Naming Conventions in React: camelCase or snake_case?

Publish Date: Aug 1
0 0

What we use as our naming convention often goes back to the language we are using and the preferences of the team we are working within. In JavaScript, we usually use camelCase, and everything is fine with it. So, you might wonder, why would I even mention snake_case in this article?

Why snake_case?

One answer could be team preference or that it is easier to read. However, the main reason I wrote this article is that in some projects, you are integrating with a backend language that uses snake_case for variables. If you use camelCase, you sometimes have to transform them to snake_case. This transformation may be easier if you used snake_case in your app as well.

Using Both?

Obviously, you can use both naming conventions in your project, but it is not advised. Mixing them may result in your code not being clean, so you have to choose one of them.

Using snake_case Only

Well, nobody prohibits you from using a naming convention other than the one advised by the language you use. You can use snake_case throughout your application, except for things you cannot change (like component and hook names). My problem with this solution is that it seems odd to me.

I'm okay with it when we use it for variables like is_visible, but when it comes to functions, it looks a little bad in my opinion. For example, you call your function like this: on_submit().

Or if you want to use useState:

const [has_initial_value, set_has_initial_value] = useState(false)
Enter fullscreen mode Exit fullscreen mode

It just doesn't feel like React anymore, but you may have a really valid question: who cares if it feels like React or not?

Conclusion

So, I'm asking you this: What do you think about naming conventions in React applications? I would love to read your comments below.

Have a great day!

Note: Cover image used in this blog post was generated by AI.

Comments 0 total

    Add comment