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

@@ -128,7 +128,7 @@
     "@typescript-eslint/parser": "^1.4.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
-    "babel-jest": "^24.4.0",
+    "babel-jest": "^24.5.0",
     "babel-loader": "^8.0.5",
     "concurrently": "4.1.0",
     "coveralls": "^3.0.3",
@@ -140,8 +140,8 @@
     "eslint-plugin-react": "7.x",
     "husky": "^1.3.1",
     "intersection-observer": "^0.5.1",
-    "jest": "^24.4.0",
-    "jest-dom": "^3.1.1",
+    "jest": "^24.5.0",
+    "jest-dom": "^3.1.3",
     "lint-staged": "^8.1.5",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.16.2",

src/useInView.tsx

@@ -14,39 +14,32 @@ export function useInView(options: IntersectionOptions = {}): HookResponse {
     entry: undefined,
   })
 
-  React.useEffect(
-    () => {
-      if (!ref) return
-      observe(
-        ref,
-        (inView, intersection) => {
-          // Only trigger a state update if inView has changed.
-          // This prevents an unnecessary extra state update during mount, when the element stats outside the viewport
-          if (inView !== state.inView || inView) {
-            setState({ inView, entry: intersection })
+  React.useEffect(() => {
+    if (!ref) return
+    observe(
+      ref,
+      (inView, intersection) => {
+        setState({ inView, entry: intersection })
 
-            if (inView && options.triggerOnce) {
-              // If it should only trigger once, unobserve the element after it's inView
-              unobserve(ref)
-            }
-          }
-        },
-        options,
-      )
+        if (inView && options.triggerOnce) {
+          // If it should only trigger once, unobserve the element after it's inView
+          unobserve(ref)
+        }
+      },
+      options,
+    )
 
-      return () => {
-        unobserve(ref)
-      }
-    },
-    [
-      // Only create a new Observer instance if the ref or any of the options have been changed.
-      ref,
-      options.threshold,
-      options.root,
-      options.rootMargin,
-      options.triggerOnce,
-    ],
-  )
+    return () => {
+      unobserve(ref)
+    }
+  }, [
+    // Only create a new Observer instance if the ref or any of the options have been changed.
+    ref,
+    options.threshold,
+    options.root,
+    options.rootMargin,
+    options.triggerOnce,
+  ])
 
   React.useDebugValue(state.inView)