A counter in ReactJS

CounterApp.js

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [counter, setCounter] = React.useState(0);

  return (
    <div>
      <h2>Counter: {counter}</h2>

      {/*
      
      When you set a state based on previous value, it's usually better to use a callback:

      Setting state is asynchronous. In more complicated cases, weird bugs may occur if you don't use         callback method

      So, instead of setCounter(counter + 1)
      we do setCounter(counter => counter + 1);

    */}
      <button onClick={() => setCounter((counter) => counter + 1)}>
        Increment
      </button>
      <button onClick={() => setCounter((counter) => counter - 1)}>
        Decrement
      </button>
    </div>
  );
};

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