Как получить актуальные данные useState в callback event?

Question

[Leel Usama]

Надо прослушивать click на всей странице.
- Можно использовать useRef внутри колбека
- Можно добавить зависимости состояний в useEffect, тогда каждый раз при изменении будет удаляться и добавляться обработчик события.

Как еще можно сделать?

import { useRef, useEffect, useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef();

  countRef.current = count;

  const clickEvent = () => {
    console.log(`Count: ${count}; CountRef: ${countRef.current}`);
  };

  useEffect(() => {
    document.addEventListener('click', clickEvent);

    return () => {
      document.removeEventListener('click', clickEvent);
    };
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount((n) => n + 1)}>Count: {count}</button>
    </div>
  );
}

Answer 1

[Alexandroppolus]

Голосую за useRef

import { useRef, useEffect, useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef();

  countRef.current = count;

  useEffect(() => {
    const clickEvent = () => {
      console.log(`CountRef: ${countRef.current}`);
    };

    document.addEventListener('click', clickEvent);

    return () => {
      document.removeEventListener('click', clickEvent);
    };
  }, [countRef]);

  return (
    <div>
      <button onClick={() => setCount((n) => n + 1)}>Count: {count}</button>
    </div>
  );
}

В таком варианте обработчик события ставится только один раз.

Если хочешь упороться к конкурентный режим, то вместо countRef.current = count; лучше так:

useEffect(() => {
  countRef.current = count;
}, [countRef, count]);