diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index b76ce8a7d6..cafe9b703b 100644
--- a/src/backend/renderer.js
+++ b/src/backend/renderer.js
@@ -462,7 +462,7 @@ export function attach(
const functionName = getDisplayName(resolvedType.render, '');
return (
resolvedType.displayName ||
- (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef')
+ (functionName !== '' ? functionName : 'ForwardRef')
);
case HostRoot:
return null;
@@ -478,7 +478,7 @@ export function attach(
return elementType.displayName;
} else {
const displayName = type.displayName || type.name;
- return displayName ? `Memo(${displayName})` : 'Memo';
+ return displayName ? displayName : 'Memo';
}
default:
const typeSymbol = getTypeSymbol(type);
diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index da7a214de5..ed1176739e 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -73,3 +73,13 @@
height: 1rem;
color: var(--color-expand-collapse-toggle);
}
+
+.Badge{
+ background: var(--color-component-name);
+ color: #000;
+ line-height: calc(var(--line-height-data) - 0.25rem);
+ padding: 0 0.55rem;
+ border-radius: 5px;
+ margin-left: 0.5rem;
+ font-size: calc(var(--font-size-monospace-normal) - 2px);
+}
\ No newline at end of file
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 79b015e85c..0f3bb34a7a 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -9,7 +9,12 @@ import React, {
useRef,
useState,
} from 'react';
-import { ElementTypeClass, ElementTypeFunction } from 'src/types';
+import {
+ ElementTypeClass,
+ ElementTypeFunction,
+ ElementTypeMemo,
+ ElementTypeForwardRef,
+} from 'src/types';
import Store from 'src/devtools/store';
import ButtonIcon from '../ButtonIcon';
import { createRegExp } from '../utils';
@@ -134,6 +139,7 @@ export default function ElementView({ data, index, style }: Props) {
const showDollarR =
isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
+ const showBadge = type === ElementTypeMemo || type === ElementTypeForwardRef;
let className = styles.Element;
if (isSelected) {
@@ -182,6 +188,11 @@ export default function ElementView({ data, index, style }: Props) {
{showDollarR && == $r}
+ {showBadge && (
+
+ {type === ElementTypeMemo ? 'Memo' : 'ForwardRef'}
+
+ )}
);
}