cleanup function for react

[abdoseadaa]

clean up function for useEffect

• as shown in video below this issue happens when navigating back to page where swapy is defined
• the more i navigate the more it becomes slow and laggy 💀 , i had to reload window in order to returns back to normal

this is my code version

  useEffect(() => {
    const container = document.querySelector('.data-dashboard-swapy-container')!
    const swapy = createSwapy(container , {
      animation : "none",
    })
    swapy.onSwap(({ data }) => {
      saveSlot("dashboard" , data.object as unknown as ISlotData)
    })


    return () => {
      swapy.enable(true)
    }
    
  }, [])

should have

  useEffect(() => {
    const container = document.querySelector('.data-dashboard-swapy-container');
    if (!container) return;
    const swapy = createSwapy(container, {
      animation: 'dynamic',
    });
    const handleSwap = ({ data }) => {
      saveSlot('dashboard', data.object as unknown as ISlotData);
    };
    swapy.onSwap(handleSwap);
    return () => {
      // need to add this 👇
      swapy.offSwap(handleSwap); // @important
    };
  }, []);

Gabster.And.5.More.Pages.-.Personal.2.comp.-.Microsoft.Edge.2024-08-28.06-18-02.mp4

[Hatchibombotar]

This is a very annoying issue for developing in auto refreshing environments that only refresh the modified components. I don't understand your example though @abdoseadaa? Should there not be a function that cleans up the whole swapy object rather than just removing an event listener function? e.g.

useEffect(() => {
    ...
    return () => {
      swapy.cleanup()
    };
}

Even without the use of swapy.onSwap, it still gets slow over time.

[abdoseadaa]

removing listeners or removing all swapy instance anyone will do

   return () => {
      // need to add this 👇
      swapy.offSwap(handleSwap); // @important
    };

in the above example i put this part to show the owner what a cleanup should look like
your example is good too.
for now i replaced swapy with @dnd-kit/core as it is more stable but has more configurations to do

[TahaSh]

@abdoseadaa Thank you for opening this issue. It's a critical one; I'll make sure to update it soon. I'll let you know :)

[abdoseadaa]

@TahaSh thank you so much , Great work btw

[TahaSh]

@abdoseadaa I've added swapy.destroy in v0.2.0. Let me know if you have any questions!

[abdoseadaa]

Swapy@2.0.0.mp4

it's now even faster than @dnd-kit/core , i am using swapy as main drag drop lib
@TahaSh thanks for update and contact , great work

ربنا يبارك فيك 💕

[abdoseadaa]

issue resolved

[TahaSh]

@abdoseadaa I'm really happy to hear that. Thank you! 🙏