Почему зависает анимация SVG в React?

Question

[Александр Интересный]

Зависает полностью анимация SVG в React. На всех других сайтах (без React) всё отлично, а на React зависает. Как только я нажимаю левую кнопку мышки, то на долю секунды анимация продолжается и дальше зависает.

Вот так это происходит: https://youtu.be/f3vZK2HxE1k

Вот так работает анимация:

Comments

[WbICHA]

Где ссылка на песочницу?

[Александр Интересный]

WbICHA, сейчас сделаю

[Александр Интересный]

WbICHA, очень странно, но на песочнице https://codesandbox.io/s/exciting-sunset-42d6nt?fi... всё работает как нужно

[WbICHA]

Александр Интересный, вот именно поэтому и надо сначала воспроизвести проблему без лишней шелухи.) Теперь ищи что именно там вызывает зависание.

Answer 1

[Александр Интересный]

setInterval(() => {
    setMedia(() => mediaFromPlayer(player))
}, 20)

заменил на это ->

useEffect(() => {
    const updateMedia = () => {
        setMedia(mediaFromPlayer(player));
    };

   const intervalId = setInterval(updateMedia, 100); // Adjust the interval as needed
   return () => clearInterval(intervalId); // Cleanup on unmount
}, [player]);