fix(colorpicker): prevent infinite rerender in React v18 Legacy mode (#1616)

Author: tgohn

packages/colorpickers/.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 55191,
-    "minified": 36328,
-    "gzipped": 8532
+    "bundled": 55237,
+    "minified": 36325,
+    "gzipped": 8535
   },
   "index.esm.js": {
-    "bundled": 51333,
-    "minified": 32705,
-    "gzipped": 8268,
+    "bundled": 51385,
+    "minified": 32708,
+    "gzipped": 8271,
     "treeshaked": {
       "rollup": {
-        "code": 26681,
+        "code": 26692,
         "import_statements": 1005
       },
       "webpack": {
-        "code": 28822
+        "code": 28819
       }
     }
   }

packages/colorpickers/src/elements/Colorpicker/index.tsx

@@ -53,6 +53,10 @@ export const Colorpicker = forwardRef<HTMLDivElement, IColorpickerProps>(
         retVal.alpha = 100;
       }
 
+      if (areColorsEqual(retVal, previousComputedColorRef.current)) {
+        return previousComputedColorRef.current;
+      }
+
       return retVal;
     }, [color, isOpaque, state.color]);
 
@@ -67,13 +71,11 @@ export const Colorpicker = forwardRef<HTMLDivElement, IColorpickerProps>(
       previousStateColorRef.current = state.color;
     }, [color, onChange, state.color]);
 
-    useEffect(() => {
-      if (!areColorsEqual(computedColor, previousComputedColorRef.current)) {
-        dispatch({ type: 'RESET_COLOR', payload: computedColor });
-      }
+    if (previousComputedColorRef.current !== computedColor) {
+      dispatch({ type: 'RESET_COLOR', payload: computedColor });
 
       previousComputedColorRef.current = computedColor;
-    }, [computedColor]);
+    }
 
     const handleColorWellChange = useCallback((hsv: IHSVColor) => {
       dispatch({