Good naming is not about style — it’s about clarity, scalability, and long-term maintainability. Senior developers optimize for reading code six months later, not typing speed.

1. Components: PascalCase

Why: Distinguishes components from HTML elements.

UserProfile.tsx
SettingsSidebar.tsx
ModalConfirm.tsx

✅ Rule

• One component per file
• File name = component name

2. Hooks: camelCase + use prefix

Why: React relies on this convention for rules of hooks.

useAuth.ts
useUserSettings.ts
useConnectionsTable.ts

3. Variables & Functions: camelCase

Why: Consistency with JavaScript ecosystem.

const isAuthenticated = true;
const fetchUserData = async () => {};

Boolean variables should sound like questions:

isOpen
hasPermission
canEdit

4. Constants & Enums: SCREAMING_SNAKE_CASE

Why: Signals immutability instantly.

const MAX_RETRY_COUNT = 3;

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

5. Types & Interfaces: PascalCase

No I prefix (modern TypeScript best practice).

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

type SortOrder = "asc" | "desc";

6. Props Interfaces: ComponentNameProps

Why: Improves searchability and readability.

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

7. Event Handlers: handle prefix

Why: Makes intent explicit.

const handleSubmit = () => {};
const handleCloseModal = () => {};

JSX:

<button onClick={handleSubmit} />

8. Files & Folders: kebab-case

Why: Works best across OS, Git, and URLs.

features/
  user-profile/
    user-profile.page.tsx
    user-profile.hook.ts
    user-profile.types.ts

9. Page, Layout, Component suffixes

home.page.tsx
auth.layout.tsx
user-card.component.tsx

Rule:

• Use suffixes only when project grows
• Be consistent across the codebase

Concise