[Persisted] Make broadcast subscriptions granular by key (#4874)

* Add fast path for guaranteed noop updates

* Change persisted.onUpdate() API to take a key

* Implement granular broadcast listeners

src/state/preferences/alt-text-required.tsx

@@ -26,9 +26,12 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   )
 
   React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      setState(persisted.get('requireAltTextEnabled'))
-    })
+    return persisted.onUpdate(
+      'requireAltTextEnabled',
+      nextRequireAltTextEnabled => {
+        setState(nextRequireAltTextEnabled)
+      },
+    )
   }, [setStateWrapped])
 
   return (

src/state/preferences/autoplay.tsx

@@ -24,8 +24,8 @@ export function Provider({children}: {children: React.ReactNode}) {
   )
 
   React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      setState(Boolean(persisted.get('disableAutoplay')))
+    return persisted.onUpdate('disableAutoplay', nextDisableAutoplay => {
+      setState(Boolean(nextDisableAutoplay))
     })
   }, [setStateWrapped])
 

src/state/preferences/disable-haptics.tsx

@@ -24,8 +24,8 @@ export function Provider({children}: {children: React.ReactNode}) {
   )
 
   React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      setState(Boolean(persisted.get('disableHaptics')))
+    return persisted.onUpdate('disableHaptics', nextDisableHaptics => {
+      setState(Boolean(nextDisableHaptics))
     })
   }, [setStateWrapped])
 

src/state/preferences/external-embeds-prefs.tsx

@@ -35,8 +35,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   )
 
   React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      setState(persisted.get('externalEmbeds'))
+    return persisted.onUpdate('externalEmbeds', nextExternalEmbeds => {
+      setState(nextExternalEmbeds)
     })
   }, [setStateWrapped])
 

src/state/preferences/hidden-posts.tsx

@@ -44,8 +44,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   )
 
   React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      setState(persisted.get('hiddenPosts'))
+    return persisted.onUpdate('hiddenPosts', nextHiddenPosts => {
+      setState(nextHiddenPosts)
     })
   }, [setStateWrapped])
 

src/state/preferences/in-app-browser.tsx

@@ -34,8 +34,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   )
 
   React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      setState(persisted.get('useInAppBrowser'))
+    return persisted.onUpdate('useInAppBrowser', nextUseInAppBrowser => {
+      setState(nextUseInAppBrowser)
     })
   }, [setStateWrapped])
 

src/state/preferences/kawaii.tsx

@@ -21,8 +21,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   )
 
   React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      setState(persisted.get('kawaii'))
+    return persisted.onUpdate('kawaii', nextKawaii => {
+      setState(nextKawaii)
     })
   }, [setStateWrapped])
 

src/state/preferences/languages.tsx

@@ -43,8 +43,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   )
 
   React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      setState(persisted.get('languagePrefs'))
+    return persisted.onUpdate('languagePrefs', nextLanguagePrefs => {
+      setState(nextLanguagePrefs)
     })
   }, [setStateWrapped])
 

src/state/preferences/large-alt-badge.tsx

@@ -26,9 +26,12 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   )
 
   React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      setState(persisted.get('largeAltBadgeEnabled'))
-    })
+    return persisted.onUpdate(
+      'largeAltBadgeEnabled',
+      nextLargeAltBadgeEnabled => {
+        setState(nextLargeAltBadgeEnabled)
+      },
+    )
   }, [setStateWrapped])
 
   return (

src/state/preferences/used-starter-packs.tsx

@@ -19,9 +19,12 @@ export function Provider({children}: {children: React.ReactNode}) {
   }
 
   React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      setState(persisted.get('hasCheckedForStarterPack'))
-    })
+    return persisted.onUpdate(
+      'hasCheckedForStarterPack',
+      nextHasCheckedForStarterPack => {
+        setState(nextHasCheckedForStarterPack)
+      },
+    )
   }, [])
 
   return (