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,34 +25,38 @@ export default function Selected() {
   )
 }
 
-export const ShapeOutline = memo(
+export const ShapeOutline = memo(function ShapeOutline({
-  ({ id, isSelected }: { id: string; isSelected: boolean }) => {
+  id,
-    const rIndicator = useRef<SVGUseElement>(null)
+  isSelected,
+}: {
+  id: string
+  isSelected: boolean
+}) {
+  const rIndicator = useRef<SVGUseElement>(null)
 
-    const shape = useSelector(({ data }) => getPage(data).shapes[id])
+  const shape = useSelector(({ data }) => getPage(data).shapes[id])
 
-    const events = useShapeEvents(id, rIndicator)
+  const events = useShapeEvents(id, rIndicator)
 
-    if (!shape) return null
+  if (!shape) return null
 
-    const transform = `
+  const transform = `
     rotate(${shape.rotation * (180 / Math.PI)},
     ${getShapeUtils(shape).getCenter(shape)})
     translate(${shape.point})
   `
 
-    return (
+  return (
-      <SelectIndicator
+    <SelectIndicator
-        ref={rIndicator}
+      ref={rIndicator}
-        as="use"
+      as="use"
-        href={'#' + id}
+      href={'#' + id}
-        transform={transform}
+      transform={transform}
-        isLocked={shape.isLocked}
+      isLocked={shape.isLocked}
-        {...events}
+      {...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(
+const RealShape = memo(function RealShape({
-  ({ id, style }: { id: string; style: ReturnType<typeof getShapeStyle> }) => {
+  id,
-    return <StyledShape as="use" href={'#' + id} {...style} />
+  style,
-  }
+}: {
-)
+  id: string
+  style: ReturnType<typeof getShapeStyle>
+}) {
+  return <StyledShape as="use" href={'#' + id} {...style} />
+})
 
 const StyledShape = styled('path', {
   strokeLinecap: 'round',