Using a Centralized Typography Component in React

Adopting effective naming conventions is crucial in software development for ensuring code clarity, maintainability, and ease of collaboration. This guide covers various aspects of naming, from file names to constants, providing guidelines for best practices.


Used for object keys, function names, React state variables, and more.

Object Naming

State object keys should be descriptive and follow camelCase.

Good Practice:

  firstName: "",
  lastName: "",
  paymentId: "",

Bad Practice:

  first: "",        // Not descriptive
  lname: "",        // Inconsistent naming
  id_payment: "",   // Mixed naming styles

Hook naming

Combine ‘use’, action, and resource for clarity.

Good Practice:

function useLocalStorage() { /* ... */ }
function useClickOutside() { /* ... */ }

function useGetUserProfileAPI() { /* ... swr api function */ }
function useUserLoginAPI() { /* ... swr api function */ }

Bad Practice:

function getUserProfile() { /* ... */ }   // Not clear it's a hook
function loginAPI() { /* ... */ }         // Should start with 'use' and describe action

Function Naming

Function names should clearly indicate their purpose and action.

Good Practice:

function handleChange() { /* ... */ }
function handleSubmit() { /* ... */ }
function getUserProfileAPI() { /* ... */ } // REST API Call Function

Bad Practice:

function handle() { /* ... */ }             // Too vague
function submitData() { /* ... */ }         // Verb should come first


Used for class names, constructor functions, and React component names.

Type Naming: UserProfile

Good Example:

type UserProfile = {
  id: number;
  name: string;
  email: string;

Bad Example:

type user_info = {
  userid: number;
  username: string;
  useremail: string;

Interface Naming: UserSettings

Good Example:

interface UserSettings {
  theme: string;
  notifications: boolean;

Bad Example:

interface settings {
  Theme: string;
  NotificationsEnabled: boolean;


Commonly used for database fields and table names.

Database Schema Naming

Tables Naming:

Good Practice:


Bad Practice:

usersTable          // Prefix 'tbl_' makes it clear it's a table
paymentHistory      // Lacks prefix

Table Fields Naming:

Good Practice:


Bad Practice:

FirstName           // Use snake_case for database fields
last name           // Avoid spaces; use underscores
emailAddress        // Stick to one case style, preferably snake_case


Used for constants and environment variable names


Good Practice:

const MAX_RETRY_COUNT = 3;
const DEFAULT_TIMEOUT = 1000;
const API_BASE_URL = '';

Bad Practice:

const maxRetry = 3;              // Should be uppercase
const DefaultTimeout = 1000;     // Should not use camelCase or PascalCase
const ApiBaseUrl = 'https://...';// Constants should be in uppercase

Environment Variables

Good Practice:


Bad Practice:

dbUrl            // Not uppercase
accessToken      // Should use underscores to separate words
RedisPort        // Not following the uppercase convention


Used for CSS class names and URL slugs.

CSS Class Naming

Good Practice:


Bad Practice:


Other Naming Conventions ✨

Configuration Files

Configuration file names should indicate their purpose and the environment they’re used in.

Good Practice:


Bad Practice:

configDev.js              // Inconsistent naming
prodConfig.js             // Ambiguity in file purpose
test_conf.js              // Mixing naming styles

Certainly! Let’s include examples for folder naming conventions as well. In software development, folder names are typically given in PascalCase or kebab-case, depending on the project’s convention. Here’s how I would incorporate this into the document:

Folder Naming

Folder names should be clear, consistent, and indicative of their contents. Depending on the project’s convention, PascalCase or kebab-case can be used.

Recomend using kebab-case for folder names.

PascalCase for Folder Naming

Good Practice:


Bad Practice:

components/          // Should be PascalCase for consistency
utilities_folder/    // Should not mix cases or use underscores
auth-pages/          // Should use either kebab-case or PascalCase consistently
UserProfilePage/     // Redundant 'Page' suffix in a folder name

kebab-case for Folder Naming

Good Practice:


Bad Practice:

Components/          // Should be lowercase for kebab-case
utilitiesFolder/     // Should use dashes, not camelCase
Auth_Pages/          // Avoid mixing case styles and underscores
UserProfilePage/     // Redundant 'Page' suffix and incorrect case style

File Naming Conventions

File naming conventions organize and simplify your code, making it easier for teams to navigate. This guide emphasizes best practices for naming React components and files such as hooks and utils. It also warns against common mistakes to keep your project clear and consistent.

Component Files (JSX/TSX)

| Good Practice ✅

React component files should be named using PascalCase.


| Bad Practice ❌

Avoid using snake_case, kebab-case, or inconsistent capitalization in component filenames.

user_profile.jsx     // snake_case
invoice-list.tsx     // kebab-case
userprofile.js       // all lowercase

Hooks/Utils/Other JS or TS Files

For non-component files, you have the option between kebab-case and camelCase. The key is to maintain consistency throughout the project. Choose one style and stick with it.

| Good Practice ✅

  • Using Kebab-Case
  • Using CamelCase

| Bad Practice ❌

Mixing naming conventions within the same project or using unconventional casing can lead to a cluttered and confusing codebase.

useUserData.js       // CamelCase mixed with...
format-date.ts       // kebab-case in the same project

UseUserData.js       // PascalCase for non-component files
formatDate.TS        // Inconsistent file extension casing

Recommendation 📌

Decide whether to use kebab-case or camelCase for naming hooks, utilities, types, and other similar files in your project. Do not mix these conventions within the same codebase.

The choice may depend on team preferences, the specific needs of the project, or existing conventions in related projects. Remember, consistency is paramount.

Programming Case Styles Cheat Sheet📘

Quick Reference for Naming Conventions in Different Programming Scenarios

Case StyleUsage
camelCaseObject keys, function names, variables, React state variables, method names in classes
PascalCaseClass names, constructor functions, React component names, interface names (in languages like TypeScript)
snake_caseDatabase fields, database table names, variable and function names in Python
kebab-caseCSS class names, file names, URL slugs
UPPER_CASE_SNAKE_CASEConstants, environment variable names
Hungarian NotationPrefixing variable names with type indicators (less common)


Adopting clear and consistent naming conventions enhances the overall quality of your codebase, making it more accessible and easier to maintain. By following these guidelines, you’ll foster a more efficient and collaborative development environment.