ColorInput.tsx.diff

@@ -1,5 +1,5 @@
 export const ColorInput = () => {
-  const { hex, setHex, setRgba } = useContext(ColorToolContext);
+  const { hex, dispatch } = useContext(ColorToolContext);
   const input = useRef(null);

   const [show, setShow] = useState(true);
@@ -13,8 +13,7 @@ export const ColorInput = () => {
   }, []);

   const onChange = ({ target: { value } }) => {
-    setHex(value);
-    setRgba(value);
+    dispatch({ type: 'UPDATE_HEX', payload: value })
   };

   return show ? (

HexInput.tsx.diff

@@ -2,10 +2,9 @@ import React, { useContext } from 'react';
 import { ColorToolContext } from '~/ColorToolAppContext';

 export const HexInput = () => {
-  const { hex, setHex, setRgba } = useContext(ColorToolContext);
+  const { hex, dispatch } = useContext(ColorToolContext);
   const onChange = ({ target: { value } }) => {
-    setHex(value);
-    setRgba(value);
+    dispatch({ type: 'UPDATE_HEX', payload: value })
   };

   return (

RgbaInput.tsx.diff

@@ -1,18 +1,20 @@ import React, { useContext, useRef } from 'react';
 import { ColorToolContext } from '~/ColorToolAppContext';

 export const RgbaInput = () => {
   const inputs = [useRef(null), useRef(null), useRef(null), useRef(null)];
+  const { rgba, dispatch } = useContext(ColorToolContext);
   const onChange = () => {
     const colorValues = inputs.map(({ current: { value } }) => value);

-    setRgba(colorValues);
+    dispatch({ type: 'UPDATE_RGBA', payload: colorValues });
   };