Prefer direct property access

When property names are known at development time, use direct property access (e.g., `object.property`) over computed property access (e.g., `object[propertyName]`). This approach enhances code readability, enables better IDE autocompletion, improves type checking, and makes the code more maintainable.

copy reviewer prompt

Prompt

Reviewer Prompt

When property names are known at development time, use direct property access (e.g., object.property) over computed property access (e.g., object[propertyName]). This approach enhances code readability, enables better IDE autocompletion, improves type checking, and makes the code more maintainable.

Example - Instead of:

output[propName] = clsx(
  defaultProps?.[propName] as string,
  props?.[propName] as string,
);

output[propName] = {
  ...(defaultProps?.[propName] ?? ({} as React.CSSProperties)),
  ...(props?.[propName] ?? ({} as React.CSSProperties)),
};

Prefer:

output.className = clsx(
  defaultProps.className,
  props.className,
);

output.style = {
  ...defaultProps.style,
  ...props.style,
};

This approach eliminates unnecessary dynamic property access, type assertions, and optional chaining when the property name is statically known. Code becomes more concise and the intent is clearer.

Source discussions