When a function has 3 or more parameters, use object destructuring instead of positional arguments. This improves code readability by making parameter names explicit at call sites and making the function signature more maintainable as parameters are added or modified.
When a function has 3 or more parameters, use object destructuring instead of positional arguments. This improves code readability by making parameter names explicit at call sites and making the function signature more maintainable as parameters are added or modified.
Instead of this:
export const wrapWithPluginContext = <T,>(
pluginId: string,
extensionTitle: string,
Component: React.ComponentType<T>,
log: ExtensionsLog
) => {
// Implementation
}
// Call site
wrapWithPluginContext('my-plugin', 'My Extension', MyComponent, logger);
Do this:
export const wrapWithPluginContext = <T,>({
pluginId,
extensionTitle,
Component,
log,
}: {
pluginId: string;
extensionTitle: string;
Component: React.ComponentType<T>;
log: ExtensionsLog;
}) => {
// Implementation
}
// Call site
wrapWithPluginContext({
pluginId: 'my-plugin',
extensionTitle: 'My Extension',
Component: MyComponent,
log: logger,
});
This approach makes it immediately clear what each parameter represents, allows for future parameter additions without breaking existing call sites, and makes the code easier to read and maintain.
Enter the URL of a public GitHub repository