body {
  height: 100vh;
  display: grid;
  place-items: center;
}

import React, { useEffect, useState } from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

const App = () => {
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(0)
  const [count3, setCount3] = useState(0)
  const [count4, setCount4] = useState(0)

  const onClickAdd = () => {
    setCount1((prev) => prev + 1)
  }

  const onClickReset = () => {
    setCount1(0)
  }

  useEffect(() => {
    setCount2(count1 * 2)
  }, [count1])

  useEffect(() => {
    setCount3(count2 * count2)
  }, [count2])

  useEffect(() => {
    setCount4(count2 + count3)
  }, [count2, count3])

  return (
    <div>
      <ul>
        <li>count1: {count1}</li>
        <li>count2: {count2}</li>
        <li>count3: {count3}</li>
        <li>count4: {count4}</li>
      </ul>
      <button onClick={onClickAdd}>ADD</button>
      <button onClick={onClickReset}>RESET</button>
    </div>
  )
}

ReactDOM.render(<App />,
document.getElementById("root"))