1

Тема: React: Як зробити "чесний" лічильник?

Можна в прикладах побачити, як роблять щось накшталт наступного:

setCounter(counter + 1);

Це чудово працює, коли мова йде про якесь натискання кнопки і т. п., от коли треба пронумерувати повідомлення, що валять від стомп-клієнта, то той лічильник дуже швидко "захлинається" з причини реактівської оптимізації, яка може пропускати надто часті зміни станів.

Тож як? Як зробити в реакті такий лічильник, щоб чітко і безпомилково зберігав поточне значення лічильника, і навіть буде краще, якщо без застосування стейтів, щоб зміна індексу не робила зайвих перерендерів... Як? Підкажіть, будь ласка.

2

Re: React: Як зробити "чесний" лічильник?

setCounter, вочевидь, змінює значення змінної counter? Тоді це не оптимізація - просто у вас іде одночасно кілька подій, кожна бере поточне значення counter, додає 1 і викликає setCounter. А тоді хто останній викликав - той і встановив. Це стан змагання. Вам треба атомарно змінювати значення counter, а лише потім його виводити.

Подякували: ReAl, leofun012

3

Re: React: Як зробити "чесний" лічильник?

koala написав:

просто у вас іде одночасно кілька подій, кожна бере поточне значення counter, додає 1 і викликає setCounter. А тоді хто останній викликав - той і встановив.

Є лише 2 складні речі в програмуванні:

0. Вигадування назв для сутностей
1. Оновлення кешу
7. Асинхронні зворотні виклики
2. Зсув межі на одиницю
2. Стан перегонів

Подякували: 0xDADA11C7, koala, leofun013

4

Re: React: Як зробити "чесний" лічильник?

koala написав:

setCounter, вочевидь, змінює значення змінної counter? Тоді це не оптимізація - просто у вас іде одночасно кілька подій, кожна бере поточне значення counter, додає 1 і викликає setCounter. А тоді хто останній викликав - той і встановив. Це стан змагання. Вам треба атомарно змінювати значення counter, а лише потім його виводити.

Ну, то ж не змінна... я гадав, це очевидно, що то стейт. Звісно перед цим є таке:

const [counter, setCounter] = useState(0);

Не впевнений, що проблема в конкуренції, гадаю, що події хоч і відбуваються часто, але послідовно одна за одною і обробник відпрацьовує достатньо швидко, більш того лічільник може змінюватись двічі підряд в одному виклику обробника (прийшло два повідомлення) в одній події.

А про оптимізацію Реакту чітко і ясно написано в документації (таке хоч цитату шкай), що він не гарантує спрацювання всіх змін стану при занадто частій їх зміні і виконує лише останню з них. Просто я розумію, що стейти не найкраще сховище для збереження поточного стану лічильника, як і не можна використовувати звичайну змінну, яка живе лише один цикл рендеру. Редаксу в нас нема, локал сторедж мені здається оверкілом. Я ото цікавлюся, яка звичайна практика в цьому? Бо щось не можу нічого нагуглити.

Може спробувати глобальну змінну, накшталт, window.counter? Але мені також здається, що це трошки не реакт-вей. Як би це зробити правильно, як люди роблять?

5

Re: React: Як зробити "чесний" лічильник?

Може спробувати редьюсер?

6

Re: React: Як зробити "чесний" лічильник?

так стейт це і є міні-редюсер же ж

як і не можна використовувати звичайну змінну, яка живе лише один цикл рендеру

спробуйте може useRef тоді? воно забезпечить живучість змінної

Подякували: flatliner, leofun012