PascalCase vs camelCase: When to Use Each Convention

The Two Most Common Naming Conventions

PascalCase and camelCase are the two dominant naming conventions in modern programming. They differ by one character: whether the first letter is uppercase or lowercase.

Choosing the right convention isn't arbitrary — it communicates what a name represents. When you see UserProfile, you expect a class or component. When you see userProfile, you expect a variable or function. This shared understanding makes code faster to read and easier to maintain.

When to Use PascalCase

Classes and Constructors

In most object-oriented languages, PascalCase signals that a name is a class or constructor function:

class UserProfile { }
class JsonFormatter { }
const ErrorBoundary = defineComponent({ })

React and Vue Components

Both React and Vue use PascalCase for component names:

// React
<UserProfile name="Alice" />

// Vue template
<UserProfile name="Alice" />

PascalCase distinguishes components from HTML elements. <userProfile> looks like a custom element; <UserProfile> clearly signals a component.

TypeScript Types and Interfaces

interface UserProfile {
  firstName: string
  lastName: string
}

type ApiResponse<T> = {
  data: T
  status: number
}

Enums

enum HttpStatus {
  Ok = 200,
  NotFound = 404,
  InternalServerError = 500,
}

Namespace-like Exports

export const ApiClient = {
  get(url) { },
  post(url, data) { },
}

When to Use camelCase

Variables and Properties

const firstName = 'Alice'
const isActive = true
const httpStatus = 200

user.firstName
config.maxRetries

Functions and Methods

function formatDate(date) { }
function calculateTotal(items) { }

obj.getItems()
arr.reduce(callback)

React Hooks

const [count, setCount] = useState(0)
const user = useCurrentUser()
const router = useRouter()

Vue Composables

const { x, y } = useMouse()
const isDark = useDark()

Language-by-Language Reference

* In Go, PascalCase names are exported (public); camelCase names are unexported (private).

Edge Cases and Conflicts

React组件 vs. HTML元素

Avoid component names that clash with HTML elements:

- <Section />  // ambiguous with <section>
+ <PageSection />

Abbreviations in PascalCase

Treat abbreviations as words:

- XMLParser    // reads as X-M-L-Parser
+ XmlParser    // reads as Xml-Parser

- getUserIdHTTP   // jarring transition
- getUserIdHttp   // better
+ fetchUserIdHttp // clearer intent

Two-letter abbreviations stay uppercase:

const id = 42          // not iD
const ui = getUI()      // not getUi()

Boolean naming

Prefix boolean variables and methods with is, has, or should:

const isActive = true
const hasPermission = checkPermission()
const shouldRetry = error.isTransient

File Naming Conventions

The relationship between file names and the convention of their exports varies by framework:

Vue and React both use PascalCase for component files. Some frameworks (Next.js App Router, SvelteKit) use kebab-case for file names regardless of what the export uses.

Common Mistakes

Key Takeaways

• PascalCase signals types, classes, and components — things you instantiate or reference as blueprints
• camelCase signals variables, functions, and properties — things that hold values or perform actions
• Both React and Vue use PascalCase for component names in templates
• TypeScript uses PascalCase for interfaces, types, and enums
• Treat abbreviations as words (XmlParser, not XMLParser), except two-letter ones (id, ui)
• Match your file naming convention to your framework's convention, not your personal preference

Related Guides

• Naming Conventions Guide
• camelCase vs snake_case
• Code Readability Tips

Try It Yourself

Convert text between PascalCase, camelCase, snake_case, and more with our free Case Converter. Paste any text and get instant conversions across all common naming conventions.