prioritize code readability

Write code that prioritizes clarity and readability over cleverness or brevity. This includes several key practices:

Extract static functions: Move functions that don’t depend on component state outside the component to reduce complexity and make their static nature clear.

// Instead of defining inside component:
export function MyComponent() {
  const validateFile = (file: File): string | null => {
    // validation logic
  };
  // ...
}

// Extract to module level:
function validateFile(file: File): string | null {
  // validation logic
}

export function MyComponent() {
  // component logic only
}

Separate concerns: Extract styles to CSS modules rather than embedding them inline, and separate business logic from presentation logic.

Prefer simple procedural code: Choose clear, step-by-step code over complex one-liners or overly clever patterns, even if the latter appears more “elegant.”

// Prefer this clear approach:
let q = z.query.issue.orderBy(sortField, sortDirection);
if (open !== undefined) {
  q = q.where('open', open);
}
if (creator) {
  q = q.whereExists('creator', q => q.where('login', creator));
}

// Over complex one-liners that are harder to follow

Avoid unnecessary complexity: Question whether complex patterns or abstractions truly add value, especially when simpler alternatives exist. Save complexity budget for features that genuinely require it.