From 9fe113b0162daf860a1cbec1eb3a27049a13e95a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Sat, 24 Apr 2021 15:18:09 +0200
Subject: [PATCH] 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
---
 .../src/themes/ThemeContext.test.tsx          | 23 +++----------------
 .../grafana-ui/src/themes/ThemeContext.tsx    | 14 +----------
 2 files changed, 4 insertions(+), 33 deletions(-)

diff --git a/packages/grafana-ui/src/themes/ThemeContext.test.tsx b/packages/grafana-ui/src/themes/ThemeContext.test.tsx
index e49cf3bc8e1..d4e2b46f75d 100644
--- a/packages/grafana-ui/src/themes/ThemeContext.test.tsx
+++ b/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 />);
   });
 });
diff --git a/packages/grafana-ui/src/themes/ThemeContext.tsx b/packages/grafana-ui/src/themes/ThemeContext.tsx
index c8d39c5f7f8..38398ac41e6 100644
--- a/packages/grafana-ui/src/themes/ThemeContext.tsx
+++ b/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);
 }