React – not able to access latest props value inside setInterval

Actually trying to access props inside the setInterval but it’s not giving the latest value. Please find the below. From the parent component, I am passing time and updating time after 1 ms initially it will be null.

In child component after 2 ms i am trying to access latest value from the props but its holds the older value which is null.

Please find the code below

function ChildComp(props) {

  const checkTime = () => {
      setInterval(() => {
        console.log(props.updatedTime);
      }, 2000);
  }

  React.useEffect(() => {
    checkTime();
  }, [])
  return(<div>child render: Time is {props.updatedTime}</div>)
}


function App() {
  const [time, setTime] = React.useState(null);
  
  React.useEffect(() => {
    setTimeout(() => {
      setTime((prev) => new Date().getTime());
    }, 1000)
  }, []);
  
  return(<div> App <ChildComp updatedTime={time} /></div>)
}




ReactDOM.render(<App />, document.querySelector('#app'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>


<div id="app"></div>

Thanks in advance. Happy coding!!

Answer

I’m not sure why you’d don’t want to use state because it looks to be the far easier solution. setInterval seems to be very unpredictable.

Note: you should be passing in props.updatedTime as a dependency to the useEffect. But, now, because you know that the time is changing every second you can keep a count within state and just trigger the condition in the effect when it reaches 2.

const {useState, useEffect} = React;

function ChildComp(props) {

  // Set up state to keep count
  const [count, setCount] = useState(1);

  useEffect(() => {

    // Increase the count
    setCount(count + 1);

    // When it reaches 2, log the time, and
    // reset the count
    if (count ===  2) {
      console.log(props.updatedTime);
      setCount(1);
    }

  // Pass in the time as a dependency
  }, [props.updatedTime]);

  return (
    <div>child render: Time is {props.updatedTime}</div>
    );

}

function App() {

  const [time, setTime] = React.useState(false); 

  React.useEffect(() => {
    setInterval(() => {
      setTime(new Date().getTime());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  if (!time) return <div />      

  return(<div> App <ChildComp updatedTime={time} /></div>)
}

ReactDOM.render(<App />, document.querySelector('#app'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="app"></div>