Optimize track seeking api calls react hook

Medium

When building a music streaming app, you notice user actions (like seeking in a track) are causing too many API calls. How would you optimize the custom hook below to reduce server load while maintaining a smooth user experience?

ReactReact hooksDebounceCustom hooksPerformanceOptimization

1function useTrackProgress({ trackId, onTimeUpdate }) {
const [currentTime, setCurrentTime] = useState(0);
const [isSeeking, setIsSeeking] = useState(false);
const audioRef = useRef(null);

const handleSeek = (newTime) => {
  setIsSeeking(true);
  setCurrentTime(newTime);
  // Missing optimization code here
  audioRef.current.currentTime = newTime;
  onTimeUpdate(newTime);
  setIsSeeking(false);
};

useEffect(() => {
  // Sync with server
  const updateServer = () => {
    if (!isSeeking) {
      fetch('/api/tracks/progress', {
        method: 'POST',
        body: JSON.stringify({
          trackId,
          timestamp: currentTime
        })
      });
    }
  };
  
  updateServer();
}, [currentTime, trackId, isSeeking]);

return { currentTime, handleSeek };
33}

When building a music streaming app, you notice user actions (like seeking in a track) are causing too many API calls. How would you optimize the custom hook below to reduce server load while maintaining a smooth user experience?

Hint