Naming Consistent

Consistent naming removes “how should I call this?” friction, lets grep-based searches find references instantly, and keeps Git diffs readable. A predictable pattern also helps static analysis tools catch mistakes sooner and improves onboarding for new engineers.

Correct Example

// File: features/auth/login-form.tsx  (kebab-case)
import { useState } from "react";
import { useAuth } from "@/features/auth/use-auth"; // hook in camelCase

export function LoginForm() {
  // PascalCase component
  const { signIn } = useAuth();
  const [email, setEmail] = useState("");
  const [pwd, setPwd] = useState("");

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        signIn(email, pwd);
      }}
      className="flex flex-col gap-4"
    >
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="input"
      />
      <input
        type="password"
        value={pwd}
        onChange={(e) => setPwd(e.target.value)}
        className="input"
      />
      <button className="btn-primary">Log In</button>
    </form>
  );
}

Incorrect Example

// File: Features/Auth/LoginForm.jsx   (pascal + uppercase folder)
import { UseAuth } from "@/features/auth/UseAuth"; // ❌ hook in PascalCase

export function login_form() {
  // ❌ component in snake_case
  const { SignIn } = UseAuth(); // ❌ variable in PascalCase

  // …
}

Key Takeaways

• PascalCase for exported React components: UserMenu, ProfileCard.
• camelCase for hooks, variables, and functions: useFetch, isLoading.
• kebab-case (lowercase + dashes) for filenames: user-menu.tsx, use-fetch.ts.
• Stick to the pattern everywhere—IDE autocompletion and grep become effortless.
• Inconsistent casing causes missed imports and brittle refactors.