Avoid duplicate configuration processing and keep configuration data properly centralized. When configuration utilities or hooks already exist, use them instead of manually processing the same data. Keep translations in locale files rather than embedding them directly in data structures, and prefer design tokens over hardcoded values for styling...
Avoid duplicate configuration processing and keep configuration data properly centralized. When configuration utilities or hooks already exist, use them instead of manually processing the same data. Keep translations in locale files rather than embedding them directly in data structures, and prefer design tokens over hardcoded values for styling configurations.
Example of avoiding duplicate processing:
// ❌ Don't manually process config when utilities exist
const { previewMask } = previewConfig && typeof previewConfig === 'object' ? previewConfig : {};
// ✅ Use existing configuration hooks
const [contextPreviewConfig, contextPreviewRootClassName, contextPreviewMaskClassName] =
usePreviewConfig(contextPreview);
Example of proper configuration separation:
// ❌ Don't embed translations in data
const colors = [
{
name: 'red',
english: 'Dust Red',
chineseDescription: '斗志、奔放',
}
];
// ✅ Use locale keys and keep translations centralized
const colors = [
{
name: 'red',
english: 'Dust Red',
descriptionKey: 'colors.red.description',
}
];
// Then use: locale[color.descriptionKey]
This approach improves maintainability, reduces duplication, and ensures configuration changes are centralized and consistent across the application.
Enter the URL of a public GitHub repository