Enchancement: Memoize UI builders in Button #8526

Problem

In the Button component, the helper functions createIcon, createLabel, and createBadge are executed on every render, regardless of whether their dependent props have changed.

While each computation is relatively small, this can lead to unnecessary recalculations in scenarios where the Button component re-renders frequently (e.g., in lists, forms, or state updates).

Suggested Improvement

Memoize the results of these helper functions using React.useMemo, based on their relevant dependencies.

Example:

const icon = React.useMemo(() => createIcon(), [props.icon, props.loading, props.iconPos]);
const label = React.useMemo(() => createLabel(), [props.label, props.children]);
const badge = React.useMemo(() => createBadge(), [props.badge]);

Benefits

• Reduces redundant computations on re-render
• Aligns with React performance best practices
• Improves efficiency in high-frequency render scenarios
• Maintains full backward compatibility