React-profiler

sublime-medium.txt

import {
  unstable_trace as trace,
  unstable_wrap as wrap,
} from 'scheduler/tracing'

const useData = () => {
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState(null)

  const fetch = () => {
    setLoading(true)
    fetchData()
      .then(
        wrap(data => {
          setData(data)
        })
      )
      .finally(wrap(() => setLoading(false)))
  }
  return { fetch, loading, data }
}

const Component = () => {
const { fetch, loading, data } = useData()

return <button
  onClick={() => trace('Fetch data', performance.now(), fetch)}
>
  Fetch data
</button>
}