React hook deps test

by rangeoshun

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

let f1Time = 0
let f2Time = 0;

const App = ({ tick01, tick02, tick03 }) => {
	const condition = !tick01 && tick02 === tick03

  const f1Start = window.performance.now()
  React.useEffect(() => {
    if (condition) console.log('effect01')
  }, [tick01, tick02, tick03])
  const f1End = window.performance.now()

  const f2Start = window.performance.now()
  React.useEffect(() => {
    if (condition) console.log('effect02')
  }, [condition])
  const f2End = window.performance.now()

  f1Time = f1Time + f1End - f1Start
  f2Time = f2Time + f2End - f2Start

  return (
    <div>
      <div>
        <p>
          Effect with deps `[tick01, tick02, tick03]` took so far: {f1Time}ms
        </p>
        <p>
          Effect with deps `[!tick01 && tick02 === tick03]` took so far: {f2Time}ms
        </p>
        <br />
        <p>
          Difference (E1 / E2): {f1Time / f2Time}
        </p>
      </div>
      <br />
      <div>
        <p>Tick01: {tick01}</p>
        <p>Tick02: {tick02}</p>
        <p>Tick03: {tick03}</p>
      </div>
    </div>
  )
}

const AppWithTick = () => {
  const [tick01, setTick01] = React.useState(0)
  const [tick02, setTick02] = React.useState(0)
  const [tick03, setTick03] = React.useState(0)

	React.useEffect(() => {
    const interval = setInterval(() => {
    const secs = Math.floor(Date.now() / 1000) 
      setTick01(secs % 2)
      setTick02(secs % 3)
			setTick03(secs % 5)
    }, 1000)
    
    return () => clearInterval(interval)
  })

	return <App {...{ tick01, tick02, tick03 }}/>
}

ReactDOM.render(<AppWithTick />, document.querySelector("#app"))