perf improvements around selected / hovered shapes

components/canvas/page.tsx

@@ -1,5 +1,6 @@
 import { useSelector } from 'state'
 import Shape from './shape'
+import HoveredShape from './hovered-shape'
 import usePageShapes from 'hooks/usePageShapes'
 
 /* 
@@ -8,22 +9,22 @@ on the current page. Kind of expensive but only happens
 here; and still cheaper than any other pattern I've found.
 */
 
-const noOffset = [0, 0]
-
 export default function Page(): JSX.Element {
-  const currentPageShapeIds = usePageShapes()
-
   const isSelecting = useSelector((s) => s.isIn('selecting'))
 
+  const visiblePageShapeIds = usePageShapes()
+
+  const hoveredShapeId = useSelector((s) => {
+    return visiblePageShapeIds.find((id) => id === s.data.hoveredId)
+  })
+
   return (
     <g pointerEvents={isSelecting ? 'all' : 'none'}>
-      {currentPageShapeIds.map((shapeId) => (
-        <Shape
-          key={shapeId}
-          id={shapeId}
-          isSelecting={isSelecting}
-          parentPoint={noOffset}
-        />
+      {isSelecting && hoveredShapeId && (
+        <HoveredShape key={hoveredShapeId} id={hoveredShapeId} />
+      )}
+      {visiblePageShapeIds.map((id) => (
+        <Shape key={id} id={id} isSelecting={isSelecting} />
       ))}
     </g>
   )