Fixed fieldset rerender issue

Author: cblanquera

docs/bundle.js

@@ -1,6 +1,6 @@
 {
   "name": "frui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "license": "MIT",
   "description": "A collection of vanilla react and tailwind components written in typescript.",
   "author": "Chris <chris@incept.asia>",

package.json

@@ -1,6 +1,6 @@
 import type { FieldsetConfig } from '../types';
 //hooks
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 export default function useFieldset<ValueType = any>(
   config: FieldsetConfig<ValueType>
@@ -17,35 +17,25 @@ export default function useFieldset<ValueType = any>(
   const safeValues: (ValueType|undefined)[] = Array.isArray(value) ? value : [];
   //hooks
   const [ values, setValues ] = useState(safeValues);
-  const [ changed, changeValues ] = useState<(ValueType|undefined)[]>();
   //handlers
   const handlers = {
-    set: (values: (ValueType|undefined)[]) => {
-      //set values
-      setValues(values);
-      //serialize the old change value and the new value
-      const serial1 = changed 
-        ? JSON.stringify(changed.filter(Boolean))
-        : undefined;
-      const serial2 = JSON.stringify(values.filter(Boolean));
+    set: (newValues: (ValueType|undefined)[]) => {
+      //serialize the new value
+      const serial = JSON.stringify(newValues);
       //if the values are different, update the change value
-      if (serial1 !== serial2) {
-        changeValues(values);
+      if (serial !== JSON.stringify(values)) {
+        const final = JSON
+          .parse(serial)
+          .map((value: any) => value === null ? undefined : value);
+        const clean = final
+          .filter((value: any) => typeof value !== 'undefined');
+        setValues(final);
+        onChange && onChange(clean as ValueType[]);
+        onUpdate && onUpdate(clean as ValueType[]);
       }
     },
     add: () => handlers.set(values.concat([emptyValue]))
   }
-  //effects
-  useEffect(() => {
-    //we only want to update the value if the change value is different
-    changed 
-      && onChange 
-      && onChange(changed.filter(Boolean) as ValueType[]);
-    //for consistency
-    changed 
-      && onUpdate 
-      && onUpdate(changed.filter(Boolean) as ValueType[]);
-  }, [ changed ]);
 
   return { values, handlers };
 }

src/hooks/useFieldset.ts

@@ -176,11 +176,12 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
   );
 };
 
+const Fieldset = make<FieldMetadataType>(Fields);
+
 /**
  * Metadata Fieldset Component (Main)
  */
 const FieldMetadata: React.FC<FieldsetProps<FieldMetadataType>> = (props) => {
-  const Fieldset = make<FieldMetadataType>(Fields);
   return (<Fieldset {...props} emptyValue={['', '']} />);
 }
 

src/react/FieldMetadata.tsx

@@ -85,11 +85,12 @@ const Fields: React.FC<FieldsProps<FieldTextlistType>> = (props) => {
   );
 };
 
+const Fieldset = make<FieldTextlistType>(Fields);
+
 /**
  * Textlist Fieldset Component (Main)
  */
 const FieldTextlist: React.FC<FieldsetProps<FieldTextlistType>> = (props) => {
-  const Fieldset = make<FieldTextlistType>(Fields);
   return (<Fieldset {...props} emptyValue={''} />);
 }
 

src/react/FieldTextlist.tsx

@@ -176,11 +176,12 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
   );
 };
 
+const Fieldset = make<FieldMetadataType>(Fields);
+
 /**
  * Metadata Fieldset Component (Main)
  */
 const FieldMetadata: React.FC<FieldsetProps<FieldMetadataType>> = (props) => {
-  const Fieldset = make<FieldMetadataType>(Fields);
   return (<Fieldset {...props} emptyValue={['', '']} />);
 }
 

src/tailwind/FieldMetadata.tsx

@@ -77,11 +77,12 @@ const Fields: React.FC<FieldsProps<FieldTextlistType>> = (props) => {
   );
 };
 
+const Fieldset = make<FieldTextlistType>(Fields);
+
 /**
  * Textlist Component (Main)
  */
 const FieldTextlist: React.FC<FieldsetProps<FieldTextlistType>> = (props) => {
-  const Fieldset = make<FieldTextlistType>(Fields);
   return (<Fieldset {...props} emptyValue={''} />);
 }