From 49600dd0ce962a9a5560f715871bd22ebb7373c0 Mon Sep 17 00:00:00 2001
From: unknown <online7890@gmail.com>
Date: Thu, 9 Sep 2021 16:05:38 +0300
Subject: [PATCH] #20 fixed a lot of unnecesary renders caused performance
 issue

---
 src/components/Saturation.component.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/Saturation.component.tsx b/src/components/Saturation.component.tsx
index 4109a8d..e4a03f3 100644
--- a/src/components/Saturation.component.tsx
+++ b/src/components/Saturation.component.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { SaturationProps } from "../interfaces/Saturation.interface";
 import { getColorCoordinates } from "../utils/coordinates.util";
 import { toColor } from "../utils/toColor.util";
@@ -11,9 +11,18 @@ export const Saturation = ({ width, height, color, onChange }: SaturationProps):
     return { x, y };
   }, [color, width, height]);
 
-  const updateColor = (x: number, y: number): void => {
-    onChange(toColor("hsv", { ...color.hsv, s: (x / width) * 100, v: 100 - (y / height) * 100 }));
-  };
+  const colorRef = useRef(color);
+
+  const updateColor = useCallback(
+    (x: number, y: number): void => {
+      onChange(toColor("hsv", { ...colorRef.current.hsv, s: (x / width) * 100, v: 100 - (y / height) * 100 }));
+    },
+    [onChange, width, height]
+  );
+
+  useEffect(() => {
+    colorRef.current = color;
+  }, [color]);
 
   return (
     <Interactive