React JS — Naming Conventions

React JS Naming Conventions

Introduction

In this article, we will cover the reasons for needing naming conventions, what these conventions are, and how they can be applied specifically to React.

Why Do We Need Naming Conventions?

Naming conventions are a set of rules or guidelines used to name files, variables, functions, classes, or other entities in a consistent and meaningful way. They are important because they improve code readability, maintainability, and collaboration among team members. In React JS, consistency and clarity are crucial for naming conventions.

A well-defined naming convention helps enhance the readability, maintainability, and collaboration of the code. Some commonly used naming patterns include:

• camelCase: The first word is in lowercase, and each subsequent word starts with an uppercase letter.

const userName= 'name'

• PascalCase: Every word starts with an uppercase letter, including the first word.

const UserName= 'name'

• snake_case: All words are in lowercase and separated by underscores (_).

const user_name = 'name'

• kebab-case: All words are in lowercase and separated by hyphens (-). Typically used for URLs and some file names.

const user-name = 'name'

Naming Conventions

Components

Use descriptive and meaningful names for React components. For component names, use PascalCase.

// React component ✔️
const ExampleItem = () => {
  ...
};

// React component ❌
const exampleItem = () => {
  ...
};

// Typescript interface ✔️
interface ExampleItem {
  id: number;
  name: string;
}

// Typescript interface ❌
interface exampleItem {
  id: number;
  name: string;
}

Files

Name your files using PascalCase that matches the component name. For example, if you have a component named ExampleCard, the file should be named ExampleCard.jsx.

// React file ✔️
ExampleCard.jsx 

// React file ❌
exampleCard.jsx
example-card.jsx
example_card.jsx

Props

Use descriptive names for props to clearly indicate their purpose. Avoid abbreviations unless they are widely understood in the context of your project.

import React from 'react';

// Child component: Component that displays user information.
function UserInfo(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.email}</p>
    </div>
  );
}

// Main component: Component containing user information.
function App() {
  const user = {
    name: 'user',
    email: 'user@example.com',
  };

  return (
    <div>
      <h1>User Information</h1>
      <UserInfo name={user.name} email={user.email} />
    </div>
  );
}

export default App;

Using descriptive names like ‘UserInfo’ and ‘user’ makes it clear that the prop represents user data, enhancing readability and understandability.

State Variables

For boolean state variables, prefix them with is, has, or should.

import { useState } from 'react';

const ExampleComponent = () => {
  const [isActive, setIsActive] = useState(true); // ✔️
  const [hasError, setHasError] = useState(false); // ✔️
  const [shouldRender, setShouldRender] = useState(true); // ✔️

  const [active, setActive] = useState(true); // ❌
  const [error, setError] = useState(false); // ❌
  const [render, setRender] = useState(true); // ❌

  const handleClick = () => {
    setIsActive(!isActive);
  }

  return (
    <div>
      {shouldRender && (
        <div className={isActive ? 'active' : 'inactive'}>
          <button onClick={handleClick}>
            {isActive ? 'active' : 'inactive'}
          </button>
          {hasError && <p>An error occurred.</p>}
        </div>
      )}
    </div>
  );
};

export default ExampleComponent;

By following the naming convention, the purpose and meaning of these state variables become clearer, making the code more readable and maintainable.

Event Handlers

Use the prefix handle for event handlers and prefer camelCase for naming. For example, handleSubmit, handleClick, handleLogout, handleInputChange.

import { useState } from "react";

function ExampleComponent() {
  const [isActive, setIsActive] = useState(true);

  // ✔️
  const handleButtonClick = () => {
    setIsActive(!isActive);
  };

  // ❌
  const buttonClick = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>
        {isActive ? "active" : "inactive"}
      </button>
    </div>
  );
}

export default ExampleComponent;

Constant Variables

Use UPPER_SNAKE_CASE to represent constants in JavaScript.

const API_URL = 'https://api.example.com'; // ✔️
const MAX_RESULT = 10; // ✔️

const api_url = 'https://api.example.com'; // ❌
const max_result = 10; // ❌

Functions

Function names are case-sensitive and should start with a lowercase letter. Use camelCase for naming. Prefer meaningful names and typically use imperative verbs.

// ✔️  
const getUserData = () => {
    // function implementation
    return userData;
};

const fetchOrders = () => {
    // function implementation
    return orders;
};

// ❌
const UserData = () => {
    // function implementation
    return userData;
};

const FetchOrders = () => {
    // function implementation
    return orders;
};

Conclusion

In summary, applying consistent and meaningful naming conventions in React projects enhances code readability and maintainability. Using conventions such as camelCase helps create a more efficient working environment for both individual developers and teams. By adhering to these simple rules, you can achieve a cleaner and more understandable code structure.

References

Cheatsheets — 30 seconds of code

React