React hooks such as useRef and useState not working on codePen

JavaScript
#1

Tell us what’s happening:
Hi, I am trying to create a timer using react, and I’m using react 18 on codepen. I need the hooks so I can access the state when using setInterval, but it seems when I try to use any of the hooks, the rest of the code after doesn’t run. I tried to log a number after using useState and it doesn’t log it to the console, an assistance would be appreciated.

Your code so far

class Timer extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      timer: this.props.Session * 60,
      type: "session",
      isStopped: true
    };
    this.handlePlay = this.handlePlay.bind(this);
    this.handlePause = this.handlePause.bind(this);
  }
  
  handlePause(){
  }
  
  handlePlay(){
    const [timer, setTimer] = useState(0);
    const timerRef = useRef(timer);
    timerRef.current = timer;
    console.log(10);
  
  render(){
    return(
      <div class="countdown">
        <p id="countdown">{this.props.Session}:00</p>
        <button onClick={this.handlePlay}><i class="fas fa-play">             </i></button>
        <button onClick={this.handlePause}><i class="fas fa-pause">           </i></button>
        <button onClick={this.props.Reset}><i class="fas fa-undo">           </i></button>
      </div>
    )
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0

Challenge: Build a 25 + 5 Clock

Link to the challenge:

#2

You’re trying to use hooks in a class component: hooks allow you to have effects in functional components, they are the equivalent of the class lifecycle methods.

You also have a missing curly brace on the handlePlay method, so wouldn’t work even if that were not the case.

Edit: there are quite a few things wrong here, though I do understand that you are right in the middle of adding functionality. Here is an example of a working version, please don’t just copy it as, it is just a demonstration of a few things you would need (fuctions, not classes, useState/useEffect/useRef).

Just to be very clear regarding useRef, it is a way to store some value that the component can track, like useState. But unlike useState it will not make the component rerender when it changes.

In JavaScript, when you assign an object to a variable, what is assigned is the reference to that object, not the actual values inside the object.

So useRef takes advantage of this – it literally just creates an object like this: { current: THE_VALUE_YOU_WANT_TO_TRACK }. When that value changes, the component function doesn’t rerun, because nothing has changed: that ref object is still just { current: THE_VALUE_YOU_WANT_TO_TRACK }.

Whereas if you use useState (or this.state in a class component), every time a value there changes, the component function runs again.

The reason it is used for timers is that you want to store the timer object itself (for example an interval from setInterval or a timeout from setTimeout). You want it tracked, so that you have the ability to clear the interval/timeout if necessary. But it needs to live outside the React rendering cycle.

#3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).