React hook - useRef - example timer

1. Import các thứ cần thiết

import {useState, useEffect, useRef} from 'react'

2. Tạo ref

const interValRef = useRef()

3. Tạo state timer

const [timer, setTimer] = useState(0)

4. Run timer

useEffect(() => {
  setInterval(() => {
    setTimer(timer => timer + 1)
  }, 1000)
}, [])

5. Clear interval

useEffect(() => {
  interValRef.current = setInterval(() => {
    setTimer(timer => timer + 1)
  }, 1000)
  return () => {
    clearInterval(interValRef.current)
  }
}, [])

return (
  <button onClick={() => clearInterval(interValRef.current)}>
    Clear Timer
  </button>
)

6. Demo