Fix maximum cycle depth exceeded error

components/InputTableField/index.tsx

@@ -8,7 +8,7 @@ interface Props {
   name: string
   label: string
   description?: string
-  value?: number
+  value: number
   className?: string
   imageAlt?: string
   imageClass?: string
@@ -20,8 +20,7 @@ const InputTableField = (props: Props) => {
   const [value, setValue] = useState(0)
 
   useEffect(() => {
-    if (props.value !== undefined && props.value !== value)
-      setValue(props.value)
+    if (props.value) setValue(props.value)
   }, [props.value])
 
   useEffect(() => {

components/SliderTableField/index.tsx

@@ -21,7 +21,7 @@ interface Props {
 }
 
 const SliderTableField = (props: Props) => {
-  const [value, setValue] = useState(0)
+  const [value, setValue] = useState(props.value)
 
   useEffect(() => {
     if (props.value !== undefined && props.value !== value)
@@ -29,17 +29,21 @@ const SliderTableField = (props: Props) => {
   }, [props.value])
 
   useEffect(() => {
-    props.onValueChange(value)
+    if (value !== props.value) props.onValueChange(value)
   }, [value])
 
-  function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue(parseInt(event.currentTarget?.value))
+  function handleValueCommit(value: number[]) {
+    setValue(value[0])
   }
 
-  function onValueChange(value: number[]) {
+  function handleValueChange(value: number[]) {
     setValue(value[0])
   }
 
+  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setValue(parseInt(event.currentTarget?.value))
+  }
+
   return (
     <TableField
       name={props.name}
@@ -55,7 +59,8 @@ const SliderTableField = (props: Props) => {
         max={props.max}
         step={props.step}
         value={[value]}
-        onValueChange={onValueChange}
+        onValueChange={handleValueChange}
+        onValueCommit={handleValueCommit}
       />
       <Input
         className="Bound"
@@ -64,7 +69,7 @@ const SliderTableField = (props: Props) => {
         min={props.min}
         max={props.max}
         step={props.step}
-        onChange={onInputChange}
+        onChange={handleInputChange}
       />
     </TableField>
   )