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

import React, { 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 = () => {
    const newCount1 = count1 + 1
    const newCount2 = newCount1 * 2
    const newCount3 = newCount2 * newCount2
    const newCount4 = newCount2 + newCount3

    setCount1(newCount1)
    setCount2(newCount2)
    setCount3(newCount3)
    setCount4(newCount4)
  }

  const onClickReset = () => {
    setCount1(0)
    setCount2(0)
    setCount3(0)
    setCount4(0)
  }

  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"))