React custom hook with event listener not works while updating the state

Question

I have a custom hook that handles clicks outside of a component:

const useOutsideClick = (ref, callback) => {
  const handleClick = e => {

    if (ref.current && !ref.current.contains(e.target)) {
      callback();
    }
  };

  useEffect(() => {
    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  });
};

I have used this hook in a component like this:

const MyComponent = () => {
  const container = useRef();
  const [isOpen, setIsOpen] = useState(false);

  useOutsideClick(container, () => {
    console.log("clicked outside");
  });
  return (
    <>
      <span>another element</span>

      <button onClick={() => setIsOpen(false)}>click</button>
      <div ref={container}></div>
    </>
  );
};

The problem is when I click on the span, everything works fine. But, when I click on the button an it updates the state, it doesn't enter useOutsideClick callback function. How can I solve this problem?

Alvaro · Accepted Answer · 2019-11-18 15:59:50Z

2

The issue here is that useEffect has no dependency array, so it is being called on every render. Also, it is better to keep the definition of handleClick inside the hook as it is only going to be used in the first render; otherwise if would be defined on every render.

const useOutsideClick = (ref, callback) => {
    useEffect(() => {
        const handleClick = e => {
            if (ref.current && !ref.current.contains(e.target)) {
                callback();
            }
        };

        document.addEventListener("click", handleClick);

        return () => {
            document.removeEventListener("click", handleClick);
        };
    }, []);
};

answered Nov 18, 2019 at 15:59

Alvaro

9,81210 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hadi Ranjbar Over a year ago

You right! I copied this code from medium and I didn't see this problem!

Hadi Ranjbar · Accepted Answer · 2019-11-19 11:14:13Z

0

I found that the best solution for useOutsideClick hook is this:

function useOutsideClick(ref, handler) {
  useEffect(
    () => {
      const listener = event => {
        if (!ref.current || ref.current.contains(event.target)) {
          return;
        }

        handler(event);
      };

      document.addEventListener("mousedown", listener);
      document.addEventListener("touchstart", listener);

      return () => {
        document.removeEventListener("mousedown", listener);
        document.removeEventListener("touchstart", listener);
      };
    },

    [ref, handler]
  );
}

answered Nov 19, 2019 at 11:14

Hadi Ranjbar

1,8224 gold badges25 silver badges44 bronze badges

Collectives™ on Stack Overflow

React custom hook with event listener not works while updating the state

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related