diff --git a/.eslintrc b/.eslintrc
index 6688e1bc107..c88e985c2d3 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -16,11 +16,8 @@
         "react-hooks/exhaustive-deps": "off",
         "react/prop-types": "off",
         "react/no-unescaped-entities": "off",
-        "react/display-name": "off",
-        "react/no-deprecated": "off",
         "react/no-unknown-property": "off",
         "react/no-children-prop": "off",
-        "react/no-find-dom-node": "off",
         "react/no-render-return-value": "off",
         "no-only-tests/no-only-tests": "error"
       }
diff --git a/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx b/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
index 227058a4530..e976629d1c6 100644
--- a/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
+++ b/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
@@ -1,5 +1,4 @@
-import { PureComponent } from 'react';
-import ReactDOM from 'react-dom';
+import React, { PureComponent, createRef } from 'react';
 
 export interface Props {
   /**
@@ -28,6 +27,7 @@ export class ClickOutsideWrapper extends PureComponent<Props, State> {
     parent: window,
     useCapture: false,
   };
+  myRef = createRef<HTMLDivElement>();
   state = {
     hasEventListener: false,
   };
@@ -48,7 +48,7 @@ export class ClickOutsideWrapper extends PureComponent<Props, State> {
   }
 
   onOutsideClick = (event: any) => {
-    const domNode = ReactDOM.findDOMNode(this) as Element;
+    const domNode = this.myRef.current;
 
     if (!domNode || !domNode.contains(event.target)) {
       this.props.onClick();
@@ -56,6 +56,6 @@ export class ClickOutsideWrapper extends PureComponent<Props, State> {
   };
 
   render() {
-    return this.props.children;
+    return <div ref={this.myRef}>{this.props.children}</div>;
   }
 }
diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
index 91c59ffb417..26e3f64fdee 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
@@ -19,20 +19,22 @@ export const SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopove
       customPickers={{
         yaxis: {
           name: 'Y-Axis',
-          tabComponent: () => (
-            <Switch
-              key="yaxisSwitch"
-              label="Use right y-axis"
-              className="ColorPicker__axisSwitch"
-              labelClass="ColorPicker__axisSwitchLabel"
-              checked={yaxis === 2}
-              onChange={() => {
-                if (onToggleAxis) {
-                  onToggleAxis();
-                }
-              }}
-            />
-          ),
+          tabComponent() {
+            return (
+              <Switch
+                key="yaxisSwitch"
+                label="Use right y-axis"
+                className="ColorPicker__axisSwitch"
+                labelClass="ColorPicker__axisSwitchLabel"
+                checked={yaxis === 2}
+                onChange={() => {
+                  if (onToggleAxis) {
+                    onToggleAxis();
+                  }
+                }}
+              />
+            );
+          },
         },
       }}
     />
diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
index bd22d22b6ad..cc76477cd66 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
@@ -13,6 +13,7 @@ export interface SpectrumPaletteProps extends Themeable {
   onChange: (color: string) => void;
 }
 
+// eslint-disable-next-line react/display-name
 const renderPointer = (theme: GrafanaTheme) => (props: SpectrumPalettePointerProps) => (
   <SpectrumPalettePointer {...props} theme={theme} />
 );
diff --git a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
index 6079ac5d3a6..7a584f08f1e 100644
--- a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
+++ b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
@@ -191,6 +191,7 @@ const ContextMenuItemComponent: React.FC<ContextMenuItemProps> = React.memo(
     );
   }
 );
+ContextMenuItemComponent.displayName = 'ContextMenuItemComponent';
 
 interface ContextMenuGroupProps {
   group: ContextMenuGroup;
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx
index 21e0427b5b2..8cceb55a4c4 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx
@@ -11,6 +11,7 @@ interface ButtonComponentProps {
   iconClass?: string;
 }
 
+// eslint-disable-next-line react/display-name
 const ButtonComponent = (buttonProps: ButtonComponentProps) => (props: any) => {
   const { label, className, iconClass } = buttonProps;
 
diff --git a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
index da5a5baace5..6b94c5b1d39 100644
--- a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
+++ b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
@@ -28,6 +28,7 @@ export const FeatureInfoBox = React.memo(
     return <InfoBox branded title={titleEl} urlTitle="Read documentation" {...otherProps} />;
   })
 );
+FeatureInfoBox.displayName = 'FeatureInfoBox';
 
 const getFeatureInfoBoxStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
index e635a459127..1646f9fde51 100644
--- a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
+++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
@@ -55,6 +55,7 @@ export const InfoBox = React.memo(
     }
   )
 );
+InfoBox.displayName = 'InfoBox';
 
 const getInfoBoxStyles = stylesFactory((theme: GrafanaTheme, severity: AlertVariant) => ({
   wrapper: css`
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx
index ecd9f111c28..5192c21ba71 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx
@@ -15,6 +15,7 @@ export const FieldNameByRegexMatcherEditor = memo<MatcherUIProps<string>>(props
 
   return <Input placeholder="Enter regular expression" defaultValue={options} onBlur={onBlur} />;
 });
+FieldNameByRegexMatcherEditor.displayName = 'FieldNameByRegexMatcherEditor';
 
 export const fieldNameByRegexMatcherItem: FieldMatcherUIRegistryItem<string> = {
   id: FieldMatcherID.byRegexp,
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx
index 1131777d1ad..6fb2d33463f 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx
@@ -21,6 +21,7 @@ export const FieldNameMatcherEditor = memo<MatcherUIProps<string>>(props => {
   const selectedOption = selectOptions.find(v => v.value === options);
   return <Select value={selectedOption} options={selectOptions} onChange={onChange} />;
 });
+FieldNameMatcherEditor.displayName = 'FieldNameMatcherEditor';
 
 export const fieldNameMatcherItem: FieldMatcherUIRegistryItem<string> = {
   id: FieldMatcherID.byName,
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx
index cb2fc2798f8..9e85ad2beaa 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx
@@ -18,6 +18,7 @@ export const FieldTypeMatcherEditor = memo<MatcherUIProps<string>>(props => {
   const selectedOption = selectOptions.find(v => v.value === options);
   return <Select value={selectedOption} options={selectOptions} onChange={onChange} />;
 });
+FieldTypeMatcherEditor.displayName = 'FieldTypeMatcherEditor';
 
 const allTypes: Array<SelectableValue<FieldType>> = [
   { value: FieldType.number, label: 'Numeric' },
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx
index c80c742411c..01d9e3658ea 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx
@@ -26,6 +26,8 @@ export const FieldsByFrameRefIdMatcher = memo<MatcherUIProps<string>>(props => {
   return <Select value={selectedOption} options={selectOptions} onChange={onChange} />;
 });
 
+FieldsByFrameRefIdMatcher.displayName = 'FieldsByFrameRefIdMatcher';
+
 /**
  * Registry item for UI to configure "fields by frame refId"-matcher.
  * @public
diff --git a/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx b/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx
index 5a59163a07d..04d01714d12 100644
--- a/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx
+++ b/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx
@@ -36,7 +36,9 @@ export const FieldColorEditor: React.FC<FieldConfigEditorProps<FieldColor | unde
       description: mode.description,
       isContinuous: mode.isContinuous,
       isByValue: mode.isByValue,
-      component: () => <FieldColorModeViz mode={mode} theme={theme} />,
+      component() {
+        return <FieldColorModeViz mode={mode} theme={theme} />;
+      },
     };
   });
 
diff --git a/packages/grafana-ui/src/components/Select/ButtonSelect.tsx b/packages/grafana-ui/src/components/Select/ButtonSelect.tsx
index 95e95de2070..a20e0a8c6f8 100644
--- a/packages/grafana-ui/src/components/Select/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Select/ButtonSelect.tsx
@@ -54,6 +54,7 @@ const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProps>(
     );
   }
 );
+SelectButton.displayName = 'SelectButton';
 
 export function ButtonSelect<T>({
   placeholder,
@@ -75,6 +76,7 @@ export function ButtonSelect<T>({
   return (
     <SelectBase
       {...selectProps}
+      // eslint-disable-next-line react/display-name
       renderControl={React.forwardRef<any, CustomControlProps<T>>(({ onBlur, onClick, value, isOpen }, ref) => {
         return (
           <SelectButton {...buttonProps} ref={ref} onBlur={onBlur} onClick={onClick} isOpen={isOpen}>
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index cae9329441a..1170dfd9d89 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -237,26 +237,28 @@ export function SelectBase<T>({
           MenuList: SelectMenu,
           Group: SelectOptionGroup,
           ValueContainer,
-          Placeholder: (props: any) => (
-            <div
-              {...props.innerProps}
-              className={cx(
-                css(props.getStyles('placeholder', props)),
-                css`
-                  display: inline-block;
-                  color: ${theme.colors.formInputPlaceholderText};
-                  position: absolute;
-                  top: 50%;
-                  transform: translateY(-50%);
-                  box-sizing: border-box;
-                  line-height: 1;
-                `
-              )}
-            >
-              {props.children}
-            </div>
-          ),
-          IndicatorsContainer: (props: any) => {
+          Placeholder(props: any) {
+            return (
+              <div
+                {...props.innerProps}
+                className={cx(
+                  css(props.getStyles('placeholder', props)),
+                  css`
+                    display: inline-block;
+                    color: ${theme.colors.formInputPlaceholderText};
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    box-sizing: border-box;
+                    line-height: 1;
+                  `
+                )}
+              >
+                {props.children}
+              </div>
+            );
+          },
+          IndicatorsContainer(props: any) {
             const { selectProps } = props;
             const { value, showAllSelectedWhenOpen, maxVisibleValues, menuIsOpen } = selectProps;
 
@@ -278,10 +280,12 @@ export function SelectBase<T>({
 
             return <IndicatorsContainer {...props} />;
           },
-          IndicatorSeparator: () => <></>,
+          IndicatorSeparator() {
+            return <></>;
+          },
           Control: CustomControl,
           Option: SelectMenuOptions,
-          ClearIndicator: (props: any) => {
+          ClearIndicator(props: any) {
             const { clearValue } = props;
             return (
               <Icon
@@ -294,20 +298,22 @@ export function SelectBase<T>({
               />
             );
           },
-          LoadingIndicator: (props: any) => {
+          LoadingIndicator(props: any) {
             return <Spinner inline={true} />;
           },
-          LoadingMessage: (props: any) => {
+          LoadingMessage(props: any) {
             return <div className={styles.loadingMessage}>{loadingMessage}</div>;
           },
-          NoOptionsMessage: (props: any) => {
+          NoOptionsMessage(props: any) {
             return (
               <div className={styles.loadingMessage} aria-label="No options provided">
                 {noOptionsMessage}
               </div>
             );
           },
-          DropdownIndicator: (props: any) => <DropdownIndicator isOpen={props.selectProps.menuIsOpen} />,
+          DropdownIndicator(props: any) {
+            return <DropdownIndicator isOpen={props.selectProps.menuIsOpen} />;
+          },
           SingleValue: SingleValue,
           MultiValueContainer: MultiValueContainer,
           MultiValueRemove: MultiValueRemove,
diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
index be5d70c05ec..a0117b55824 100644
--- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
@@ -65,3 +65,5 @@ export const SelectMenuOptions = React.forwardRef<HTMLDivElement, React.PropsWit
     );
   }
 );
+
+SelectMenuOptions.displayName = 'SelectMenuOptions';
diff --git a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
index 1820e2078cb..aafc1aa1204 100644
--- a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
@@ -40,3 +40,5 @@ export const TabsBar = React.forwardRef<HTMLDivElement, Props>(({ children, clas
     </div>
   );
 });
+
+TabsBar.displayName = 'TabsBar';
diff --git a/packages/grafana-ui/src/components/Tags/Tag.tsx b/packages/grafana-ui/src/components/Tags/Tag.tsx
index 9d18a88565a..106683fbe0e 100644
--- a/packages/grafana-ui/src/components/Tags/Tag.tsx
+++ b/packages/grafana-ui/src/components/Tags/Tag.tsx
@@ -40,6 +40,8 @@ export const Tag = forwardRef<HTMLElement, Props>(({ name, onClick, className, c
   );
 });
 
+Tag.displayName = 'Tag';
+
 const getTagStyles = (theme: GrafanaTheme, name: string, colorIndex?: number) => {
   let colors;
   if (colorIndex === undefined) {
diff --git a/packages/grafana-ui/src/components/Tags/TagList.tsx b/packages/grafana-ui/src/components/Tags/TagList.tsx
index cb3ca0b486d..c4da2fd6424 100644
--- a/packages/grafana-ui/src/components/Tags/TagList.tsx
+++ b/packages/grafana-ui/src/components/Tags/TagList.tsx
@@ -21,6 +21,8 @@ export const TagList: FC<Props> = memo(({ tags, onClick, className }) => {
   );
 });
 
+TagList.displayName = 'TagList';
+
 const getStyles = () => {
   return {
     wrapper: css`
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
index becbd5f2e09..fb0e2991fd7 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
@@ -210,6 +210,8 @@ export const TimePickerButtonLabel = memo<LabelProps>(({ hideText, value, timeZo
   );
 });
 
+TimePickerButtonLabel.displayName = 'TimePickerButtonLabel';
+
 const formattedRange = (value: TimeRange, timeZone?: TimeZone) => {
   const adjustedTimeRange = {
     to: dateMath.isMathString(value.raw.to) ? value.raw.to : value.to,
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
index 0462d6d1c72..796636a6064 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
@@ -231,6 +231,8 @@ export const TimePickerCalendar = memo<Props>(props => {
   );
 });
 
+TimePickerCalendar.displayName = 'TimePickerCalendar';
+
 const Header = memo<Props>(({ onClose }) => {
   const theme = useTheme();
   const styles = getHeaderStyles(theme);
@@ -243,6 +245,8 @@ const Header = memo<Props>(({ onClose }) => {
   );
 });
 
+Header.displayName = 'Header';
+
 const Body = memo<Props>(({ onChange, from, to, timeZone }) => {
   const value = inputToValue(from, to);
   const theme = useTheme();
@@ -265,6 +269,8 @@ const Body = memo<Props>(({ onChange, from, to, timeZone }) => {
   );
 });
 
+Body.displayName = 'Body';
+
 const Footer = memo<Props>(({ onClose, onApply }) => {
   const theme = useTheme();
   const styles = getFooterStyles(theme);
@@ -281,6 +287,8 @@ const Footer = memo<Props>(({ onClose, onApply }) => {
   );
 });
 
+Footer.displayName = 'Footer';
+
 export function inputToValue(from: DateTime, to: DateTime, invalidDateDefault: Date = new Date()): Date[] {
   const fromAsDate = from.toDate();
   const toAsDate = to.toDate();
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
index 4d2d7404584..40a1494d1c6 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
@@ -307,3 +307,5 @@ function mapToHistoryOptions(ranges?: TimeRange[], timeZone?: TimeZone): TimeOpt
   }
   return ranges.slice(ranges.length - 4).map(range => mapRangeToTimeOption(range, timeZone));
 }
+
+EmptyRecentList.displayName = 'EmptyRecentList';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerTitle.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerTitle.tsx
index 2e37a19f2bd..dd89babda94 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerTitle.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerTitle.tsx
@@ -19,3 +19,5 @@ export const TimePickerTitle = memo<PropsWithChildren<{}>>(({ children }) => {
 
   return <span className={styles.text}>{children}</span>;
 });
+
+TimePickerTitle.displayName = 'TimePickerTitle';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx
index 2523e7baff9..726d6dca7ad 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx
@@ -53,3 +53,5 @@ export const TimeRangeOption = memo<Props>(({ value, onSelect, selected = false
     </div>
   );
 });
+
+TimeRangeOption.displayName = 'TimeRangeOption';
diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index 9679f43e35f..3dd1753b1d4 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
@@ -53,3 +53,5 @@ export const Tooltip: FC<TooltipProps> = React.memo(({ children, theme, ...contr
     </PopoverController>
   );
 });
+
+Tooltip.displayName = 'Tooltip';
diff --git a/packages/grafana-ui/src/slate-plugins/suggestions.tsx b/packages/grafana-ui/src/slate-plugins/suggestions.tsx
index 21d18bf4e70..564b2781559 100644
--- a/packages/grafana-ui/src/slate-plugins/suggestions.tsx
+++ b/packages/grafana-ui/src/slate-plugins/suggestions.tsx
@@ -189,7 +189,7 @@ export function SuggestionsPlugin({
       },
     },
 
-    renderEditor: (props, editor, next) => {
+    renderEditor(props, editor, next) {
       if (editor.value.selection.isExpanded) {
         return next();
       }
diff --git a/packages/grafana-ui/src/utils/standardEditors.tsx b/packages/grafana-ui/src/utils/standardEditors.tsx
index 85a2ee12a8a..3288aef7cdb 100644
--- a/packages/grafana-ui/src/utils/standardEditors.tsx
+++ b/packages/grafana-ui/src/utils/standardEditors.tsx
@@ -259,7 +259,9 @@ export const getStandardOptionEditors = () => {
     id: 'boolean',
     name: 'Boolean',
     description: 'Allows boolean values input',
-    editor: props => <Switch {...props} onChange={e => props.onChange(e.currentTarget.checked)} />,
+    editor(props) {
+      return <Switch {...props} onChange={e => props.onChange(e.currentTarget.checked)} />;
+    },
   };
 
   const select: StandardEditorsRegistryItem<any> = {
@@ -273,7 +275,9 @@ export const getStandardOptionEditors = () => {
     id: 'radio',
     name: 'Radio',
     description: 'Allows option selection',
-    editor: props => <RadioButtonGroup {...props} options={props.item.settings?.options} />,
+    editor(props) {
+      return <RadioButtonGroup {...props} options={props.item.settings?.options} />;
+    },
   };
 
   const unit: StandardEditorsRegistryItem<string> = {
@@ -301,7 +305,9 @@ export const getStandardOptionEditors = () => {
     id: 'color',
     name: 'Color',
     description: 'Allows color selection',
-    editor: props => <ColorValueEditor value={props.value} onChange={props.onChange} />,
+    editor(props) {
+      return <ColorValueEditor value={props.value} onChange={props.onChange} />;
+    },
   };
 
   const fieldColor: StandardEditorsRegistryItem<FieldColor> = {
diff --git a/packages/grafana-ui/src/utils/storybook/withTheme.tsx b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
index ad6c55fb6c7..293ee7b8e36 100644
--- a/packages/grafana-ui/src/utils/storybook/withTheme.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
@@ -32,6 +32,7 @@ export const renderComponentWithTheme = (component: React.ComponentType<any>, pr
   );
 };
 
+// eslint-disable-next-line react/display-name
 export const withTheme = (handleSassThemeChange: SassThemeChangeHandler) => (story: RenderFunction) => (
   <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>
 );
diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.tsx b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.tsx
index fe5f7a44ce6..3874d056fae 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.tsx
@@ -68,7 +68,7 @@ export default class SpanGraph extends React.PureComponent<SpanGraphProps, SpanG
     };
   }
 
-  componentWillReceiveProps(nextProps: SpanGraphProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: SpanGraphProps) {
     const { trace } = nextProps;
     if (this.props.trace !== trace) {
       this.setState({
diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx
index 4158af2f43c..1839093f26d 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx
@@ -164,7 +164,7 @@ export const HEADER_ITEMS = [
   {
     key: 'timestamp',
     label: 'Trace Start',
-    renderer: (trace: Trace, styles?: ReturnType<typeof getStyles>) => {
+    renderer(trace: Trace, styles?: ReturnType<typeof getStyles>) {
       const dateStr = formatDatetime(trace.startTime);
       const match = dateStr.match(/^(.+)(:\d\d\.\d+)$/);
       return match ? (
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.test.js
index 5c9a172fcb3..a36b6a7038b 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.test.js
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.test.js
@@ -71,7 +71,9 @@ describe(ReferencesButton, () => {
     // here
     const menuInstance = shallow(
       shallow(dropdown.first().props().overlay).prop('children')({
-        Menu: ({ children }) => <div>{children}</div>,
+        Menu({ children }) {
+          return <div>{children}</div>;
+        },
       })
     );
     const submenuItems = menuInstance.find(UIMenuItem);
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js
index 8b23d30ac99..0a2d198ea76 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js
@@ -112,7 +112,13 @@ describe('<KeyValuesTable>', () => {
     const overlay = shallow(dropdown.prop('overlay'));
     // We have some wrappers here that dynamically inject specific component so we need to traverse a bit
     // here
-    const menu = shallow(overlay.prop('children')({ Menu: ({ children }) => <div>{children}</div> }));
+    const menu = shallow(
+      overlay.prop('children')({
+        Menu({ children }) {
+          return <div>{children}</div>;
+        },
+      })
+    );
     const anchors = menu.find(LinkValue);
     expect(anchors).toHaveLength(2);
     const firstAnchor = anchors.first();
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
index b387dc42aa7..cfe877f4fb3 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
@@ -194,7 +194,7 @@ export default class TimelineViewingLayer extends React.PureComponent<TimelineVi
     this._root = undefined;
   }
 
-  componentWillReceiveProps(nextProps: TimelineViewingLayerProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: TimelineViewingLayerProps) {
     const { boundsInvalidator } = this.props;
     if (boundsInvalidator !== nextProps.boundsInvalidator) {
       this._draggerReframe.resetBounds();
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx
index fe16c3de7c0..8b5a549a3c0 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx
@@ -189,7 +189,7 @@ export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTra
     return false;
   }
 
-  componentWillUpdate(nextProps: VirtualizedTraceViewProps) {
+  UNSAFE_componentWillUpdate(nextProps: VirtualizedTraceViewProps) {
     const { childrenHiddenIDs, detailStates, registerAccessors, trace, currentViewRangeTime } = this.props;
     const {
       currentViewRangeTime: nextViewRangeTime,
diff --git a/public/app/core/components/Footer/Footer.tsx b/public/app/core/components/Footer/Footer.tsx
index 15f93ac4454..a6d3bc0ec93 100644
--- a/public/app/core/components/Footer/Footer.tsx
+++ b/public/app/core/components/Footer/Footer.tsx
@@ -84,3 +84,5 @@ export const Footer: FC = React.memo(() => {
     </footer>
   );
 });
+
+Footer.displayName = 'Footer';
diff --git a/public/app/core/components/PermissionList/PermissionsInfo.tsx b/public/app/core/components/PermissionList/PermissionsInfo.tsx
index 91bbee65ac3..7920b955291 100644
--- a/public/app/core/components/PermissionList/PermissionsInfo.tsx
+++ b/public/app/core/components/PermissionList/PermissionsInfo.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default () => (
+const PermissionsInfo = () => (
   <div>
     <h5>What are Permissions?</h5>
     <p>
@@ -9,3 +9,5 @@ export default () => (
     </p>
   </div>
 );
+
+export default PermissionsInfo;
diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx
index 66072475c78..60ea0e6953a 100644
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/public/app/core/components/TagFilter/TagFilter.tsx
@@ -79,7 +79,7 @@ export const TagFilter: FC<Props> = ({
       MultiValueLabel: (): any => {
         return null; // We want the whole tag to be clickable so we use MultiValueRemove instead
       },
-      MultiValueRemove: (props: any) => {
+      MultiValueRemove(props: any) {
         const { data } = props;
 
         return (
diff --git a/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/BasicMatcherEditor.tsx b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/BasicMatcherEditor.tsx
index 6ecf2135374..8294c257014 100644
--- a/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/BasicMatcherEditor.tsx
+++ b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/BasicMatcherEditor.tsx
@@ -7,7 +7,7 @@ import { convertToType } from './utils';
 export function basicMatcherEditor<T = any>(
   config: ValueMatcherEditorConfig
 ): React.FC<ValueMatcherUIProps<BasicValueMatcherOptions<T>>> {
-  return ({ options, onChange, field }) => {
+  return function render({ options, onChange, field }) {
     const { validator, converter = convertToType } = config;
     const { value } = options;
     const [isInvalid, setInvalid] = useState(!validator(value));
diff --git a/public/app/core/utils/UserProvider.tsx b/public/app/core/utils/UserProvider.tsx
index adc88c50773..2a0575e164b 100644
--- a/public/app/core/utils/UserProvider.tsx
+++ b/public/app/core/utils/UserProvider.tsx
@@ -73,7 +73,7 @@ export class UserProvider extends PureComponent<Props, State> {
     },
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (this.props.userId) {
       this.loadUser();
     }
diff --git a/public/app/core/utils/connectWithReduxStore.tsx b/public/app/core/utils/connectWithReduxStore.tsx
index cff598d3a10..c7dc4591b9b 100644
--- a/public/app/core/utils/connectWithReduxStore.tsx
+++ b/public/app/core/utils/connectWithReduxStore.tsx
@@ -5,6 +5,7 @@ import { store } from '../../store/store';
 export function connectWithStore(WrappedComponent: any, ...args: any[]) {
   const ConnectedWrappedComponent = (connect as any)(...args)(WrappedComponent);
 
+  // eslint-disable-next-line react/display-name
   return (props: any) => {
     return <ConnectedWrappedComponent {...props} store={store} />;
   };
@@ -12,6 +13,8 @@ export function connectWithStore(WrappedComponent: any, ...args: any[]) {
 
 export function connectWithProvider(WrappedComponent: any, ...args: any[]) {
   const ConnectedWrappedComponent = (connect as any)(...args)(WrappedComponent);
+
+  // eslint-disable-next-line react/display-name
   return (props: any) => {
     return (
       <Provider store={store}>
diff --git a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
index 846062db360..39f51130290 100644
--- a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
@@ -30,6 +30,7 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
   }
   let editor;
 
+  // eslint-disable-next-line react/display-name
   const renderLabel = (includeDescription = true, includeCounter = false) => (isExpanded = false) => (
     <HorizontalGroup justify="space-between">
       <Label description={includeDescription ? item.description : undefined}>
diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx
index e5b28f98ffc..7bd473ffcf6 100644
--- a/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx
@@ -87,6 +87,9 @@ export const VisualizationTabUnconnected = React.forwardRef<HTMLInputElement, Pr
     );
   }
 );
+
+VisualizationTabUnconnected.displayName = 'VisualizationTabUnconnected';
+
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     icon: css`
diff --git a/public/app/features/explore/JSONViewer.tsx b/public/app/features/explore/JSONViewer.tsx
index d185babfa6a..58e4b485f4f 100644
--- a/public/app/features/explore/JSONViewer.tsx
+++ b/public/app/features/explore/JSONViewer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function({ value }: any) {
+export default function JSONViewer({ value }: any) {
   return (
     <div>
       <pre>{JSON.stringify(value, undefined, 2)}</pre>
diff --git a/public/app/features/explore/ResponsiveButton.tsx b/public/app/features/explore/ResponsiveButton.tsx
index 16b628808d1..86c721c2ec1 100644
--- a/public/app/features/explore/ResponsiveButton.tsx
+++ b/public/app/features/explore/ResponsiveButton.tsx
@@ -54,3 +54,5 @@ export const ResponsiveButton = forwardRef<HTMLButtonElement, Props>((props, ref
     </div>
   );
 });
+
+ResponsiveButton.displayName = 'ResponsiveButton';
diff --git a/public/app/features/explore/TraceView/uiElements.tsx b/public/app/features/explore/TraceView/uiElements.tsx
index d2ac0750723..4297994bf87 100644
--- a/public/app/features/explore/TraceView/uiElements.tsx
+++ b/public/app/features/explore/TraceView/uiElements.tsx
@@ -18,18 +18,24 @@ export const UIElements: Elements = {
   Dropdown: (() => null as any) as any,
   Menu: (() => null as any) as any,
   MenuItem: (() => null as any) as any,
-  Button: ({ onClick, children, className }: ButtonProps) => (
-    <Button variant={'secondary'} onClick={onClick} className={className}>
-      {children}
-    </Button>
-  ),
+  Button({ onClick, children, className }: ButtonProps) {
+    return (
+      <Button variant={'secondary'} onClick={onClick} className={className}>
+        {children}
+      </Button>
+    );
+  },
   Divider,
-  Input: props => <Input {...props} />,
-  InputGroup: ({ children, className, style }) => (
-    <span className={className} style={style}>
-      {children}
-    </span>
-  ),
+  Input(props) {
+    return <Input {...props} />;
+  },
+  InputGroup({ children, className, style }) {
+    return (
+      <span className={className} style={style}>
+        {children}
+      </span>
+    );
+  },
 };
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
diff --git a/public/app/features/explore/Wrapper.test.tsx b/public/app/features/explore/Wrapper.test.tsx
index 34a26ec7dfd..104b5c0974d 100644
--- a/public/app/features/explore/Wrapper.test.tsx
+++ b/public/app/features/explore/Wrapper.test.tsx
@@ -28,7 +28,9 @@ type Mock = jest.Mock;
 jest.mock('react-virtualized-auto-sizer', () => {
   return {
     __esModule: true,
-    default: (props: any) => <div>{props.children({ width: 1000 })}</div>,
+    default(props: any) {
+      return <div>{props.children({ width: 1000 })}</div>;
+    },
   };
 });
 
@@ -273,11 +275,13 @@ function makeDatasourceSetup({ name = 'loki', id = 1 }: { name?: string; id?: nu
     },
     api: {
       components: {
-        QueryEditor: (props: QueryEditorProps<LokiDatasource, LokiQuery>) => (
-          <div>
-            {name} Editor input: {props.query.expr}
-          </div>
-        ),
+        QueryEditor(props: QueryEditorProps<LokiDatasource, LokiQuery>) {
+          return (
+            <div>
+              {name} Editor input: {props.query.expr}
+            </div>
+          );
+        },
       },
       name: name,
       query: jest.fn(),
diff --git a/public/app/features/search/components/DashboardListPage.tsx b/public/app/features/search/components/DashboardListPage.tsx
index 78fff6e26d6..742859d3755 100644
--- a/public/app/features/search/components/DashboardListPage.tsx
+++ b/public/app/features/search/components/DashboardListPage.tsx
@@ -41,6 +41,7 @@ export const DashboardListPage: FC<Props> = memo(({ navModel, uid, url }) => {
     </Page>
   );
 });
+DashboardListPage.displayName = 'DashboardListPage';
 
 const mapStateToProps: MapStateToProps<Props, {}, StoreState> = state => {
   return {
diff --git a/public/app/features/search/components/DashboardSearch.tsx b/public/app/features/search/components/DashboardSearch.tsx
index ca7aeb50bcb..ed92d860ec0 100644
--- a/public/app/features/search/components/DashboardSearch.tsx
+++ b/public/app/features/search/components/DashboardSearch.tsx
@@ -57,6 +57,7 @@ export const DashboardSearch: FC<Props> = memo(({ onCloseSearch, params, updateL
     </div>
   );
 });
+DashboardSearch.displayName = 'DashboardSearch';
 
 export default connectWithRouteParams(DashboardSearch);
 
diff --git a/public/app/features/search/components/SearchCheckbox.tsx b/public/app/features/search/components/SearchCheckbox.tsx
index 205fa66bcaf..1877ac9d2d5 100644
--- a/public/app/features/search/components/SearchCheckbox.tsx
+++ b/public/app/features/search/components/SearchCheckbox.tsx
@@ -28,3 +28,5 @@ const getStyles = stylesFactory(() => ({
     }
   `,
 }));
+
+SearchCheckbox.displayName = 'SearchCheckbox';
diff --git a/public/app/features/search/components/SearchWrapper.tsx b/public/app/features/search/components/SearchWrapper.tsx
index 1cab70f02a0..d69d43ee887 100644
--- a/public/app/features/search/components/SearchWrapper.tsx
+++ b/public/app/features/search/components/SearchWrapper.tsx
@@ -40,6 +40,8 @@ export const SearchWrapper: FC<Props> = memo(({ search, folder, updateLocation }
   return isOpen ? <DashboardSearch onCloseSearch={closeSearch} folder={folder} /> : null;
 });
 
+SearchWrapper.displayName = 'SearchWrapper';
+
 const mapStateToProps: MapStateToProps<{}, OwnProps, StoreState> = (state: StoreState) => {
   const { search, folder } = getLocationQuery(state.location);
   return { search, folder };
diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
index 631f895ccb9..cccf6538e73 100644
--- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Render should render component 1`] = `
     >
       External group sync
     </h3>
-    <Memo()
+    <Tooltip
       content="Sync LDAP or OAuth groups with your Grafana teams."
       placement="auto"
     >
@@ -18,7 +18,7 @@ exports[`Render should render component 1`] = `
         className="icon--has-hover page-sub-heading-icon"
         name="question-circle"
       />
-    </Memo()>
+    </Tooltip>
     <div
       className="page-action-bar__spacer"
     />
@@ -92,7 +92,7 @@ exports[`Render should render groups table 1`] = `
     >
       External group sync
     </h3>
-    <Memo()
+    <Tooltip
       content="Sync LDAP or OAuth groups with your Grafana teams."
       placement="auto"
     >
@@ -100,7 +100,7 @@ exports[`Render should render groups table 1`] = `
         className="icon--has-hover page-sub-heading-icon"
         name="question-circle"
       />
-    </Memo()>
+    </Tooltip>
     <div
       className="page-action-bar__spacer"
     />
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Aggregations.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Aggregations.test.tsx
index d8e2172fa23..a6a9d1ad85d 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Aggregations.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Aggregations.test.tsx
@@ -16,7 +16,9 @@ const props: Props = {
   } as any,
   crossSeriesReducer: '',
   groupBys: [],
-  children: renderProps => <div />,
+  children(renderProps) {
+    return <div />;
+  },
   templateVariableOptions: [],
 };
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
index 278d7bb46f0..4cbc38753c1 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
@@ -42,8 +42,8 @@ const DefaultTarget: State = {
 export class AnnotationQueryEditor extends React.Component<Props, State> {
   state: State = DefaultTarget;
 
-  async UNSAFE_componentWillMount() {
-    // Unfortunately, migrations like this need to go componentWillMount. As soon as there's
+  async UNSAFE_UNSAFE_componentWillMount() {
+    // Unfortunately, migrations like this need to go UNSAFE_componentWillMount. As soon as there's
     // migration hook for this module.ts, we can do the migrations there instead.
     const { target, datasource } = this.props;
     if (!target.projectName) {
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
index c595749a435..4317778fa4e 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
@@ -18,10 +18,10 @@ interface State {
 export class QueryEditor extends PureComponent<Props, State> {
   state: State = { lastQueryError: '' };
 
-  async UNSAFE_componentWillMount() {
+  async UNSAFE_UNSAFE_componentWillMount() {
     const { datasource, query } = this.props;
 
-    // Unfortunately, migrations like this need to go componentWillMount. As soon as there's
+    // Unfortunately, migrations like this need to go UNSAFE_componentWillMount. As soon as there's
     // migration hook for this module.ts, we can do the migrations there instead.
     if (!this.props.query.hasOwnProperty('metricQuery')) {
       const { hide, refId, datasource, key, queryType, maxLines, metric, ...metricQuery } = this.props.query as any;
diff --git a/public/app/plugins/datasource/graphite/FunctionEditor.tsx b/public/app/plugins/datasource/graphite/FunctionEditor.tsx
index 1c07341f0d4..d178904640a 100644
--- a/public/app/plugins/datasource/graphite/FunctionEditor.tsx
+++ b/public/app/plugins/datasource/graphite/FunctionEditor.tsx
@@ -13,9 +13,9 @@ const FunctionDescription = React.lazy(async () => {
   // @ts-ignore
   const { default: rst2html } = await import(/* webpackChunkName: "rst2html" */ 'rst2html');
   return {
-    default: (props: { description?: string }) => (
-      <div dangerouslySetInnerHTML={{ __html: rst2html(props.description ?? '') }} />
-    ),
+    default(props: { description?: string }) {
+      return <div dangerouslySetInnerHTML={{ __html: rst2html(props.description ?? '') }} />;
+    },
   };
 });
 
diff --git a/public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx b/public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx
index 8c1479f5b2c..8366fae3049 100644
--- a/public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx
+++ b/public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx
@@ -8,7 +8,7 @@ const CHEAT_SHEET_ITEMS = [
   },
 ];
 
-export default (props: any) => (
+const InfluxCheatSheet = (props: any) => (
   <div>
     <h2>InfluxDB Cheat Sheet</h2>
     {CHEAT_SHEET_ITEMS.map(item => (
@@ -19,3 +19,5 @@ export default (props: any) => (
     ))}
   </div>
 );
+
+export default InfluxCheatSheet;
diff --git a/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx b/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
index a38f0540d30..c114405e8bf 100644
--- a/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
@@ -25,7 +25,7 @@ const CHEAT_SHEET_ITEMS = [
   },
 ];
 
-export default (props: ExploreStartPageProps) => (
+const PromCheatSheet = (props: ExploreStartPageProps) => (
   <div>
     <h2>PromQL Cheat Sheet</h2>
     {CHEAT_SHEET_ITEMS.map((item, index) => (
@@ -44,3 +44,5 @@ export default (props: ExploreStartPageProps) => (
     ))}
   </div>
 );
+
+export default PromCheatSheet;
diff --git a/public/app/plugins/panel/annolist/module.tsx b/public/app/plugins/panel/annolist/module.tsx
index ed6fcbb5f73..451dab488d3 100644
--- a/public/app/plugins/panel/annolist/module.tsx
+++ b/public/app/plugins/panel/annolist/module.tsx
@@ -60,7 +60,7 @@ export const plugin = new PanelPlugin<AnnoOptions>(AnnoListPanel)
         path: 'tags',
         name: 'Tags',
         description: '',
-        editor: props => {
+        editor(props) {
           return <TagsInput tags={props.value} onChange={props.onChange} />;
         },
       })
diff --git a/public/app/plugins/panel/dashlist/module.tsx b/public/app/plugins/panel/dashlist/module.tsx
index c70e2f2ca51..98f5505450f 100644
--- a/public/app/plugins/panel/dashlist/module.tsx
+++ b/public/app/plugins/panel/dashlist/module.tsx
@@ -44,7 +44,7 @@ export const plugin = new PanelPlugin<DashListOptions>(DashList)
         name: 'Folder',
         id: 'folderId',
         defaultValue: null,
-        editor: props => {
+        editor: function RenderFolderPicker(props) {
           return <FolderPicker initialTitle="All" enableReset={true} onChange={({ id }) => props.onChange(id)} />;
         },
       })
@@ -54,7 +54,7 @@ export const plugin = new PanelPlugin<DashListOptions>(DashList)
         name: 'Tags',
         description: '',
         defaultValue: [],
-        editor: props => {
+        editor(props) {
           return <TagsInput tags={props.value} onChange={props.onChange} />;
         },
       });
diff --git a/public/app/routes/ReactContainer.tsx b/public/app/routes/ReactContainer.tsx
index 75dc116551f..bf215a1f707 100644
--- a/public/app/routes/ReactContainer.tsx
+++ b/public/app/routes/ReactContainer.tsx
@@ -22,6 +22,7 @@ export function WrapInProvider(store: any, Component: any, props: any) {
 }
 
 export const provideModalsContext = (component: any) => {
+  // eslint-disable-next-line react/display-name
   return (props: any) => (
     <ModalsProvider>
       <>