Naming Elements in Code

// 🚩 Incorrect
const apiUrl = "https://api.example.com"; // Incorrect case
const TimeoutInMilliseconds = 5000; // Incorrect capitalization

// ✅ Correct
const API_URL = "https://api.example.com";
const TIMEOUT_IN_MILLISECONDS = 5000;

// 🚩 Incorrect
// Incorrect function name: "fetchUsrDetails" uses abbreviations ("Usr").
// This makes the function name unclear and less descriptive.
const fetchUsrDetails = async (usrId) => {
  try {
    // Incorrect variable name: "resp" is an abbreviation.
    // Use "response" for clarity.
    const resp = await fetch(`${API_URL}/users/${usrId}`);
    if (!resp.ok) {
      throw new Error(`Failed to fetch usr details: ${resp.status}`);
    }

    const usrDetails = await resp.json();
    return usrDetails;
  } catch (err) {
    // Incorrect variable name: "err" is too generic and abbreviated.
    // Use "error" to make the code clearer.
    console.error(err);
    throw err;
  }
};

// ✅ Correct
const fetchUserDetails = async (userId) => {
  try {
    const response = await fetch(`${API_URL}/users/${userId}`);
    if (!response.ok) {
      throw new Error(`Failed to fetch user details: ${response.status}`);
    }
    const userDetails = await response.json();
    return userDetails;
  } catch (error) {
    console.error("Error fetching user details:", error.message);
    throw error;
  }
};

// 🚩 Incorrect
// The type "number" is already known, no need to add it to the variable name.
let userAgeNumber: number = 30;
let itemListArray: number[] = [1, 2, 3];

// ✅ Correct
let userAge: number = 30;
let itemList: number[] = [1, 2, 3];

// 🚩 Incorrect
function calculateSumNumber(a: number, b: number): number {
  // "Number" is part of the return type, no need to include it in the function name.
  return a + b;
}

// ✅ Correct
function calculateSum(a: number, b: number): number {
  return a + b;
}

// 🚩 Incorrect
const TIMEOUT = 5000; // Timeout in what? Seconds? Milliseconds?

// ✅ Correct
const TIMEOUT_IN_MILLISECONDS = 5000;

// 🚩 Incorrect
function debounce(func, delay) {
  // code
  // ...
}

// ✅ Correct
function debounce(func, delayMilliseconds) {
  // code
  // ...
}

// 🚩 Incorrect
// Using "I" prefix for the props interface
interface IUserProps {
  name: string;
  age: number;
}

const User: React.FC<IUserProps> = ({ name, age }) => {
  // code
  // ...
};

// ✅ Correct
// Use `UserProps` for the interface describing the component props
interface UserProps {
  name: string;
  age: number;
}

const User: React.FC<UserProps> = ({ name, age }) => {
  // code
  // ...
};

// 🚩 Incorrect
// Parent component named `BaseButton`, which can be misleading
const BaseButton: React.FC<{ onClick: () => void; children: React.ReactNode }> = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

// Derived component named `Button` is too generic for a specific use case
const Button: React.FC<{ onClick: () => void }> = ({ onClick, children }) => {
  return (
    <BaseButton onClick={onClick}>
      <span className="primary">{children}</span>
    </BaseButton>
  );
};

// Derived component named `SecondaryButton` is fine, but the parent is misleading
const SecondaryButton: React.FC<{ onClick: () => void }> = ({ onClick, children }) => {
  return (
    <BaseButton onClick={onClick}>
      <span className="secondary">{children}</span>
    </BaseButton>
  );
};

// ✅ Correct
// Parent component named simply `Button` (no "Base" prefix)
const Button: React.FC<{ onClick: () => void; children: React.ReactNode }> = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

// Derived component named `PrimaryButton`, reflecting the type of button
const PrimaryButton: React.FC<{ onClick: () => void }> = ({ onClick, children }) => {
  return (
    <Button onClick={onClick}>
      <span className="primary">{children}</span>
    </Button>
  );
};

// Another derived component named `SecondaryButton`
const SecondaryButton: React.FC<{ onClick: () => void }> = ({ onClick, children }) => {
  return (
    <Button onClick={onClick}>
      <span className="secondary">{children}</span>
    </Button>
  );
};

// 🚩 Incorrect
// utils.ts
// This file is a catch-all for many different utilities like pagination, cookies, and debounce functions.
// While it may seem simple at first, it creates confusion and can become unmanageable over time.

export const paginate = () => {
  // code
  // ...
};

export const getCookie = () => {
  // code
  // ...
};

export const setCookie = () => {
  // code
  // ...
};

export const debounce = () => {
  // code
  // ...
};

// ✅ Correct
// utils/pagination.ts
// This file is dedicated to pagination logic only. Its name immediately tells you what it’s responsible for.
export const paginate = () => {
  // code
  // ...
};

// utils/cookies.ts
// This file contains cookie-related utilities. The name clearly indicates its purpose.
export const getCookie = () => {
  // code
  // ...
};
export const setCookie = () => {
  // code
  // ...
};
// debounce.ts
// This file contains the debounce utility. The name clearly tells us it's about debouncing.
export const debounce = () => {
  // code
  // ...
};