Migrate useVisibilityChange to use uSES

Author: tylermcginnis

index.js

@@ -1144,27 +1144,30 @@ export function useToggle(initialValue) {
   return [on, handleToggle];
 }
 
-export function useVisibilityChange() {
-  const [documentVisible, setDocumentVisibility] = React.useState(true);
+const useVisibilityChangeSubscribe = (callback) => {
+  document.addEventListener("visibilitychange", callback);
 
-  React.useEffect(() => {
-    const handleChange = () => {
-      if (document.visibilityState !== "visible") {
-        setDocumentVisibility(false);
-      } else {
-        setDocumentVisibility(true);
-      }
-    };
-    handleChange();
+  return () => {
+    document.removeEventListener("visibilitychange", callback);
+  };
+};
 
-    document.addEventListener("visibilitychange", handleChange);
+const getVisibilityChangeSnapshot = () => {
+  return document.visibilityState;
+};
 
-    return () => {
-      document.removeEventListener("visibilitychange", handleChange);
-    };
-  }, []);
+const getVisibilityChangeServerSnapshot = () => {
+  throw Error("useVisibilityChange is a client-only hook");
+};
+
+export function useVisibilityChange() {
+  const visibilityState = React.useSyncExternalStore(
+    useVisibilityChangeSubscribe,
+    getVisibilityChangeSnapshot,
+    getVisibilityChangeServerSnapshot
+  );
 
-  return documentVisible;
+  return visibilityState === "visible";
 }
 
 export function useWindowScroll() {