Break down complex functions and large files into smaller, focused units with clear responsibilities. Extract complex logic into well-named helper functions, split large files into focused modules, and prefer `const` over `let` for variables that won't be reassigned.
Break down complex functions and large files into smaller, focused units with clear responsibilities. Extract complex logic into well-named helper functions, split large files into focused modules, and prefer const
over let
for variables that won’t be reassigned.
When functions become difficult to understand or do multiple things, extract the complex parts:
// Instead of one large function doing everything
function parseRadialGradientCSSString(gradientContent) {
// 50+ lines of parsing logic for shape, size, and position
const firstPartTokens = firstPartStr.split(/\s+/);
while (firstPartTokens.length > 0) {
// complex parsing logic...
}
}
// Extract into focused functions
function parseRadialGradientCSSString(gradientContent) {
const position = parseRadialGradientPosition(firstPartStr);
const shape = parseRadialGradientShape(firstPartStr);
// cleaner, more focused logic
}
Similarly, prefer const
for immutable variables to signal intent:
// Instead of
let restPropsWithDefaults = {
...defaultProps
};
// Use
const restPropsWithDefaults = {
...defaultProps
};
When files grow beyond 200-300 lines or handle multiple distinct responsibilities, split them into focused modules organized by functionality (e.g., StyleSheet/BackgroundImage/linearGradient.js
, radialGradient.js
).
Enter the URL of a public GitHub repository