React eventListener + state handling

document.md

React event listeners with stale closure workaround

Component.jsx

function Component(props) {
  const [isFocused, setIsFocused] = useState(false);
  const mainComponentRef = useRef();

  useEffect(() => {
    // detect if clicks are occurring outside of cart content area. If it is, hide module
    const handleClickListener = ({ target }) => {
      if (isFocused && !mainComponentRef?.current?.contains(target)) {
        setIsFocused(false);
      }
    };

    if (isFocused && typeof document !== "undefined") {
      document.addEventListener("click", handleClickListener, { passive: true });
    }

    return () => {
      if (typeof document !== "undefined") {
        document.removeEventListener("click", handleClickListener);
      }
    };
  }, [isFocused]);

  return (
    <div ref={mainComponentRef} onClick={() => setIsFocused(true)}>
      // ...
    </div>
  );
}