koala написав:setCounter, вочевидь, змінює значення змінної counter? Тоді це не оптимізація - просто у вас іде одночасно кілька подій, кожна бере поточне значення counter, додає 1 і викликає setCounter. А тоді хто останній викликав - той і встановив. Це стан змагання. Вам треба атомарно змінювати значення counter, а лише потім його виводити.
Ну, то ж не змінна... я гадав, це очевидно, що то стейт. Звісно перед цим є таке:
const [counter, setCounter] = useState(0);
Не впевнений, що проблема в конкуренції, гадаю, що події хоч і відбуваються часто, але послідовно одна за одною і обробник відпрацьовує достатньо швидко, більш того лічільник може змінюватись двічі підряд в одному виклику обробника (прийшло два повідомлення) в одній події.
А про оптимізацію Реакту чітко і ясно написано в документації (таке хоч цитату шкай), що він не гарантує спрацювання всіх змін стану при занадто частій їх зміні і виконує лише останню з них. Просто я розумію, що стейти не найкраще сховище для збереження поточного стану лічильника, як і не можна використовувати звичайну змінну, яка живе лише один цикл рендеру. Редаксу в нас нема, локал сторедж мені здається оверкілом. Я ото цікавлюся, яка звичайна практика в цьому? Бо щось не можу нічого нагуглити.
Може спробувати глобальну змінну, накшталт, window.counter? Але мені також здається, що це трошки не реакт-вей. Як би це зробити правильно, як люди роблять?