From cb74b0a37c223a70d60ac8a373557bc770e338f7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 6 Feb 2023 15:39:17 -0600
Subject: [PATCH] useOnScreen: memoize IntersectionObserver, fix types

---
 app/soapbox/hooks/useOnScreen.ts | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/hooks/useOnScreen.ts b/app/soapbox/hooks/useOnScreen.ts
index 883fde698..de9aa23b2 100644
--- a/app/soapbox/hooks/useOnScreen.ts
+++ b/app/soapbox/hooks/useOnScreen.ts
@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
-export const useOnScreen = (ref: React.MutableRefObject<HTMLElement>) =>  {
-  const [isIntersecting, setIntersecting] = React.useState(false);
+/** Detect whether a given element is on the screen. */
+// https://stackoverflow.com/a/64892655
+export const useOnScreen = <T>(ref: React.RefObject<T & Element>) =>  {
+  const [isIntersecting, setIntersecting] = useState(false);
 
-  const observer = new IntersectionObserver(
-    ([entry]) => setIntersecting(entry.isIntersecting),
-  );
+  const observer = useMemo(() => {
+    return new IntersectionObserver(
+      ([entry]) => setIntersecting(entry.isIntersecting),
+    );
+  }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (ref.current) {
       observer.observe(ref.current);
     }