//пусть у нас есть простой компонент с двумя кнопками, считающий количество жмяков на первую и вторую кнопку
//не спрашивайте, нахуя он такой нужен

//Как было раньше

class Example extends Component{

  constructor(props){
    super(props);
    //задаём начальный стейт. стейт - это те данные, которые сохраняются между рендерами
    this.state = {
      firstButtonClickCount: 0,
      secondButtonClickCount: 0,
    }
    //делаем магическую хуйню, из-за которой, в частности, реакт решил отказаться от классов
    this.onFirstButtonClick = this.onFirstButtonClick.bind(this);
    this.onSecondButtonClick = this.onSecondButtonClick.bind(this);
  }

  onFirstButtonClick(){
    /*ещё одна магическая хуйня. мы передаём в качестве аргумента функцию, которая принимает старый стейт и возвращает кусок нового стейта, который потом shallow merge'ится в новый стейт */
    this.setState(state => ({
      firstButtonClickCount: state.firstButtonClickCount + 1
    }));
  }

  onSecondButtonClick(){
    this.setState(state => ({
      secondButtonClickCount: state.secondButtonClickCount + 1
    }));
  }

  render(){
    //а это знаменитый JSX. специальный реактовский язык, который выглядит как html, но транспилируется в js
    return <div>
      <button onClick={this.onFirstButtonClick}>
        Clicked {this.state.firstButtonClickCount} times
      </button>
      <button onClick={this.onSecondButtonClick}>
        Clicked {this.state.secondButtonClickCount} times
      </button>
    </div>
  }
}

//как стало

function Example(){
  /* теперь вместо одного стейта у нас несколько "кармашков", к которым мы получаем доступ с помощью хука useState
  useState возвращает массив из двух элементов. первый элемент - значение в "кармашке" на момент текущего рендера
  второй - функция, с помощью которой можно это значение изменить (изменение отразится только на будущих рендерах) */

  const [firstButtonClickCount, setFirstButtonClickCount] = useState(0);
  const [secondButtonClickCount, setSecondButtonClickCount] = useState(0);

  return <div>
    <button onClick={() => setFirstButtonClickCount(firstButtonClickCount + 1)}>
      Clicked {firstButtonClickCount} times
    </button>
    <button onClick={() => setSecondButtonClickCount(secondButtonClickCount + 1)}>
      Clicked {secondButtonClickCount} times
    </button>
  </div>
}

/* и в общем-то, код стал лаконичнее. но вот с чего у меня бомбит
то, в какой "кармашек" мы попадём при каждом вызове useState, зависит исключительно от порядка вызовов useState
то есть по сути МЫ БЛЯТЬ ХРАНИМ СОСТОЯНИЕ В СТЕКЕ*/