fix: boucle inifinie dans UseEffect

Front-End/src/components/Inscription/SiblingInputFields.js

@@ -11,26 +11,6 @@ export default function SiblingInputFields({
   errors,
   setIsPageValid,
 }) {
-  useEffect(() => {
-    // Si siblings est null ou undefined, le valoriser à un tableau vide
-    if (!siblings || siblings.length === 0) {
-      setSiblings([]);
-    }
-
-    // Synchroniser siblings avec formData
-    setFormData((prevFormData) => ({
-      ...prevFormData,
-      siblings: siblings, // Mettre à jour siblings dans formData
-    }));
-
-    const isValid = siblings.every((sibling, index) => {
-      return !Object.keys(sibling).some(
-        (field) => getLocalError(index, field) !== ''
-      );
-    });
-
-    setIsPageValid(isValid);
-  }, [siblings, setSiblings, setFormData, setIsPageValid]);
 
   const getError = (index, field) => {
     return errors[index]?.[field]?.[0];
@@ -53,6 +33,36 @@ export default function SiblingInputFields({
     return '';
   };
 
+  useEffect(() => {
+    // Si siblings est null ou undefined, l'initialiser à un tableau vide
+    if (!siblings) {
+      if (!Array.isArray(siblings) || siblings.length !== 0) {
+        setSiblings([]); // Éviter de réexécuter inutilement si siblings est déjà []
+      }
+      return; // Sortir pour éviter de continuer l'exécution inutilement
+    }
+  
+    // Synchroniser siblings avec formData uniquement si nécessaire
+    setFormData((prevFormData) => {
+      if (JSON.stringify(prevFormData.siblings) !== JSON.stringify(siblings)) {
+        return {
+          ...prevFormData,
+          siblings: siblings, // Mettez à jour siblings dans formData
+        };
+      }
+      return prevFormData; // Évitez une mise à jour inutile
+    });
+  
+    // Valider les siblings
+    const isValid = siblings.every((sibling, index) => {
+      return !Object.keys(sibling).some(
+        (field) => getLocalError(index, field) !== ''
+      );
+    });
+  
+    setIsPageValid(isValid);
+  }, [siblings, getLocalError, setFormData, setIsPageValid]);
+
   const onSiblingsChange = (id, field, value) => {
     const updatedSiblings = siblings.map((sibling) => {
       if (sibling.id === id) {