Mastering React Component Naming Conventions in 2023: The Ultimate Checklist

When creating a React application, naming your components is an essential aspect of the development process. Proper component naming can make your code more organized, readable, and maintainable. In this post, we will explore the best practices for naming React components in 2023.

Start with a Capital Letter

// Correct
function MyComponent() {
  return <div>Hello World</div>;
}

// Incorrect
function myComponent() {
  return <div>Hello World</div>;
}

Use Descriptive and Meaningful Names

// Good
function SubmitButton() {
  return <button type="submit">Submit</button>;
}

// Bad
function Btn() {
  return <button type="submit">Submit</button>;
}

Use CamelCase

// Good
function TodoList() {
  return (
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  );
}

// Bad
function todolist() {
  return (
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  );
}

Avoid Using DOM Component Names

// Good
function Card() {
  return <div>This is a card</div>;
}

// Bad
function div() {
  return <div>This is a card</div>;
}

Be Consistent

// Good
function Modal() {
  return <div>Modal content</div>;
}

function ModalHeader() {
  return <div>Modal header</div>;
}

// Bad
function Modal() {
  return <div>Modal content</div>;
}

function HeaderModal() {
  return <div>Modal header</div>;
}

Use Prefixes for Common Components

// Good
function TableHeader() {
  return (
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
  );
}

// Bad
function Header() {
  return (
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
  );
}

Use Suffixes for Variations of the Same Component

// Good
function ButtonPrimary() {
  return <button className="primary">Primary</button>;
}

function ButtonSecondary() {
  return <button className="secondary">Secondary</button>;
}

// Bad
function PrimaryButton() {
  return <button className="primary">Primary</button>;
}

function SecondaryButton() {
  return <button className="secondary">Secondary</button>;
}

Keep it Simple

// Good
function Header() {
  return <h1>Welcome to my app</h1>;
}

// Bad
function MySuperCoolAndAmazingHeader() {
  return <h1>Welcome to my app</h1>;
}

Leave a Comment