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
    }
}

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

just like I didn't understand

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

I mean useRef instead of useState.

oh, ok

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

to set the current song position

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

In both useEffect

??

idky

alright

I just don't understand useRef

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

hmmm

how cani apply this in my code?

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

hmm

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

curPosition.current = prevPosition - INTERNAL_STEP?

curPosition.current = curPosition.current + INTERNAL_STEP

hm

now it is only returning 50

Ok

the page

I can help you tomorrow, is late for me

alr

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

timestamp works here?

Change the type in the useRef declaration

It didn't worked for me

:/

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)

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

I tried putting timestamps, but it didn't work

Let me see

Can you show me how you get the timestamps?

Date.now() + 6e5

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

To avoid calculate it in every render