marekpiechut

# Block these pesky procrastinators

news.ycombinator.com
youtube.com
www.youtube.com

twitter.com
www.twitter.com
twimg.com
abs.twimg.com

marekpiechut

# This blocklist helps Pi-hole's admin restrict access to Facebook and its domains.
# Curated from sources online.
# Last updated: 9 december 2019

apps.facebook.com
connect.facebook.net
facebook.com
ru-ru.facebook.com
nl-nl.facebook.com
nl-be.facebook.com

marekpiechut

const App = () => {
  const loadData = id => ({ id, value: 'some' })
  const [_, setDummy] = useState()

  return (
    <div className="App">
      <button onClick={() => setDummy(Date.now())} />
      <SlowComponent
        onClick={React.useCallback(() => loadData('dummy'), [])}
      />

marekpiechut

const App = () => {
  const loadData = id => ({ id, value: 'some' })
  const [_, setDummy] = useState()

  return (
    <div className="App">
      <button onClick={() => setDummy(Date.now())}>Render</button>
      <SlowComponent onClick={() => loadData('dummy')} />
    </div>
  )

marekpiechut

const SlowComponent = React.memo(({ text, onClick }) => {
  const arr = []
  for (var i = 1000000 - 1; i >= 0; i--) {
    arr.push(i)
  }
  return (
    <div>
      <div>I'm slow {text}</div>
      <button onClick={onClick}/>
    </div>

marekpiechut

adb reverse tcp:8097 tcp:8097

marekpiechut

<script src="http://localhost:8097"></script>

marekpiechut

npm install -g react-devtools
react-devtools

marekpiechut

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 = () => {

marekpiechut

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

<button
  onClick={() =>
    trace('Fetch data', performance.now(), () => {
      setLoading(true)
      fetchData()