From 9db8a2a048de1de2e5ec8d0341127b402735bc3f Mon Sep 17 00:00:00 2001
From: Taz17 <mutaz.ashhab@gmail.com>
Date: Mon, 16 Oct 2023 09:00:09 +1100
Subject: [PATCH] memoize components

---
 src/components/Canvas/Decorations/Building.tsx | 5 ++++-
 src/components/Canvas/Decorations/Tree.tsx     | 5 ++++-
 src/components/Canvas/Intersection.tsx         | 5 ++++-
 src/components/Canvas/Road.tsx                 | 5 ++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/Canvas/Decorations/Building.tsx b/src/components/Canvas/Decorations/Building.tsx
index 21f4b7f..5154c52 100644
--- a/src/components/Canvas/Decorations/Building.tsx
+++ b/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);
diff --git a/src/components/Canvas/Decorations/Tree.tsx b/src/components/Canvas/Decorations/Tree.tsx
index 238ea90..c4ca1d0 100644
--- a/src/components/Canvas/Decorations/Tree.tsx
+++ b/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);
diff --git a/src/components/Canvas/Intersection.tsx b/src/components/Canvas/Intersection.tsx
index ec0d1f6..353e26f 100644
--- a/src/components/Canvas/Intersection.tsx
+++ b/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);
diff --git a/src/components/Canvas/Road.tsx b/src/components/Canvas/Road.tsx
index ff704c3..b8b0747 100644
--- a/src/components/Canvas/Road.tsx
+++ b/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);