title: React Component UseEffect isn't rerendering upon prop change
body: <p>I have a dynamic Countdown Timer In React:<br />
  <a href="https://i.stack.imgur.com/uBhDN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uBhDN.png" alt="Basic React Counter" /></a></p>
  <p>This Timer is a component (MovementTimer.js) &amp; the main component (GameRoom.js) is calling Timer's render method, passing thru props.</p>
  <blockquote>
  <blockquote>
  <p>This is the render Timer function that's being called below upon every GameRoom render</p>
  </blockquote>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>    renderTimer = () =&gt; {
          console.log('*** Timer RERENDER ***');
          console.log(this.state.turn_time);
          console.log(this.state.last_time);
  
          if(this.state.turn_time != null &amp;&amp; this.state.last_time != null){
              const props = {
                  time : this.state.turn_time,
                  last_time : this.state.last_time
  
              }
  
              return(
                  &lt;MovementTimer {...props}/&gt;
              )
          } else {
              return(
                  &lt;p&gt;Undefined Timer.&lt;/p&gt;
              )
          }
      }
  </code></pre>
  <blockquote>
  <blockquote>
  <p>This is the render method of GameRoom.js</p>
  </blockquote>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>   render() {
  
          if(this.state.guest){
              console.log('loaded in ! ' + this.state.guest);
              //              Put into return statement for DEBUG     {this.state.turn ? &quot;TRUE&quot; : &quot;FALSE&quot;} 
              return (
                  &lt;div className=&quot;main&quot;&gt;
                      {this.renderBoard()}
                      {this.renderTimer()}
  
                      {}
                      &lt;p className=&quot;welcome&quot;&gt; 
  
                      {this.state.userResponseData}
  
                      {
                      this.state.guest[0] ? (this.state.turn ? &quot;It's your opponent's turn.&quot; : &quot;It's your turn, move!&quot;) : (this.state.turn ? &quot;It's your turn, move!&quot; : &quot;It's your opponent's turn.&quot;)
                      
                      }&lt;/p&gt;
      
                  &lt;/div&gt;
              )
          }
  
          return (
              &lt;div className=&quot;main&quot;&gt;
                  {this.renderBoard()}
                  
                  &lt;p className=&quot;welcome&quot;&gt; {this.state.turn ? &quot;TRUE&quot; : &quot;FALSE&quot;} Loading {this.state.userResponseData}&lt;/p&gt;
  
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  <p>Basically the issue is, whenever GameRoom.js rerender's, the renderTimer() function passes in updated props to the MovementTimer, however the timer doesn't reset. I was trying to use a useRef state boolean but it was buggy and wasn't working.</p>
  <blockquote>
  <blockquote>
  <p>MovementTimer.js component</p>
  </blockquote>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>import React, {useRef, clearState,useState,useCallback} from 'react'
  
  
  const MovementTimer = (props) =&gt; {
      console.log('Re initizalized')
      const time = parseInt(props.time);
      const last_time = parseInt(props.last_time);
  
      //clearState()
      console.log( 
  
          &quot;Estimated Time:\n&quot;+
          ((last_time+time*1000) - Date.now() )/1000
          
      );
  
      let [counter, setCounter] = React.useState(Math.round( ((last_time+time*1000) - Date.now() )/1000 ) );
      // const reinit = () =&gt; {
      //     setCounter(time)
      // }
  
      console.log(counter);
      console.log(last_time);
  
      React.useEffect(() =&gt; {
  
          counter &gt; 0 &amp;&amp; setTimeout(() =&gt; setCounter(
              counter - 1
          ), 1000); //Set this too Due time - last time / 1000 (for secs)
  
          
          if(counter === 0){
              const socketProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
      
              const socket = new WebSocket(socketProtocol+(window.location.href).split(':')[1]+':5000');
      
              socket.onopen = async () =&gt; {
                  await socket.send(JSON.stringify({
                      query_type : 't0',
                      room_id: (window.location.pathname).slice(6)
                  }));
                  socket.close();
                  
      
              }
              setCounter(Math.round( ((last_time+time*1000) - Date.now() )/1000 ))
          }    
  
  
  
        }, [counter]);
      
  
  
      return (
          &lt;div&gt;
              {counter}
          &lt;/div&gt;
      )
  }
  
  export default MovementTimer
  
  </code></pre>
  <p>In this component, I useEffect for the timer countdown, and pass in the time difference in seconds (using props that have been passed down) Is there anyway to check if props change, and reset the useEffect?</p>
  <p>In that if statement (counter === 0), I manually set it back using setCounter. however i dont know how to check for prop change. whenever last_time prop is updated.</p>