memoize components

src/components/Canvas/Decorations/Building.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Group, Rect, Text } from 'react-konva';
 
 import { Decoration } from '~/zustand/useDecorations';
@@ -6,7 +7,7 @@ interface BuildingProps {
   building: Decoration;
 }
 
-export function Building(props: BuildingProps) {
+function BuildingComponent(props: BuildingProps) {
   const { x, y } = props.building;
 
   // Squares!
@@ -41,3 +42,5 @@ export function Building(props: BuildingProps) {
     </Group>
   );
 }
+
+export const Building = React.memo(BuildingComponent);

src/components/Canvas/Decorations/Tree.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Circle, Group } from 'react-konva';
 
 import seedrandom from 'seedrandom';
@@ -19,7 +20,7 @@ interface TreeProps {
   tree: Decoration;
 }
 
-export function Tree(props: TreeProps) {
+function TreeComponent(props: TreeProps) {
   const rng = seedrandom(props.tree.seed);
 
   const leaves = Array.from({ length: 50 }).map(() => ({
@@ -41,3 +42,5 @@ export function Tree(props: TreeProps) {
     </Group>
   );
 }
+
+export const Tree = React.memo(TreeComponent);

src/components/Canvas/Intersection.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+import React from 'react';
 import { Circle, Group } from 'react-konva';
 
 import { KonvaEventObject } from 'konva/lib/Node';
@@ -19,7 +20,7 @@ interface IntersectionProps {
   node: Node;
 }
 
-export function Intersection({ node }: IntersectionProps) {
+function IntersectionComponent({ node }: IntersectionProps) {
   const network = useNetworkStore();
   const selector = useSelector();
   const toolbarState = useToolbarStore();
@@ -127,3 +128,5 @@ export function Intersection({ node }: IntersectionProps) {
     </Group>
   );
 }
+
+export const Intersection = React.memo(IntersectionComponent);

src/components/Canvas/Road.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useState } from 'react';
 import { Arrow, Group } from 'react-konva';
 
@@ -16,7 +17,7 @@ interface RoadProps {
   offset?: number;
 }
 
-export function Road({ edge, offset = 0 }: RoadProps) {
+function RoadComponent({ edge, offset = 0 }: RoadProps) {
   const network = useNetworkStore();
   const selector = useSelector();
 
@@ -146,3 +147,5 @@ export function Road({ edge, offset = 0 }: RoadProps) {
     </Group>
   );
 }
+
+export const Road = React.memo(RoadComponent);