Chore: Remove memoize-one from grafana-ui (#75016)

packages/grafana-ui/package.json

@@ -76,7 +76,6 @@
     "is-hotkey": "0.2.0",
     "jquery": "3.7.0",
     "lodash": "4.17.21",
-    "memoize-one": "6.0.0",
     "micro-memoize": "^4.1.2",
     "moment": "2.29.4",
     "monaco-editor": "0.34.0",

packages/grafana-ui/src/components/Cascader/Cascader.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import memoizeOne from 'memoize-one';
+import memoize from 'micro-memoize';
 import RCCascader from 'rc-cascader';
 import React, { PureComponent } from 'react';
 
@@ -106,7 +106,7 @@ export class Cascader extends PureComponent<CascaderProps, CascaderState> {
     return selectOptions;
   };
 
-  getSearchableOptions = memoizeOne((options: CascaderOption[]) => this.flattenOptions(options));
+  getSearchableOptions = memoize((options: CascaderOption[]) => this.flattenOptions(options));
 
   setInitialValue(searchableOptions: Array<SelectableValue<string[]>>, initValue?: string) {
     if (!initValue) {

packages/grafana-ui/src/components/Table/utils.ts

@@ -1,6 +1,6 @@
 import { Property } from 'csstype';
 import { clone } from 'lodash';
-import memoizeOne from 'memoize-one';
+import memoize from 'micro-memoize';
 import { Row } from 'react-table';
 
 import {
@@ -137,7 +137,7 @@ export function getColumns(
       sortType: selectSortType(field.type),
       width: fieldTableOptions.width,
       minWidth: fieldTableOptions.minWidth ?? columnMinWidth,
-      filter: memoizeOne(filterByValue(field)),
+      filter: memoize(filterByValue(field)),
       justifyContent: getTextAlign(field),
       Footer: getFooterValue(fieldIndex, footerValues, isCountRowsSet),
     });

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

@@ -106,14 +106,17 @@ export function useStyles<T>(getStyles: (theme: GrafanaTheme) => T) {
  * Prefer using primitive values (boolean, number, string, etc) for
  * additional arguments for better performance
  *
+ * ```
  * const getStyles = (theme, isDisabled, isOdd) => {css(...)}
  * [...]
  * const styles = useStyles2(getStyles, true, Boolean(index % 2))
+ * ```
  *
  * NOTE: For memoization to work, ensure that all arguments don't change
  * across renders (or only change if they need to)
+ *
+ * @public
  * */
-/** @public */
 export function useStyles2<T extends unknown[], CSSReturnValue>(
   getStyles: (theme: GrafanaTheme2, ...args: T) => CSSReturnValue,
   ...additionalArguments: T

packages/grafana-ui/src/themes/stylesFactory.ts

@@ -1,4 +1,4 @@
-import memoizeOne from 'memoize-one';
+import memoize from 'micro-memoize';
 
 /**
  * @public
@@ -9,5 +9,5 @@ import memoizeOne from 'memoize-one';
 export function stylesFactory<ResultFn extends (this: any, ...newArgs: any[]) => ReturnType<ResultFn>>(
   stylesCreator: ResultFn
 ) {
-  return memoizeOne(stylesCreator);
+  return memoize(stylesCreator);
 }

yarn.lock

@@ -4150,7 +4150,6 @@ __metadata:
     is-hotkey: 0.2.0
     jquery: 3.7.0
     lodash: 4.17.21
-    memoize-one: 6.0.0
     micro-memoize: ^4.1.2
     mock-raf: 1.0.1
     moment: 2.29.4