IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

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

* Updated tests
This commit is contained in:
Torkel Ödegaard 2021-04-24 15:18:09 +02:00 committed by GitHub
parent ad63f871ce
commit 9fe113b016
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/grafana-ui/src/themes/ThemeContext.test.tsx
View File

@ -2,8 +2,8 @@ import React from 'react';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { renderHook } from '@testing-library/react-hooks'; import { renderHook } from '@testing-library/react-hooks';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { mount } from 'enzyme'; import { mockThemeContext, useStyles } from './ThemeContext';
import { memoizedStyleCreators, mockThemeContext, useStyles } from './ThemeContext'; import { render } from '@testing-library/react';
describe('useStyles', () => { describe('useStyles', () => {
it('memoizes the passed in function correctly', () => { it('memoizes the passed in function correctly', () => {
@ -33,23 +33,6 @@ describe('useStyles', () => {
restoreThemeContext(); 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) => { it('passes in theme and returns style object', (done) => {
const Dummy: React.FC = function () { const Dummy: React.FC = function () {
const styles = useStyles((theme) => { const styles = useStyles((theme) => {
@ -68,6 +51,6 @@ describe('useStyles', () => {
return <div>dummy</div>; return <div>dummy</div>;
}; };
mount(<Dummy />); render(<Dummy />);
}); });
}); });

14
packages/grafana-ui/src/themes/ThemeContext.tsx
View File

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