How to get actual useState data in callback event?

Question

JavaScript

It is necessary to listen to click on the entire page.
- You can use useRef inside the callback
- You can add state dependencies to useEffect, then each time it changes, the event handler will be removed and added.

How else can you do it?

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

I vote for 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>
  );
}

In this case, the event handler is set only once.
If you want to stick to the competitive mode, then instead of countRef. current = count; better this way:

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