bugfix: fix #303 (#306)

Author: thebuilder

src/InView.tsx

@@ -84,7 +84,10 @@ export class InView extends React.Component<
   }
 
   handleNode = (node?: Element | null) => {
-    if (this.node) unobserve(this.node)
+    if (this.node) {
+      unobserve(this.node)
+      if (!node) this.setState({ inView: false, entry: undefined })
+    }
     this.node = node ? node : null
     this.observeNode()
   }

src/__tests__/hooks.test.js

@@ -3,10 +3,10 @@ import { render } from '@testing-library/react'
 import { useInView } from '../useInView'
 import { intersectionMockInstance, mockAllIsIntersecting } from '../test-utils'
 
-const HookComponent = ({ options }) => {
+const HookComponent = ({ options, unmount }) => {
   const [ref, inView] = useInView(options)
   return (
-    <div data-testid="wrapper" ref={ref}>
+    <div data-testid="wrapper" ref={!unmount ? ref : undefined}>
       {inView.toString()}
     </div>
   )
@@ -74,3 +74,12 @@ test('should unmount the hook', () => {
   unmount()
   expect(instance.unobserve).toHaveBeenCalledWith(wrapper)
 })
+
+test('inView should be false when component is unmounted', () => {
+  const { rerender, getByText } = render(<HookComponent />)
+  mockAllIsIntersecting(true)
+
+  getByText('true')
+  rerender(<HookComponent unmount />)
+  getByText('false')
+})

src/useInView.tsx

@@ -8,19 +8,22 @@ type State = {
   entry?: IntersectionObserverEntry
 }
 
+const initialState: State = {
+  inView: false,
+  entry: undefined,
+}
+
 export function useInView(
   options: IntersectionOptions = {},
 ): InViewHookResponse {
   const ref = React.useRef<Element>()
-  const [state, setState] = React.useState<State>({
-    inView: false,
-    entry: undefined,
-  })
+  const [state, setState] = React.useState<State>(initialState)
 
   const setRef = React.useCallback(
     node => {
       if (ref.current) {
         unobserve(ref.current)
+        setState(initialState)
       }
       if (node) {
         observe(
@@ -43,7 +46,5 @@ export function useInView(
     [options.threshold, options.root, options.rootMargin, options.triggerOnce],
   )
 
-  React.useDebugValue(state.inView)
-
   return [setRef, state.inView, state.entry]
 }