Next.js Discord

Discord Forum

Error: Maxium update depth exceeded.

Unanswered
Txie posted this in #help-forum
Open in Discord
TxieOP
I'm getting this error message that I think is caused by the shadcn slider component I'm using.
I'm trying to make a seekbar with a timer/duration on it and I have the time updating the value of this component. I don't know exactly how this error really pops up but the way I get it show this message is by messing around with my desktop applications by focusing on them or switching tabs and going back.

5 Replies

TxieOP
const handleValueChange = (value: number[]) => {
    if (!isReplayerReady) return;
    const timeOffset = totalDuration * value[0];
    goto(timeOffset);
  };

  const handleValueCommit = (value: number[]) => {
    if (!isReplayerReady) return;
    const timeOffset = totalDuration * value[0];
    goto(timeOffset);
  };

  const seekbarValue = useMemo(() => {
    if (!isReplayerReady || totalDuration === 0) return [0];
    return [roundTime(currentTime) / totalDuration];
  }, [currentTime, totalDuration, isReplayerReady]);

<Seekbar
  className="py-3 cursor-pointer"
  min={0}
  max={1}
  step={0.01}
  value={seekbarValue}
  onValueChange={(value) => handleValueChange(value)}
  onValueCommit={(value) => handleValueCommit(value)}
  inactivePeriods={[]}
   
        />
This is the code where it lies in a component for my controls for this replayer
const [currentTime, setCurrentTime] = useState<number>(0);


The time is being updated in a useEffect with requestAnimationFrame instead of interval. Which is in my custom hook for this replayer
TxieOP
I also think it's because I'm not using a callback for handleValueChange and handleValueCommit
nope just tried this