Summary

This context discusses the use of SCREAMING_SNAKE_CASE in React web development and its distinction from PascalCase.

Abstract

The author humorously shares an experience with an ESLint error message that suggested using SCREAMING_SNAKE_CASE for imported JSX components. This led to an exploration of the differences between PascalCase and SCREAMING_SNAKE_CASE in React web development. PascalCase is a common convention for React components, starting with an uppercase letter. However, SCREAMING_SNAKE_CASE, though less common and harder to read, is also acceptable, as per ESLint rules. The author shares their professional use of SCREAMING_SNAKE_CASE for "DECOR" components like "DIVIDER" in a folder called "UTILS".

Bullet points

The author encountered a humorous ESLint error message suggesting the use of SCREAMING_SNAKE_CASE for imported JSX components.
React components conventionally use PascalCase, starting with an uppercase letter.
SCREAMING_SNAKE_CASE, though less common and harder to read, is also acceptable for React components, according to ESLint rules.
The author uses SCREAMING_SNAKE_CASE for "DECOR" components like "DIVIDER" in a folder called "UTILS".
The ESLint rule "react/jsx-pascal-case" enforces the coding style that user-defined JSX components are defined and referenced in PascalCase.

SCREAMING_SNAKE_CASE in React Web Development 🐍

“Here I Go Again,” breaking down another convention in computer programming that you always wondered about.

I can’t stop laughing, because today I saw the funniest ESLint error message I’ve ever seen in my life. Take a look:

Screenshot of TypeScript programming in VS Code by the author, Dr. Derek Austin 🥳

The message reads: Imported JSX component _Document must be in PascalCase or SCREAMING_SNAKE_CASE eslint(react/jsx-pascal-case).

Woah, woah — hold on there ESLint…

Did you just tell me to use SCREAMING_SNAKE_CASE without a hint of irony? That’s the real name for SCREEN_CASE?

For context, I had imported the @/src/pages/_document.tsx file from my Next.js project for some unit testing with Jest.

I should mention this isn’t a great way to test pages in Next.js, but I was playing around as I had compatibility issues with next_page_test.

Keeping with the name of the component _document.tsx, I tried to name the component _Document… Whoops: SCREAMING_SNAKES! 🐍

PascalCase vs. SCREAMING_SNAKE_CASE in React

OK, I love it. And — I already use it professionally. I keep some “DECOR” components like “DIVIDER” in a folder called “UTILS.”

Just like regular SCREEN_CASE (or SCREAM_CASE if you prefer), I adopted that style because the components are basically constants.

It works for me, so I am glad to find that other developers were thinking the same when they created the ESLint rule react/jsx-pascal-cde>ase.

What exactly does this rule do?

“[de>react/jsx-pascal-case] Enforces coding style that user-defined JSX components are defined and referenced in PascalCase.

Note that since React’s JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags this rule will not warn on components that start with a lower case letter.”

— GitHub: yannickcr/eslint-plugin-react

You probably already knew React Components have to start with an uppercase letter, aka PascalCase.

Of course, PascalCase is a computer programming convention related to camelCase, which starts with a lowercase letter.

Unlike kebab-case or snake_case, which are all lowercase, PascalCase and camelCase capitalize the first letter of each word.

Now, you have another option: SCREAMING_SNAKE_CASE may be harder to read than PascalCase, but it is way more badass.

HAPPY_CODING_SNAKES! 🐍💻🐍💻🐍

Dr. Derek Austin is the author of Career Programming: How You Can Become a Successful 6-Figure Programmer in 6 Months, now available on Amazon.