Not Sure How To Stop Timer From Resetting Upon Changing Nav Tabs

Codesandbox I have an app that records user screen time on pages within an app. However, when I click between nav bar tabs('About' and 'Time'), the timer resets. I do not want it

Solution 1:

This is just the gist of what you'll need to do. Components will be re-rendered when you navigate to another route and back. Because of this, their state will be no longer exist.

To maintain state, you could "lift" your state to a parent component. This means instead of your About and Time component managing their own state, App would manage both their states.

This would look something like this:

functionApp() {
    const [time, setTime] = useState({
        seconds: 0,
        minutes: 0,
        hours: 0,
    });

    const [isAboutTimerOn, setIsAboutTimerOn] = useState(false)

    constadvanceTime = () => {
        setIsAboutTimerOn(true)
        setInterval(() => {
            let nSeconds = time.seconds;
            let nMinutes = time.minutes;
            let nHours = time.hours;

            nSeconds++;

            if (nSeconds > 59) {
                nMinutes++;
                nSeconds = 0;
            }
            if (nMinutes > 59) {
                nHours++;
                nMinutes = 0;
            }
            if (nHours > 24) {
                nHours = 0;
            }

            isAboutTimerOn && setTime({ seconds: nSeconds, minutes: nMinutes, hours: nHours });
        }, 1000);
    };



    conststartTime = () => {
        advanceTime()
    }

    conststopTime = () => {
        setIsAboutTimerOn(false)
    }

    return (
        <Router><divclassName="App"><Nav /><Switch><Routepath="/about"exactcomponent={() =><AboutstartTime={startTime}stopTime={stopTime}time={time}/>}/> // pass props
                </Switch></div></Router>
    );
}

The logic for your use case may not be correct but the question is related to state management

Since you are managing two different states, your code will be more complex. You should be able to make some of you logic reusable though.

Then your child components would look something like:

const About = ({ time, startTime, stopTime }) => {

    useEffect(() => {
        startTime()

        return () => {
            stopTime()
        }

    }, [startTime, stopTime])


    return (
        <div>
            <p>
                {`
            ${time.hours < 10 ? '0' + time.hours : time.hours} :
            ${time.minutes < 10 ? '0' + time.minutes : time.minutes} :
            ${time.seconds < 10 ? '0' + time.seconds : time.seconds}
          `}
            </p>
        </div>
    );
}