fix: broken hook updates

Hooks were comparing against the previous state.inView, without having access to that value. This resulted in hooks never triggering when outside the viewport.

Author: thebuilder

package.json

@@ -37,6 +37,7 @@
   },
   "eslintIgnore": [
     "*.snap",
+    "test-utils.js",
     "dist/**",
     "lib/**",
     "example/**",
@@ -77,15 +78,18 @@
     ],
     "parser": "@typescript-eslint/parser",
     "plugins": [
-      "@typescript-eslint"
+      "@typescript-eslint",
+      "react-hooks"
     ],
     "settings": {
       "react": {
         "version": "detect"
       }
     },
     "rules": {
-      "no-unused-vars": 0
+      "no-unused-vars": 0,
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn"
     }
   },
   "jest": {
@@ -138,6 +142,7 @@
     "eslint-plugin-import": "2.16.0",
     "eslint-plugin-jsx-a11y": "6.x",
     "eslint-plugin-react": "7.x",
+    "eslint-plugin-react-hooks": "^1.5.0",
     "husky": "^1.3.1",
     "intersection-observer": "^0.5.1",
     "jest": "^24.5.0",

src/__tests__/hooks.test.js

@@ -50,6 +50,13 @@ test('should create a hook inView', () => {
   getByText('true')
 })
 
+test('should trigger a hook leaving view', () => {
+  const { getByText } = render(<HookComponent />)
+  mockAllIsIntersecting(true)
+  mockAllIsIntersecting(false)
+  getByText('false')
+})
+
 test('should respect trigger once', () => {
   const { getByText } = render(
     <HookComponent options={{ triggerOnce: true }} />,

src/test-utils.ts

@@ -55,10 +55,9 @@ export function mockIsIntersecting(element: Element, isIntersecting: boolean) {
       {
         isIntersecting,
         target: element,
-        intersectionRatio: isIntersecting ? 1 : -1,
+        intersectionRatio: isIntersecting ? 1 : 0,
       },
     ]
-
     if (act) act(() => cb(entry))
     else cb(entry)
   } else {

src/useInView.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react'
 import { observe, unobserve } from './intersection'
 import { HookResponse, IntersectionOptions } from './typings/types'

yarn.lock

@@ -4252,6 +4252,11 @@ [email protected]:
     has "^1.0.3"
     jsx-ast-utils "^2.0.1"
 
+eslint-plugin-react-hooks@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.5.0.tgz#cdd958cfff55bd5fa4f84db90d1490fb5ca4ae2b"
+  integrity sha512-iwDuWR2ReRgvJsNm8fXPtTKdg78IVQF8I4+am3ntztPf/+nPnWZfArFu6aXpaC75/iCYRrkqI8nPCYkxJstmpA==
+
 [email protected]:
   version "7.12.4"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.12.4.tgz#b1ecf26479d61aee650da612e425c53a99f48c8c"