Basic memoization of button styles

elastic · Feb 22, 2024 · bb99273 · bb99273
1 parent c44cbc2
commit bb99273
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 12 deletions.
diff --git a/src/components/button/button_display/_button_display.tsx b/src/components/button/button_display/_button_display.tsx
@@ -16,7 +16,7 @@ import React, {
 
 // @ts-ignore module doesn't export `createElement`
 import { createElement } from '@emotion/react';
-import { getSecureRelForTarget, useEuiTheme } from '../../../services';
+import { getSecureRelForTarget, useEuiMemoizedStyles } from '../../../services';
 
 import {
   CommonProps,
@@ -139,9 +139,7 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
       isLoading,
     });
 
-    const theme = useEuiTheme();
-
-    const styles = euiButtonDisplayStyles(theme);
+    const styles = useEuiMemoizedStyles(euiButtonDisplayStyles);
     const cssStyles = [
       styles.euiButtonDisplay,
       styles[size],

diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx
@@ -15,7 +15,7 @@ import {
   PropsForAnchor,
   PropsForButton,
 } from '../../common';
-import { useEuiTheme, getSecureRelForTarget } from '../../../services';
+import { useEuiMemoizedStyles, getSecureRelForTarget } from '../../../services';
 
 import {
   EuiButtonDisplayContent,
@@ -119,8 +119,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
     display: 'empty',
   });
 
-  const euiTheme = useEuiTheme();
-  const styles = euiButtonEmptyStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiButtonEmptyStyles);
   const cssStyles = [
     styles.euiButtonEmpty,
     styles[size],

diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
@@ -142,15 +142,13 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
   type = 'single',
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-
   const wrapperStyles = euiButtonGroupStyles();
   const wrapperCssStyles = [
     wrapperStyles.euiButtonGroup,
     isFullWidth && wrapperStyles.fullWidth,
   ];
 
-  const styles = euiButtonGroupButtonsStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiButtonGroupButtonsStyles);
   const cssStyles = [
     styles.euiButtonGroup__buttons,
     isFullWidth && styles.fullWidth,

diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
@@ -14,7 +14,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { getSecureRelForTarget, useEuiTheme } from '../../../services';
+import { getSecureRelForTarget, useEuiTheme, useEuiMemoizedStyles } from '../../../services';
 import {
   CommonProps,
   ExclusiveUnion,
@@ -142,7 +142,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
     !isDisabled &&
     _emptyHoverStyles(euiThemeContext, color);
 
-  const styles = euiButtonIconStyles(euiThemeContext);
+  const styles = useEuiMemoizedStyles(euiButtonIconStyles);
   const cssStyles = [
     styles.euiButtonIcon,
     styles[size],