Skip to content
React Intersection Observer
Esc
navigateopen⌘Jpreview
On this page

Rewritten Hooks and tests

So now that Hooks have been out in the wild for a week, a few issues are starting to pop up. Especially relating to how refs are handled (#162). To fix this, the current API needs to be changed.

New useInView API:

const [ref, inView, entry] = useInView(options)

If you are already using the hook, then you will need to update your code, by changing:

const Component = () => {
  const ref = useRef()
  const inView = useInView(ref, {
    threshold: 0,
  })

  return (
    <div ref={ref}>
      ...
    </div>
  )
}

Into:

const Component = () => {
  const [ref, inView] = useInView({
    threshold: 0,
  })

  return (
    <div ref={ref}>
      ...
    </div>
  )
}

Removed

  • The useIntersectionObserver hook was removed in favor of the useInView hook.

Tests

Tests have been rewritten using react-testing-library. Before they were messing with the internals of the components to fake updates. It also just works with the new hooks.

Last updated on February 10, 2019

Was this page helpful?