Как правильно использовать React `useCallback` список зависимостей?

Question

У меня есть такой пример:

codesandebox

Я хочу изменить значение состояния в обратном вызове, а затем использовать новое значение состояния для изменения другого состояния .

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("0");
  const [added, setAdded] = useState(false);

  const aNotWorkingHandler = useCallback(
    e => {
      console.log("clicked");
      setCount(a => ++a);
      setText(count.toString());
    },
    [count, setCount, setText]
  );

  const btnRef = useRef(null);
  useEffect(() => {
    if (!added && btnRef.current) {
      btnRef.current.addEventListener("click", aNotWorkingHandler);
      setAdded(true);
    }
  }, [added, aNotWorkingHandler]);

return <button ref={btnRef}> + 1 </button>

Однако после вызова этого обработчика count был успешно увеличен, а text - нет.

Можете ли вы, ребята, помочь мне понять, почему это произошло? ? и как этого избежать чисто?

Спасибо!

Answer 1

Если count и state всегда должны находиться в шаге, только если один - число, а другой - строка, то я думаю, что иметь две переменные состояния - это ошибка. Вместо этого просто получите один и извлеките из него другое значение:

const [count, setCount] = useState(0);
const text = "" + count;
const [added, setAdded] = useState(false);

const aNotWorkingHandler = useCallback(
  e => {
    setCount(a => ++a);
  },
  []
);

В приведенном выше примере useCallback у меня есть пустой массив зависимостей. Это потому, что единственное, что используется в обратном вызове, это setCount. React гарантирует, что установщики состояний имеют стабильные ссылки, поэтому setCount изменить невозможно, и поэтому нет необходимости перечислять его как зависимость.