code refactoring

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -7,6 +7,7 @@ import { BsTrash } from "react-icons/bs";
 import { LuGripHorizontal } from "react-icons/lu";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
+import Image from "next/image";
 
 interface Props extends WorkflowStep {
     entityTeachers: TeacherUser[];
@@ -31,7 +32,7 @@ export default function WorkflowEditableStepComponent({
             .map((teacher) => ({
                 value: teacher.id,
                 label: teacher.name,
-                icon: () => <img src={teacher.profilePicture} alt={teacher.name} />
+                icon: () => <Image src={teacher.profilePicture} alt={teacher.name} />
             }))
             .sort((a, b) => a.label.localeCompare(b.label)),
         [entityTeachers]
@@ -42,7 +43,7 @@ export default function WorkflowEditableStepComponent({
             .map((corporate) => ({
                 value: corporate.id,
                 label: corporate.name,
-                icon: () => <img src={corporate.profilePicture} alt={corporate.name} />
+                icon: () => <Image src={corporate.profilePicture} alt={corporate.name} />
             }))
             .sort((a, b) => a.label.localeCompare(b.label)),
         [entityCorporates]
@@ -55,9 +56,16 @@ export default function WorkflowEditableStepComponent({
             const initialSelects = assignees.map((assignee) =>
                 typeof assignee === 'string' ? allOptions.find(opt => opt.value === assignee) || null : null
             );
-            if (JSON.stringify(initialSelects) !== JSON.stringify(selects)) {
-                setSelects(initialSelects);
-            }
+    
+            setSelects((prevSelects) => {
+                // This is needed to avoid unnecessary re-renders which can cause warning of a child component being re-rendered while parent is in the midle of also re-rendering.
+                const areEqual = initialSelects.length === prevSelects.length && initialSelects.every((option, idx) => option?.value === prevSelects[idx]?.value);
+                
+                if (!areEqual) {
+                    return initialSelects;
+                }
+                return prevSelects;
+            });
         } 
     }, [assignees, allOptions]);