Choose descriptive, semantically accurate names for variables, types, and components that clearly communicate their purpose. Maintain consistency throughout your codebase by:
Choose descriptive, semantically accurate names for variables, types, and components that clearly communicate their purpose. Maintain consistency throughout your codebase by:
ComponentNameProps for interface props)// ❌ Poor naming practices
import { Slot } from "radix-ui"
// Duplicate interface name causes confusion
interface TimelineConent extends React.HTMLAttributes<HTMLParagraphElement> {}
// Generic typing disables autocompletion
type IconComponents = { [key: string]: (props: IconProps) => JSX.Element }
// Type redefinition instead of reuse
interface MultiSelectProps {
options: Record<"value" | "label", string>[]
}
// ✅ Better naming practices
import { Slot as SlotPrimitive } from "radix-ui"
// Consistent naming pattern
interface TimelineHeadingProps extends React.HTMLAttributes<HTMLParagraphElement> {}
// Specific typing enables autocompletion
type IconComponents = {
logo: (props: IconProps) => JSX.Element;
// other specific icon components...
}
// Reusing defined types
export type OptionType = Record<"value" | "label", string>
interface MultiSelectProps {
options: OptionType[]
}
When choosing between similar terms (like “mode” vs “theme”), select the one that most accurately represents the concept’s purpose in your codebase, and document the distinction to maintain consistency.
Enter the URL of a public GitHub repository