Endless render when observed element is TippyJS child

[ChrisLincoln]

When using the useInView hook, I'm getting endless render calls when the element I want to know is in view is inside a TippyJS wrapper. The referenced codebox is a mesh of the simple one found in the storybook where the observed element is the normally rendered content of Tippy. Sometimes TippyJS in a react functional component can be a bit like walking on eggshells, and I think this might be an example of one. I really like the DX with it, though. My apologies for the lack of clarity in the simple sandbox. I was trying lots of dumb stuff to see if I could figure out what makes this usage different than normal useInView usage.

https://codesandbox.io/s/useinview-forked-jnofg?file=/src/index.tsx

function App() {
  const [inViewRef, inView, entry] = useInView({
    threshold: 0,
  })
  const setRefs = React.useCallback(
    (node) => {
      // Ref's from useRef needs to have the node assigned to `current`
      // Callback refs, like the one from `useInView`, is a function that takes the node as an argument
      inViewRef(node);
    },
    [inViewRef],
  );
  console.log(entry)
  return ( n
    <ScrollWrapper inView={inView}>
      <Tippy content="hello">
        
        <Wrapper ref={setRefs}>
          <h2>Element is inside the viewport: {inView.toString()}</h2>
        </Wrapper>
      </Tippy>
    </ScrollWrapper>
  )
}

[thebuilder]

I haven't used Tippy, but could you try using the Headless version?

import React from 'react';
import Tippy from '@tippyjs/react/headless'; // different import path!

function App() {
  const [inViewRef, inView, entry] = useInView({
    threshold: 0,
  })
 
  return (<Tippy
    render={attrs => (
      <div ref={inViewRef} {...attrs}>
        My tippy box
      </div>
    )}
  >
    <button>My button</button>
  </Tippy>
  )
}

[ChrisLincoln]

Thank you for your patient. I just realized I didn't hit 'save' on that code sandbox. There is no telling what was in there for you. I did try the headless version, but the behavior was the same.

What I am going to do to work around it is render an empty span right before and put the observed-ref on that element. All my stuff is inline, so I don't have to worry about layout issues.