React Component Naming Conventions: Files, Props, and Hooks

React has strong naming conventions that are enforced by JSX itself — components must start with an uppercase letter.

Components: PascalCase

All React components use PascalCase: UserProfile, ShoppingCart, NavBar. This is required — JSX treats lowercase tags as HTML elements.

Props: camelCase

Props use camelCase: userName, isLoading, onSubmit, maxRetries.

Hooks: use + PascalCase

Custom hooks start with use: useAuth, useFetch, useLocalStorage.

Event Handlers

Props: on + Event (onClick, onSubmit). Handler functions: handle + Event (handleClick, handleSubmit).

File Names

Type	Convention	Example
Component	PascalCase	UserProfile.tsx
Hook	camelCase	useAuth.ts
Utility	camelCase	formatDate.ts
Style	PascalCase	UserProfile.module.css
Test	Match source	UserProfile.test.tsx

Convert Names

PascalCase converter for components, camelCase for props, or hub.