getCurrentTime without triggering too much re-render on the Component about wavesurfer-react HOT 2 CLOSED

Hello, @nvminhhieu!
You have at least 3 options.

I. React.Context

You can create ProgressProvider that would render two contexts:

• ProgressSetterProvider
• ProgressValueProvider

I think their naming explicitly tells you what to do further with'em.

II. Subscriptions and Outer State Management

You can either create custom observable mechanism to subscribe to it, or use a module like zustand that moves state management out of react component life-cycle.

III. Value Debouncing

You can use something like use-debounce module to debounce either value, or callback function, or if your requirement is just to show hours and seconds w/o milliseconds, then you can use useState and check inside callback whether integer part has changed or not.

from wavesurfer-react.

Thank you for the suggestion! You are right, since I just need the seconds, I figure that I can Math.floor the time, and setState(). It's even easier because React setState only trigger state changes if the value is being changed.

wavesurferRef.current.on('audioprocess', function () {
    setCurrentTime(Math.floor(wavesurferRef.current.getCurrentTime()))
})

from wavesurfer-react.