Fix ref issue with async elements (#35)

* Add dynamic ref story

* Fix ref issue with async elements

Author: ardaogulcan

examples/stories/use-intersection-observer/async-ref.js

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react'
+import { storiesOf } from '@storybook/react'
+
+import { useIntersectionObserver } from 'react-use-observer'
+
+const IntersectionObserverAsyncRefStory = () => {
+  const [visible, setVisible] = useState(false)
+  const [ref, intersectionObserverEntry] = useIntersectionObserver({
+    root: null,
+    rootMargin: '0px',
+    threshold: Array(1 / 0.01)
+      .fill(0.01)
+      .map((current, index) => current * index),
+  })
+
+  const ratio = Math.floor(intersectionObserverEntry.intersectionRatio * 100)
+
+  useEffect(() => {
+    // mimic async nature of data loading
+    setTimeout(() => {
+      setVisible(true)
+    }, 1000)
+  }, [])
+
+  return (
+    <div
+      style={{
+        height: 1500,
+      }}
+    >
+      <p>Scroll Me</p>
+      {visible && (
+        <div
+          ref={ref}
+          style={{
+            position: 'relative',
+            backgroundColor: '#f5f5f5',
+            height: 250,
+            width: 250,
+          }}
+        >
+          <div>{`${ratio}%`}</div>
+          <span>
+            {intersectionObserverEntry instanceof IntersectionObserverEntry
+              ? 'has an observer entry'
+              : 'does nott have an observer entry'}
+          </span>
+          <span
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              right: 0,
+            }}
+          >
+            {`${ratio}%`}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+storiesOf('useIntersectionObserver', module).add('async-ref', () => (
+  <IntersectionObserverAsyncRefStory />
+))

examples/stories/use-intersection-observer/dynamic-ref.js

@@ -0,0 +1,75 @@
+import React, { Fragment } from 'react'
+import { storiesOf } from '@storybook/react'
+
+import { useIntersectionObserver } from 'react-use-observer'
+
+const Box = React.forwardRef(({ ratio, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    style={{
+      position: 'relative',
+      backgroundColor: '#f5f5f5',
+      height: 250,
+      width: 250,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+    {...props}
+  >
+    <span
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+      }}
+    >
+      {`${ratio}%`}
+    </span>
+    {children}
+    <span
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+      }}
+    >
+      {`${ratio}%`}
+    </span>
+  </div>
+))
+
+const dummyArray = new Array(5).fill('')
+
+const DynamicRefIntersectionObserverStory = () => {
+  const [firstRef, firstEntry] = useIntersectionObserver({
+    threshold: [0.5],
+  })
+
+  const ratio = Math.floor((firstEntry ? firstEntry.intersectionRatio : 1) * 100)
+
+  return (
+    <Fragment>
+      <p>Scroll Me</p>
+      <div
+        style={{
+          height: 1500,
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        {dummyArray.map((_, index) => (
+          <Box
+            key={`key${index}`}
+            ref={index === 0 ? firstRef : undefined}
+            ratio={index === 0 ? ratio : 100}
+          />
+        ))}
+      </div>
+    </Fragment>
+  )
+}
+
+storiesOf('useIntersectionObserver', module).add('Dynamic Ref', () => (
+  <DynamicRefIntersectionObserverStory />
+))

examples/yarn.lock

@@ -878,13 +878,6 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.12.5":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
-  integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@^7.1.0", "@babel/template@^7.2.2", "@babel/template@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
@@ -1451,30 +1444,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.2.tgz#3452a24edf9fea138b48fad4a0a028a683da1e40"
   integrity sha512-5tabW/i+9mhrfEOUcLDu2xBPsHJ+X5Orqy9FKpale3SjDA17j5AEpYq5vfy3oAeAHGcvANRCO3NV3d2D6q3NiA==
 
-"@types/prop-types@*":
-  version "15.7.3"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
-  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
-
 "@types/q@^1.5.1":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
-"@types/react@^17.0.0":
-  version "17.0.3"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79"
-  integrity sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/scheduler@*":
-  version "0.16.1"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
-  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
-
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
@@ -3130,11 +3104,6 @@ csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.4.tgz#d585a6062096e324e7187f80e04f92bd0f00e37f"
   integrity sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg==
 
-csstype@^3.0.2:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b"
-  integrity sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==
-
 cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
@@ -3225,11 +3194,6 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
-dequal@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
-  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
-
 des.js@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
@@ -3700,6 +3664,11 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
+fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
 fast-glob@^2.0.2:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -6474,11 +6443,6 @@ regenerator-runtime@^0.13.2:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
   integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
 
-regenerator-runtime@^0.13.4:
-  version "0.13.7"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
-  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
-
 regenerator-transform@^0.13.4:
   version "0.13.4"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.4.tgz#18f6763cf1382c69c36df76c6ce122cc694284fb"
@@ -7566,15 +7530,6 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-deep-compare-effect@^1.2.0:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/use-deep-compare-effect/-/use-deep-compare-effect-1.6.1.tgz#061a0ac5400aa0461e33dddfaa2a98bca873182a"
-  integrity sha512-VB3b+7tFI81dHm8buGyrpxi8yBhzYZdyMX9iBJra7SMFMZ4ci4FJ1vFc1nvChiB1iLv4GfjqaYfvbNEpTT1rFQ==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@types/react" "^17.0.0"
-    dequal "^2.0.2"
-
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

src/useObserver.js

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useState, useCallback } from 'react'
 import useDeepCompareEffect from './helpers/useDeepCompareEffect'
 
 import createObserverPublisher from './helpers/createObserverPublisher'
@@ -15,8 +15,14 @@ export default function useObserver(Observer, { observerOptions, subscribeOption
     }
   }
 
-  const ref = useRef(null)
   const [entry, setEntry] = useState({})
+  const [element, setElement] = useState()
+
+  const ref = useCallback((node) => {
+    if (node !== null) {
+      setElement(node)
+    }
+  }, [])
 
   useDeepCompareEffect(() => {
     if (!publishers) {
@@ -37,8 +43,6 @@ export default function useObserver(Observer, { observerOptions, subscribeOption
       options.set(optionId, publisher)
     }
 
-    const element = ref.current
-
     if (!element) {
       return undefined
     }
@@ -47,7 +51,7 @@ export default function useObserver(Observer, { observerOptions, subscribeOption
     subscribe({ element, options: subscribeOptions }, newEntry => setEntry(newEntry))
 
     return () => unsubscribe(element)
-  }, [Observer, observerOptions, subscribeOptions])
+  }, [element, Observer, observerOptions, subscribeOptions])
 
   return [ref, entry]
 }

src/useObserver.test.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { renderHook } from 'react-hooks-testing-library'
 import { render, act } from 'react-testing-library'
 
@@ -160,3 +160,36 @@ it('should update entry for element on change', () => {
   expect(element1.textContent).toBe('test1')
   expect(element2.textContent).toBe('test2')
 })
+
+it('should work with async elements', () => {
+  jest.useFakeTimers()
+  const TestComp = () => {
+    const [ref] = useObserver(MockObserver)
+    const [visible, setVisible] = useState(false)
+    useEffect(() => {
+      // mimic async nature of data loading
+      setTimeout(() => {
+        setVisible(true)
+      }, 1000)
+    }, [])
+
+    return (
+      <div>
+        {visible && <div ref={ref} />}
+      </div>
+    )
+  }
+
+  const { unmount, container } = render(<TestComp />)
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
+  const element = container.firstChild.firstChild
+
+  expect(mockObserve).toBeCalledWith(element, undefined)
+  unmount()
+  expect(mockUnobserve).toBeCalledWith(element)
+  jest.useRealTimers()
+})