From 2d14d0e2dbe845edb5836199ce79928395c079a0 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Wed, 28 Feb 2024 01:35:25 +0000
Subject: [PATCH] Remove dangerous derived state from RichText (#3007)

* Remove facet resolution from RichText

* Remove derived state
---
 src/components/RichText.tsx               | 25 ++++-------------------
 src/view/screens/Storybook/Typography.tsx |  6 ++++--
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/src/components/RichText.tsx b/src/components/RichText.tsx
index 22391cb2..3d5f0802 100644
--- a/src/components/RichText.tsx
+++ b/src/components/RichText.tsx
@@ -7,7 +7,6 @@ import {atoms as a, TextStyleProp, flatten, useTheme, web, native} from '#/alf'
 import {InlineLink} from '#/components/Link'
 import {Text, TextProps} from '#/components/Typography'
 import {toShortUrl} from 'lib/strings/url-helpers'
-import {getAgent} from '#/state/session'
 import {TagMenu, useTagMenuControl} from '#/components/TagMenu'
 import {isNative} from '#/platform/detection'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -20,7 +19,6 @@ export function RichText({
   style,
   numberOfLines,
   disableLinks,
-  resolveFacets = false,
   selectable,
   enableTags = false,
   authorHandle,
@@ -30,31 +28,16 @@ export function RichText({
     testID?: string
     numberOfLines?: number
     disableLinks?: boolean
-    resolveFacets?: boolean
     enableTags?: boolean
     authorHandle?: string
   }) {
-  const detected = React.useRef(false)
-  const [richText, setRichText] = React.useState<RichTextAPI>(() =>
-    value instanceof RichTextAPI ? value : new RichTextAPI({text: value}),
+  const richText = React.useMemo(
+    () =>
+      value instanceof RichTextAPI ? value : new RichTextAPI({text: value}),
+    [value],
   )
   const styles = [a.leading_snug, flatten(style)]
 
-  React.useEffect(() => {
-    if (!resolveFacets) return
-
-    async function detectFacets() {
-      const rt = new RichTextAPI({text: richText.text})
-      await rt.detectFacets(getAgent())
-      setRichText(rt)
-    }
-
-    if (!detected.current) {
-      detected.current = true
-      detectFacets()
-    }
-  }, [richText, setRichText, resolveFacets])
-
   const {text, facets} = richText
 
   if (!facets?.length) {
diff --git a/src/view/screens/Storybook/Typography.tsx b/src/view/screens/Storybook/Typography.tsx
index 8ee4270b..f0d67c52 100644
--- a/src/view/screens/Storybook/Typography.tsx
+++ b/src/view/screens/Storybook/Typography.tsx
@@ -22,12 +22,14 @@ export function Typography() {
       <Text style={[a.text_2xs]}>atoms.text_2xs</Text>
 
       <RichText
-        resolveFacets
+        // TODO: This only supports already resolved facets.
+        // Resolving them on read is bad anyway.
         value={`This is rich text. It can have mentions like @bsky.app or links like https://bsky.social`}
       />
       <RichText
         selectable
-        resolveFacets
+        // TODO: This only supports already resolved facets.
+        // Resolving them on read is bad anyway.
         value={`This is rich text. It can have mentions like @bsky.app or links like https://bsky.social`}
         style={[a.text_xl]}
       />