在 useEffect 钩子上获取无限循环

Question

Trying to build a tooltip component. When the tooltip moves away from the viewport need to switch the tooltip position that is working fine. But when the tooltip is away from the viewport useEffect running infinitely. cant able to find the root cause.

Adding sandbox link https://codesandbox.io/s/dbpkr

Answer 1

Try using a dependency array

useEffect(() => {;
    let intersectionObserver = new IntersectionObserver(function (entries) {
      if (!entries[0].isIntersecting) {
        setMoveBottom(!moveBottom);
      }
    });

    if (refElement) intersectionObserver.observe(refElement);

    return () => {
      if (refElement) intersectionObserver.unobserve(refElement);
    };
  }, [setMoveBottom, moveBottom, refElement]);

Answer 2

Yeah because you are not passing dependency for useEffect hook.

So add either empty array or pass any dependencies by end of the useEffect

Eg:

 useEffect(() => {


}, [])

for more info read this enter link description here