Good naming isn’t just about style. It’s about clarity, consistency, and maintainability. Senior developers optimize for code that’s easy to understand six months later, not just quick to write today.

1. Components: PascalCase

Use PascalCase to distinguish React components from HTML elements.

UserProfile.tsx
SettingsSidebar.tsx
ConfirmModal.tsx

Rule: Keep component names and filenames consistent.

2. Hooks: use + camelCase

Custom hooks must follow React’s naming convention so their hook usage is recognizable to developers and lint tools.

useAuth.ts
useUserSettings.ts
useConnectionsTable.ts

3. Variables and Functions: camelCase

Follow standard JavaScript naming conventions.

const fetchUserData = async () => {};

const isAuthenticated = true;
const hasPermission = false;
const canEdit = true;

For booleans, prefer descriptive prefixes such as is, has, and can.

4. Constants: SCREAMING_SNAKE_CASE When Appropriate

Use uppercase names for true, shared constants when that convention improves readability.

const MAX_RETRY_COUNT = 3;

const ROUTES = {
  HOME: "/",
  SETTINGS: "/settings",
} as const;

Not every const variable needs uppercase naming. Local variables and values that aren’t treated as configuration constants should generally remain camelCase.

5. Types and Interfaces: PascalCase

Use descriptive PascalCase names. An I prefix is usually unnecessary in TypeScript.

interface User {
  id: string;
  name: string;
}

type SortOrder = "asc" | "desc";

6. Props: ComponentNameProps

Give component props a clear, searchable name.

interface ModalProps {
  open: boolean;
  onClose: () => void;
}

function Modal({ open, onClose }: ModalProps) {
  if (!open) return null;

  return <button onClick={onClose}>Close</button>;
}

7. Event Handlers: handle Prefix

Use handle for functions that respond to events.

const handleSubmit = () => {
  // Submit form
};

const handleClose = () => {
  // Close modal
};

return <button onClick={handleSubmit}>Submit</button>;

A useful distinction: handleSubmit handles an event, while submitForm describes the action itself.

8. Files and Folders: Choose a Consistent Convention

Use naming conventions that make files easy to locate.

features/
  user-profile/
    UserProfile.tsx
    useUserProfile.ts
    user-profile.types.ts

Kebab-case works well for folders and non-component files. PascalCase is common for React component files. The important thing is consistency across the project.

9. Use Suffixes When They Add Clarity

Suffixes can distinguish pages, layouts, hooks, and types in larger codebases.

HomePage.tsx
AuthLayout.tsx
UserCard.tsx

Alternatively, a project may use home.page.tsx or user-card.component.tsx. Neither style is universally superior.

Rule: Adopt a convention that fits your project and apply it consistently.