[JS, react] EventListener с обращением к state?

Question

[XpomIX]

Мне нужно повесить eventListener и обрабатывать событие, в функции имеются обращения к state, проблема в том, что state меняется, но функция не видит изменение state. Я вижу здесь решение в виде add-remove listener после изменения state, но я думаю, что можно сделать как-то иначе.
Как можно это реализовать? Заранее спасибо.

useEffect(() => {
		document.addEventListener('contextmenu', handleClickRMB, false);
	}, []);

	const handleClickRMB = (event) => {
		event.preventDefault();

		let index1 = Number(event.path[0].attributes.pos1.value);
		let index2 = Number(event.path[0].attributes.pos2.value);
		let pressedCell = board[index1][index2];
		if ((!pressedCell.opened) && (flagsLeft !== 0)) {
			if (pressedCell.marked) {
				pressedCell.mark();
				setFlagsLeft(flagsLeft => flagsLeft + 1);
			} else {
				pressedCell.mark();
				setFlagsLeft(flagsLeft => flagsLeft - 1);
			}
			changeOneCell(index1, index2, pressedCell);
		}
	}

flagsLeft виден всегда одинаковый, хотя по факту он меняется.

Comments

[Рома Зварич]

Приведите свой фрагмент кода, на который можно было бы ориентироваться

[XpomIX]

Рома Зварич, изменил

Answer 1

[Alexandroppolus]

const handleClickRMB = useCallback((event) => {
    event.preventDefault();

    let index1 = Number(event.path[0].attributes.pos1.value);
    let index2 = Number(event.path[0].attributes.pos2.value);
    let pressedCell = board[index1][index2];
    setFlagsLeft(flagsLeft => {
        if ((!pressedCell.opened) && (flagsLeft !== 0)) {
            const marked = pressedCell.marked;
            pressedCell.mark();
            changeOneCell(index1, index2, pressedCell);
            return marked ? flagsLeft + 1 : flagsLeft - 1;
        }
        return flagsLeft;
    });
}, [setFlagsLeft, changeOneCell]);

useEffect(() => {
    document.addEventListener('contextmenu', handleClickRMB, false);
    return () => document.removeEventListener('contextmenu', handleClickRMB, false);
}, [handleClickRMB]);