React hooks с кастомными callbacks

Question

как правильно подписаться на коллбэк при работе с useEffect? Попробовал использовать useCallback, но при изменении любой из переменных (namePref, oldX, oldY) из зависимостей useCallback заново срабатывает useEffect и получается, что подписываемся на изменения (elToSub.on("click" ...) множество раз).

const [oldX, SetOldX] = useState();
const [oldY, SetOldY] = useState();
const [namePref, setNamePref] = useState();

// some click callback
const clickCallback = useCallback(
 async (data) => {
   const { info, name, x, y } = data;
   SetOldX(oldX + x);
   SetOldY(oldY + y);
   setNamePref(namePref + name + info);
 },
 [namePref, oldX, oldY]
);


useEffect(() => {
 // bug is here - clickCallback is updating when some of props is changing so we remaking subscribrion;
 elToSub.on("click", clickCallback.bind(this));
}, [elToSub, clickCallback]);

Answer 1

Чтобы изменить стейт, основываясь на предыдущем значении, нужно в setState передать функцию, которая параметром принимает предыдущее значение и возвращает новое.

То есть, вместо SetOldX(oldX + x) нужно SetOldX(prev => prev + x).

В результате коллбэк будет таким:

const clickCallback = async (data) => {
  const { info, name, x, y } = data;
  SetOldX(prev => prev + x);
  SetOldY(prev => prev + y);
  setNamePref(prev => prev + name + info);
}

Необходимости использовать useCallback больше нет, так как это чистая функция и можно передавать ее в зависимости в useEffect.

БЛОГ НА HUSL

React hooks с кастомными callbacks

Ответы (1 шт):