[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

2 files changed, 15 insertions, 7 deletions

diff --git a/src/state/shell/color-mode.tsx b/src/state/shell/color-mode.tsx
index f3339d240..47b936c0b 100644
--- a/src/state/shell/color-mode.tsx
+++ b/src/state/shell/color-mode.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+
 import * as persisted from '#/state/persisted'
 
 type StateContext = {
@@ -43,10 +44,16 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   )
 
   React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      setColorMode(persisted.get('colorMode'))
-      setDarkTheme(persisted.get('darkTheme'))
+    const unsub1 = persisted.onUpdate('darkTheme', nextDarkTheme => {
+      setDarkTheme(nextDarkTheme)
+    })
+    const unsub2 = persisted.onUpdate('colorMode', nextColorMode => {
+      setColorMode(nextColorMode)
     })
+    return () => {
+      unsub1()
+      unsub2()
+    }
   }, [])
 
   return (
diff --git a/src/state/shell/onboarding.tsx b/src/state/shell/onboarding.tsx
index 6a18b461f..d3a8fec46 100644
--- a/src/state/shell/onboarding.tsx
+++ b/src/state/shell/onboarding.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
-import * as persisted from '#/state/persisted'
+
 import {track} from '#/lib/analytics/analytics'
+import * as persisted from '#/state/persisted'
 
 export const OnboardingScreenSteps = {
   Welcome: 'Welcome',
@@ -81,13 +82,13 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   )
 
   React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      const next = persisted.get('onboarding').step
+    return persisted.onUpdate('onboarding', nextOnboarding => {
+      const next = nextOnboarding.step
       // TODO we've introduced a footgun
       if (state.step !== next) {
         dispatch({
           type: 'set',
-          step: persisted.get('onboarding').step as OnboardingStep,
+          step: nextOnboarding.step as OnboardingStep,
         })
       }
     })