This a React application that animates sorting algorithms. I have the animations working smoothly (and imperatively) outside of the React paradigm using JavaScript’s native Web Animations API. I want to follow React best practices, so does it make sense to run this imperative logic within a useEffectEvent?

To my understanding useEffect is for synchronizing with external systems, including animations. But these animations, in my case, are triggered by an event (clicking a “Sort” button). What would be the most appropriate way of modulating this logic?

Question: Does the imperative animation logic best belong in the event handler (in response to “Sort” button click) or in a useEffectEvent (in response to setIsSorting(true))? Or is either interpretation / implementation viable?

It looks like the image below for reference. Thanks in advance.