Reset inView and entry when observed component is unmounted

src/__tests__/hooks.test.js

@@ -27,6 +27,17 @@ const LazyHookComponent = ({ options }) => {
   )
 }
 
+const UnmountableRefComponent = ({ mount }) => {
+  const [ref, inView] = useInView()
+
+  return (
+    <>
+      {mount && <div ref={ref} />}
+      {inView.toString()}
+    </>
+  )
+}
+
 test('should create a hook', () => {
   const { getByTestId } = render(<HookComponent />)
   const wrapper = getByTestId('wrapper')
@@ -74,3 +85,14 @@ test('should unmount the hook', () => {
   unmount()
   expect(instance.unobserve).toHaveBeenCalledWith(wrapper)
 })
+
+test('inView should be false when component is unmounted', () => {
+  const { rerender, getByText } = render(
+    <UnmountableRefComponent mount={true} />,
+  )
+  mockAllIsIntersecting(true)
+
+  getByText('true')
+  rerender(<UnmountableRefComponent mount={false} />)
+  getByText('false')
+})

src/useInView.tsx

@@ -43,6 +43,12 @@ export function useInView(
     [options.threshold, options.root, options.rootMargin, options.triggerOnce],
   )
 
+  React.useLayoutEffect(() => {
+    if (!ref.current && state.inView) {
+      setState({ inView: false, entry: undefined })
+    }
+  })
+
   React.useDebugValue(state.inView)
 
   return [setRef, state.inView, state.entry]