names memoized components

components/canvas/defs.tsx

@@ -24,7 +24,7 @@ export default function Defs() {
   )
 }
 
-const Def = memo(({ id }: { id: string }) => {
+const Def = memo(function Def({ id }: { id: string }) {
   const shape = useSelector(({ data }) => getPage(data).shapes[id])
   if (!shape) return null
   return getShapeUtils(shape).render(shape)

components/canvas/selected.tsx

@@ -25,8 +25,13 @@ export default function Selected() {
   )
 }
 
-export const ShapeOutline = memo(
-  ({ id, isSelected }: { id: string; isSelected: boolean }) => {
+export const ShapeOutline = memo(function ShapeOutline({
+  id,
+  isSelected,
+}: {
+  id: string
+  isSelected: boolean
+}) {
   const rIndicator = useRef<SVGUseElement>(null)
 
   const shape = useSelector(({ data }) => getPage(data).shapes[id])
@@ -51,8 +56,7 @@ export const ShapeOutline = memo(
       {...events}
     />
   )
-  }
-)
+})
 
 const SelectIndicator = styled('path', {
   zStrokeWidth: 3,

components/canvas/shape.tsx

@@ -47,11 +47,15 @@ function Shape({ id, isSelecting }: { id: string; isSelecting: boolean }) {
   )
 }
 
-const RealShape = memo(
-  ({ id, style }: { id: string; style: ReturnType<typeof getShapeStyle> }) => {
+const RealShape = memo(function RealShape({
+  id,
+  style,
+}: {
+  id: string
+  style: ReturnType<typeof getShapeStyle>
+}) {
   return <StyledShape as="use" href={'#' + id} {...style} />
-  }
-)
+})
 
 const StyledShape = styled('path', {
   strokeLinecap: 'round',