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.
Enter the URL of a public GitHub repository