Реагируйте на useCallback вместо useEffect для анимации

Question

Следуя руководству Scrimba по React Hooks, я пытался использовать, useEffect а также useCallbackдля способов предотвращения повторного рендеринга компонента во время requestAnimationFrame. В настоящее время у меня естьPlaygroundкомпонент, который обновляет и отображает count государство и ребенок <Calculate /> компонент, который считает количество рендеров.

Ниже я использую useCallback и, похоже, он работает. Кто-нибудь знает, работает ли функция возврата в хуке useCallback для очистки requestAnimationframe, как это было бы в хуке useEffect? Я использовал его в приведенном ниже коде, но не знаю, как проверить, реализуется ли "cancelAnimationFrame"?

import React, { useState, useRef, useCallback } from 'react'


export default function Playground() {
  const [count, setCount] = useState(0)

  const cb = useCallback(()=>{
      let anim,
        loop = () => {
           setCount(prev => prev + 1) 
           anim = requestAnimationFrame(loop)
        }
        loop()
        return()=> cancelAnimationFrame(anim)
  }, [])

  return (
    <>
    <h1>{count}</h1>
      <Calculate cb={cb} />
    </>
  )
}

const Calculate = React.memo(({ cb }) =>{
  cb()
  const renderCount = useRef(1)
  return <div>{renderCount.current++}</div>
})