import React, { useState } from 'react';
import './App.css';

function computeInitialCounter () {
  console.log('Computing counter value');

  // simulating calculations
  return Math.trunc(Math.random() * 20)
}

function App() {
  const [counter, setCounter] = useState(() => {
    return computeInitialCounter
  });

  function increment () {
    setCounter(counter + 1);
  };

  function decrement () {
    setCounter(counter - 1);
  };

  return (
   <div>
     <h1>Счетчик: {counter}</h1>
     <button onClick={increment}>Добавить</button>
     <button onClick={decrement}>Убрать</button>
   </div>
  );
}

export default App;