src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -51,6 +51,8 @@ export default function FamilyManageTabs({
     });
   };
 
+  const [updatePage, setUpdatePage] = useState(false) // State to determine when to update the page
+
   // State for family task data
   const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
 
@@ -220,7 +222,7 @@ export default function FamilyManageTabs({
 
     // Invoke the manageFamily function when the component mounts
     manageFamily();
-  }, []);
+  }, [updatePage]);
 
   // Effect to manage family tasks
   useEffect(() => {
@@ -356,6 +358,7 @@ export default function FamilyManageTabs({
           setActiveTask={setActiveTask}
           activeTask={activeTask}
           familyDetailsData={details.familyDetails.data}
+          setUpdatePage={setUpdatePage}
         />
       )}
     </div>

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -15,6 +15,7 @@ const AssignTaskPopout = React.memo(
     familyTask,
     activeTask,
     setActiveTask,
+    setUpdatePage
   }) => {
     const apiCall = new usersService();
 
@@ -143,6 +144,7 @@ const AssignTaskPopout = React.memo(
             status: true,
             message: "action successful",
           });
+          setUpdatePage(prev => !prev) // Updates family task page by calling the useeffect hook
           setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
             action(); // FUNCTION THAT CLOSES THE MODAL BOX