When building a React application, maintaining a clear and consistent file structure is key to scalable and maintainable code. One often overlooked but important aspect of this structure is the file naming convention. Choosing the right convention can make your codebase easier to navigate and help you quickly identify the purpose of each file.
Whether it’s naming components, functions, files, or variables, a consistent approach makes collaboration easier, reduces errors, and improves scalability.
This article will explore best practices for naming conventions in a React project including kebab-case, PascalCase, snake_case, and camelCase, ensuring your code remains organized and efficient as your app grows.
When it comes to naming files in a React project, our goal is to make it easy to identify the contents of each file at a glance.
That's why file names should follow kebab-case. This convention uses lowercase letters and hyphens to separate words, making it easy to read and understand. For example, a file containing a React component might be named my-component.tsx
.
kebab-case also prevents naming conflicts on case-insensitive file systems, ensuring your codebase remains consistent across different environments.
When naming components in a React project, it’s important to use PascalCase. This convention capitalizes the first letter of each word, making component names easy to distinguish from regular HTML elements.
For example, a component that displays a user profile might be named UserProfile
.
camelCase is the preferred convention for naming functions and variables in a React project. This convention uses lowercase letters for the first word and capitalizes subsequent words, making names easy to read and understand.
Also Object Properties and Custom Hooks should be named in camelCase.
For example, a function that fetches user data might be named fetchUserData
. This convention is widely used in JavaScript and React and helps maintain consistency across your codebase.
The best way to name constants and enum values is to use UPPER_SNAKE_CASE. This convention uses uppercase letters and underscores to separate words.
When it comes to naming enum names they should be in PascalCase.
For example,
const API_URL = 'https://api.example.com';
enum Colors {
RED = 'red',
DARK_BLUE = 'darkBlue', // also use camelCase for enum values
}
When naming types and interfaces in a React project, standard way is to use PascalCase. But personally I prefer to use sneak_case for this case because it is more readable and understandable for me.
For example, an interface that defines the shape of a user object might be named UserInfo
or user_info
. This conventions is widely used in TypeScript to define custom types and interfaces.
When naming variables, functions, or components, it’s important to use prefixes that provide context and make your code more readable. Here are some common prefixes used in React projects:
State and prop names should be in camelCase and should also be descriptive and meaningful.
We can use is, has, should prefixes for boolean state variables.
For example,
// states
const [isModalOpen, setIsModalOpen] = useState(false);
const [hasError, setHasError] = useState(false);
const [shouldShowModal, setShouldShowModal] = useState(false);
// props
const { user, setUser } = props;
Event handlers should be named in camelCase and prefixed with handle or on.
For example,
const handleInputChange = (e) => {
// handle input change
}
const onButtonClick = () => {
// handle button click
}
Utility functions should be named in camelCase and prefixed with get, set, is, has, should, use.
For example,
const getFormattedDate = (date) => {
// format date
}
const setLocalStorageItem = (key, value) => {
// set local storage item
}
const isUserLoggedIn = () => {
// check if user is logged in
}
const hasPermission = (user, permission) => {
// check if user has permission
}
const shouldShowModal = () => {
// check if modal should be shown
}
const useCustomHook = () => {
// use custom hook
}
Higher Order Components (HOCs) are functions that take a component and return a new component with additional functionality.
HOCs should be named in camelCase and prefixed with with.
For example,
const withAuth = (Component) => {
// add authentication logic
}
const withTheme = (Component) => {
// add theme logic
}
Context providers and consumers should be named in PascalCase and prefixed with Provider or Consumer.
For example,
const ThemeProvider = ({ children }) => {
// provide theme context
}
const ThemeConsumer = () => {
// consume theme context
}
Naming conventions might not seem like much, but they have a big influence on how easy it is to read and maintain your React code. Applying conventions consistently will help you keep your project navigable and orderly, especially as it grows. These norms promote mutual understanding and facilitate easier collaboration whether you're working alone or with a team. Your coworkers and future selves will appreciate you taking the time to create and adhere to a consistent naming approach!
Barış is an AWS certified developer with a passion for cutting-edge technologies. He always follows creative solutions by combining the newest cloud services and stacks.
We believe in the power of technology when it comes to success. We help our clients to keep up with the best practices in technology for their custom business needs while improving the way they work.
We use cookies to offer you a better experience with personalized content.
Cookies are small files that are sent to and stored in your computer by the websites you visit. Next time you visit the site, your browser will read the cookie and relay the information back to the website or element that originally set the cookie.
Cookies allow us to recognize you automatically whenever you visit our site so that we can personalize your experience and provide you with better service.