Нормально ли логировать что-либо в лямбде передаваемой в setState?

Question

[Иван Спасов]

Нужно залогировать данные при обработке клика, нормально ли делать так:

const [isOpen, setIsOpen] = useState(false);

const onOpen = useCallback(() => {
  setIsOpen(open => {
    // тут какой-нибудь синхронный вызов, для отправки/сохранения данных
    return !open;
  }); 
}, []);

Понимаю, можно использовать useEffect с зависимостью от isOpen, но мне нужно отправлять данные только после клика, useEffect отработает всегда

Сейчас не уверен, что это правда хорошая практика, выполнять какой-то вспомогательный код в лямбде setState.
Временно сделал в-лоб:

useCallback(() => {
  if (isOpen) {
    // logger.send(false); и еще пару строк
    setIsOpen(false);
  } else {
    // logger.send(true); // и еще пару строк
     setIsOpen(true);
  }

  ну или:
  logger.send(isOpen);
  setIsOpen(!isOpen); // выглядит не надежно
}, [isOpen]);

Answer 1

[Alexandroppolus]

С точки зрения useCallback, первый вариант (который с лямбдой) безусловно лучше - мемоизованная функция не меняется при смене isOpen.
Но разработчики Реакта увещевают нас не делать побочных эффектов в лямбде для setState, т.е. оставить функцию чистой. Подробности тут: https://beta.reactjs.org/reference/react/useState . Здесь же говорится, то в строгом режиме будет наркомания с двойным вызовом лямбды.

попробуй так:

const onOpen = useCallback(() => {
  let value = false;
  setIsOpen(open => {
    value = open;  // как я понял, отправлять надо старое значение
    return !open;
  });
  Promise.resolve().then(() => logger.send(value));
}, []);

Comments

[Иван Спасов]

Спасибо за ответ!
Все верно, но побочные эффекты – те, что меняют окружение, а тут просто логирование, потому и возник вопрос :)
Колдовать с промисами и прочим не стал, т.к. это сильно ухудшает читабельность, оставил просто useCallback с зависимостью