почему я получаю значение ID как неопределенное в приведенном ниже коде?

Question

// когда я пытаюсь утешить идентификатор каждый раз, когда я получаю неопределенное значение. Я верю, что оно находится в области видимости, но все же почему я получаю неопределенное значение

function App() {
  let id;

  let [time, settime] = useState('');

  function timechnage() {

    id = setInterval(() => {
      settime(Date);
    }, 1000);

  }


  function timecage() {
    console.log(id);

    console.log(id);

    settime(0);
  }

  return (

    <div>
      <p>time is {time}</p>
      <button onClick={timechnage}>start</button>
      <button onClick={timecage}>reset</button> 
    </div>
  )
}

export default App;

Answer 1

id воссоздается каждый раз при обновлении компонента, поэтому его предыдущее значение теряется.

Чтобы сохранить значение id в течение срока службы компонента, его необходимо поместить в ref:

// Create the ref
const id = useRef();

// Assign it
id.current = setInterval(...

// Display it
console.log(id.current)