Emotion: useStyles removed the memoized styles making it worse than stylesFactory (#33263)

* Emotion: useStyles removed the memoized styles making it worse than stylesFactory

* Updated tests

packages/grafana-ui/src/themes/ThemeContext.test.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { config } from '@grafana/runtime';
 import { renderHook } from '@testing-library/react-hooks';
 import { css } from '@emotion/css';
-import { mount } from 'enzyme';
-import { memoizedStyleCreators, mockThemeContext, useStyles } from './ThemeContext';
+import { mockThemeContext, useStyles } from './ThemeContext';
+import { render } from '@testing-library/react';
 
 describe('useStyles', () => {
   it('memoizes the passed in function correctly', () => {
@@ -33,23 +33,6 @@ describe('useStyles', () => {
     restoreThemeContext();
   });
 
-  it('cleans up memoized functions whenever a new one comes along or the component unmounts', () => {
-    const styleCreators: Function[] = [];
-    const { rerender, unmount } = renderHook(() => {
-      const styleCreator = () => ({});
-      styleCreators.push(styleCreator);
-      return useStyles(styleCreator);
-    });
-
-    expect(typeof memoizedStyleCreators.get(styleCreators[0])).toBe('function');
-    rerender();
-    expect(memoizedStyleCreators.get(styleCreators[0])).toBeUndefined();
-    expect(typeof memoizedStyleCreators.get(styleCreators[1])).toBe('function');
-    unmount();
-    expect(memoizedStyleCreators.get(styleCreators[0])).toBeUndefined();
-    expect(memoizedStyleCreators.get(styleCreators[1])).toBeUndefined();
-  });
-
   it('passes in theme and returns style object', (done) => {
     const Dummy: React.FC = function () {
       const styles = useStyles((theme) => {
@@ -68,6 +51,6 @@ describe('useStyles', () => {
       return <div>dummy</div>;
     };
 
-    mount(<Dummy />);
+    render(<Dummy />);
   });
 });

packages/grafana-ui/src/themes/ThemeContext.tsx

@@ -1,6 +1,6 @@
 import { createTheme, GrafanaTheme, GrafanaThemeV2 } from '@grafana/data';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { Themeable } from '../types/theme';
 import { stylesFactory } from './stylesFactory';
 
@@ -86,12 +86,6 @@ export function useStyles<T>(getStyles: (theme: GrafanaTheme) => T) {
     memoizedStyleCreators.set(getStyles, memoizedStyleCreator);
   }
 
-  useEffect(() => {
-    return () => {
-      memoizedStyleCreators.delete(getStyles);
-    };
-  }, [getStyles]);
-
   return memoizedStyleCreator(theme);
 }
 
@@ -111,12 +105,6 @@ export function useStyles2<T>(getStyles: (theme: GrafanaThemeV2) => T) {
     memoizedStyleCreators.set(getStyles, memoizedStyleCreator);
   }
 
-  useEffect(() => {
-    return () => {
-      memoizedStyleCreators.delete(getStyles);
-    };
-  }, [getStyles]);
-
   return memoizedStyleCreator(theme);
 }