Naming Conventions in React forClean & Scalable Code

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.

File Naming

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.

Component Naming

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.

Function and Variable Naming

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.

Constants and Enum Naming

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
  }

Type and Interface Naming

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.

Prefixes

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 Variables and Props

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

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 and Custom Hooks

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

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

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
  }

Conclusion

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!