[useEuiTheme] return a memoized object for performance

src/components/icon/icon.tsx

@@ -244,6 +244,7 @@ export class EuiIconClass extends PureComponent<
       style,
       ...rest
     } = this.props;
+    console.log('::render');
 
     const { isLoading, neededLoading, iconTitle } = this.state;
     const isLoaded = !isLoading && neededLoading;

src/services/theme/hooks.test.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { testCustomHook } from '../../test/internal';
+import { useEuiTheme } from './hooks';
+
+describe('useEuiTheme', () => {
+  it('consecutive calls return a stable object', () => {
+    const hookResult = testCustomHook(useEuiTheme);
+    hookResult.updateHookArgs({});
+    expect(hookResult.return).toBe(hookResult.getUpdatedState());
+  });
+});

src/services/theme/hooks.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext, useMemo } from 'react';
 
 import {
   EuiThemeContext,
@@ -30,11 +30,16 @@ export const useEuiTheme = <T extends {} = {}>(): UseEuiTheme<T> => {
   const colorMode = useContext(EuiColorModeContext);
   const modifications = useContext(EuiModificationsContext);
 
-  return {
-    euiTheme: theme as EuiThemeComputed<T>,
-    colorMode,
-    modifications: modifications as EuiThemeModifications<T>,
-  };
+  const assembledTheme = useMemo(
+    () => ({
+      euiTheme: theme as EuiThemeComputed<T>,
+      colorMode,
+      modifications: modifications as EuiThemeModifications<T>,
+    }),
+    [theme, colorMode, modifications]
+  );
+
+  return assembledTheme;
 };
 
 export interface WithEuiThemeProps<P = {}> {
@@ -51,18 +56,8 @@ export const withEuiTheme = <T extends {} = {}, U extends {} = {}>(
     props: Omit<T, keyof WithEuiThemeProps<U>>,
     ref: React.Ref<Omit<T, keyof WithEuiThemeProps<U>>>
   ) => {
-    const { euiTheme, colorMode, modifications } = useEuiTheme<U>();
-    return (
-      <Component
-        theme={{
-          euiTheme,
-          colorMode,
-          modifications,
-        }}
-        ref={ref}
-        {...(props as T)}
-      />
-    );
+    const theme = useEuiTheme<U>();
+    return <Component theme={theme} ref={ref} {...(props as T)} />;
   };
 
   const WithEuiTheme = forwardRef(Render);

upcoming_changelogs/6165.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Added memoization to `useEuiTheme`'s return value, supporting React's shallow prop comparison optimizations