Pass ref.current to useInViewEffect

extensions/amp-timeago/0.2/timeago.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {createElement, useState} from '../../../src/preact';
+import {createElement, useRef, useState} from '../../../src/preact';
 import {timeago} from '../../../third_party/timeagojs/timeago';
 import {useInViewEffect} from '../../../src/preact/use-in-view';
 import {useResourcesNotify} from '../../../src/preact/utils';
@@ -27,9 +27,15 @@ export function Timeago(props) {
   const {0: timestamp, 1: setTimestamp} = useState(
     getFuzzyTimestampValue(props)
   );
-  const ref = useInViewEffect(() => {
-    setTimestamp(getFuzzyTimestampValue(props));
-  });
+
+  const ref = useRef(null);
+  useInViewEffect(
+    ref.current,
+    () => {
+      setTimestamp(getFuzzyTimestampValue(props));
+    },
+    [props]
+  );
 
   useResourcesNotify();
   return createElement('time', {datetime: props['datetime'], ref}, timestamp);

src/preact/use-in-view.js

@@ -17,37 +17,32 @@
 import {useEffect, useLayoutEffect, useRef, useState} from './index';
 
 /**
+ * @param {HTMLElement} node
  * @param {function():(function():undefined|undefined)} effect
  * @param {!Array<*>=} opt_deps
  * @return {object} ref
  */
-export function useInViewEffect(effect, opt_deps) {
-  const ref = useRef(null);
-  const {0: entries, 1: set} = useState([]);
+export function useInViewEffect(node, effect, opt_deps) {
+  const {0: isIntersecting, 1: set} = useState(true);
   const observerRef = useRef(null);
   if (observerRef.current === null) {
-    observerRef.current = new IntersectionObserver(set);
+    observerRef.current = new IntersectionObserver(entries => {
+      const last = entries[entries.length - 1];
+      set(last.isIntersecting);
+    });
   }
 
   useLayoutEffect(() => {
-    // This must be done in the callback for two reasons:
-    // (1) ref.current changes between the call to useIntersect and this call
-    // (2) any updates to ref should trigger the callback to be rerun
-    const {current: node} = ref;
     const {current: observer} = observerRef;
     if (node) {
       observer.observe(node);
     }
     return () => observer.disconnect();
-  }, [ref.current, observerRef.current]);
+  }, [node, observerRef.current]);
 
-  const last =
-    entries.length > 0 ? entries[entries.length - 1] : {isIntersecting: false};
   useEffect(() => {
-    if (last.isIntersecting) {
+    if (isIntersecting) {
       effect();
     }
-  }, [last.isIntersecting].concat(opt_deps));
-
-  return ref;
+  }, [node, isIntersecting].concat(opt_deps));
 }