Names should clearly and accurately reflect their actual purpose, functionality, and scope. Avoid misleading terminology that doesn’t match the component’s or variable’s true behavior.

// ❌ Misleading - not for "object options" but "select field options"
ObjectOptionsDropdownCreateNewOption

// ✅ Clear and accurate
AddSelectOptionMenuItem

// ❌ Unclear boolean with double negative
const isPlainString = !streamData.includes('\n') || !streamData.split('\n').some(...)

// ✅ Clear and positive
const hasStructuredStreamData = (data: string): boolean => {
  if (!data.includes('\n')) return false;
  return data.split('\n').some(line => { /* ... */ });
}

// ❌ Missing naming convention
const AddStyleContainer = { /* ... */ }

// ✅ Follows styled component convention  
const StyledAddContainer = { /* ... */ }

// ❌ Single parameter limits extensibility
uniqueNotEditableKey="content-type"

// ✅ Array allows multiple values
readonlyKeys={["content-type"]}

This ensures code is self-documenting and reduces cognitive load for developers trying to understand the codebase.

Add Repository

Private Repository