Почему слушатель на элемент реакта ломается?

Question

[igoryusha22]

https://codesandbox.io/s/eager-noether-lbe98r?file...

Есть блок со стейтом, внутри него рендерится компонент "A" и сам стейт.

Внутри компонента A рендерится див, внутри которого, в useEffect через innerHtml мы проставляем верстку и вешаем слушатель на клик.

При клике на этот див, 1 раз отрабатывает все хорошо, а затем все ломается, из-за чего это происходит. Из-за того что реакт анализирует реальный дом и виртуальный и у него что-то не сходится?

Если из-за этого, можно ли это как-то закостылить, чтобы реакт думал, что div пустой так и остался?

Answer 1

[Alexandroppolus]

Исправленный вариант - https://codesandbox.io/s/immutable-breeze-ycwnoy

Почему исходный не работал: в компонент А передавалась функция, которая замыкала count. Компонент по факту монтирования вешал функцию в onclick дива, и больше никак не менял этот див. То есть в обработчике клика навсегда застревала функция, которая была создана на первом рендере Арр и замкнула count===0. При повторном рендере Арр создавались новые функции, но они не применялись.

в новом варианте навтыкал console.log, чтобы было видно, когда и что происходит.

Comments

[igoryusha22]

Ах, ну конечно. Замыкание.)

По сути надо было лишь передавать коллбек.

А для чего в вашем примере использование useCallback? Не излишне?

Просто кажется, вызывать каждый раз функцию которая будет что-то проверять не лучше чем просто создать новую.

[Alexandroppolus]

А для чего в вашем примере использование useCallback? Не излишне?

благодаря ему и React.memo компонент А не перерисовывается.
а так, можно и выкинуть эту связку. Будет перерисовка и каждый раз срабатывание useEffect с переназначением обработчика "onclick". То есть косяк был именно в применении useEffect