How to make a sound progress bar

[woven bloom]

hello guys, i have a hook, which returns a calculation of the music tempo for a component, but it is returning 49 and 50 consecutively, without stopping, does anyone know?

[misty dust]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[woven bloom]

page.tsx

hook:

import { useState, useEffect } from "react";

interface ProgressProps {
    start: number,
    end: number,
}

const INTERVAL_STEP = 1000;

export default function useProgress({
    start,
    end,
}: ProgressProps) {
    const startedAt = Date.now();
    const [curPosition, setCurPosition] = useState(end - startedAt);

    useEffect(() => {
        const interval = setInterval(() => {
            setCurPosition((prevProsition) => prevProsition - INTERVAL_STEP)
        }, INTERVAL_STEP)

        return () => {
            clearInterval(interval);
        }
    }, [start, end, startedAt])

    useEffect(() => {
        setCurPosition(end - startedAt);
    }, [start, end, startedAt])

    const total = end - start;

    return {
        percentage: 100 - Math.floor((curPosition / total) * 100),
        startedAt
    }
}```

[still delta]

Hi, I'd use a ref instead of a state in this case

[woven bloom]

just like I didn't understand

const [curPosition, setCurPosition] = useState(end - startedAt);?

[still delta]

I mean useRef instead of useState.

[woven bloom]

oh, ok

[still delta]

I think you don't need the second useEffect, what are you using it for?

[woven bloom]

to set the current song position

[still delta]

Ok, I understand, can you try removing startedAt from array dependencies?

In both useEffect

[woven bloom]

??

idky

[woven bloom]

alright

I just don't understand useRef

[still delta]

It returns an object with a prop named current, that prop contains the value you assign. Using ref instead of state you avoid the componen re render every 1000 milliseconds

[woven bloom]

hmmm

[woven bloom]

how cani apply this in my code?

[still delta]

Replace [curPos..., setCur...] for a simple variable, eg. curPosition

[woven bloom]

hmm

[still delta]

useRef is mutable, you can assign a value directly, using refName.current = value, instead of using the state setter

[woven bloom]

curPosition.current = prevPosition - INTERNAL_STEP?

[still delta]

curPosition.current = curPosition.current + INTERNAL_STEP

[woven bloom]

hm

[woven bloom]

now it is only returning 50

[still delta]

Ok

[woven bloom]

the page

[still delta]

I can help you tomorrow, is late for me

[woven bloom]

alr

[still delta]

Hi, hope this is helpful to you
https://stackblitz.com/edit/vitejs-vite-yj59e8?file=src%2FApp.tsx,src%2FuseProgress.tsx&terminal=dev

Try to avoid using date to generate numbers couse it calculates a new value every time component renders

[woven bloom]

timestamp works here?

[still delta]

Change the type in the useRef declaration

It didn't worked for me

[woven bloom]

:/

i need this for timestamps

basically, I wanted to make it so that it would receive data from a song (start as timestamp and end as timestamp)

[still delta]

It should work well with timestamps, couse are just numbers. What you can't do is generate the timestamp in the same component

[woven bloom]

I tried putting timestamps, but it didn't work

[still delta]

Let me see

[still delta]

Can you show me how you get the timestamps?

[woven bloom]

Date.now() + 6e5

[still delta]

That's the problem, the method now of Date calculates a new timestamps every time the component is rendered

You could maybe try to memorize it