React Component Naming Rules and Conventions

Runnable lesson · press Try it on the examples to edit and run them here.

Names in React are not just style. One of the rules decides whether your code works at all.

The one rule that is enforced

A component name must start with an uppercase letter. React uses this to tell a component from an ordinary HTML tag.

App.jsx

JSX

function greeting() {
  return <p>Lowercase component</p>;
}

function Greeting() {
  return <p>Capitalised works</p>;
}

function App() {
  // <greeting /> would render an unknown HTML tag called "greeting", not the function.
  return <Greeting />;
}

If you write <greeting />, React creates an HTML element named greeting and shows nothing useful. The browser will not call your function. Use PascalCase: UserProfile, ShoppingCart, NavBar.

Dotted names and variables

You can access a component through an object with dot notation:

App.jsx

JSX

const Buttons = {
  Primary: () => <button>Primary</button>,
  Secondary: () => <button>Secondary</button>,
};

function App() {
  return <Buttons.Primary />;
}

This is how libraries group related components (<Menu.Item />). If you pick a component dynamically, assign it to a capitalised variable before using it as a tag:

App.jsx

JSX

function Circle() { return <span>Pointer</span>; }
function Square() { return <span>Square</span>; }

function App() {
  const [useSquare, setUseSquare] = React.useState(false);
  const Shape = useSquare ? Square : Circle;
  return (
    <div>
      <Shape />
      <button onClick={() => setUseSquare(true)}>Switch</button>
    </div>
  );
}

<shape /> would not work, because it is lowercase.

Conventions that help

These are habits, not rules, but almost every React team follows them:

What	Convention	Example
Component	PascalCase	`ProductCard`
Component file	Same name as the component	`ProductCard.jsx`
Variables, functions, props	camelCase	`isOpen`, `totalPrice`
Event handler functions	Start with `handle`	`handleClick`, `handleSubmit`
Event handler props	Start with `on`	`onClick`, `onSelect`, `onSave`
Custom hooks	Start with `use`	`useLocalStorage`
Constants	UPPER_SNAKE_CASE (optional)	`MAX_ITEMS`

The handle / on pairing reads well: a component receives onSave as a prop and passes its own handleSave function to it.

App.jsx

JSX

function SaveButton({ onSave }) {
  return <button onClick={onSave}>Save</button>;
}

function App() {
  const [count, setCount] = React.useState(0);
  function handleSave() {
    setCount(count + 1);
  }
  return (
    <div>
      <SaveButton onSave={handleSave} />
      <p>Saved {count} times</p>
    </div>
  );
}

Naming what a component is, not where it is used

Prefer a name that describes the thing: PriceTag, not ProductPageRightColumnPrice. A good name makes a component easy to reuse, and it is a sign that the component has one clear job.

Key points

Components start with an uppercase letter; lowercase names are treated as HTML tags.
Use PascalCase for components and files, camelCase for everything else, handle... for handlers, on... for handler props and use... for hooks.
To choose a component at run time, store it in a capitalised variable.