Do less work (#1953)

src/state/cache/post-shadow.ts

@@ -1,4 +1,4 @@
-import {useEffect, useState, useCallback, useRef} from 'react'
+import {useEffect, useState, useMemo, useCallback, useRef} from 'react'
 import EventEmitter from 'eventemitter3'
 import {AppBskyFeedDefs} from '@atproto/api'
 import {Shadow} from './types'
@@ -55,9 +55,11 @@ export function usePostShadow(
     firstRun.current = false
   }, [post])
 
-  return state.ts > ifAfterTS
-    ? mergeShadow(post, state.value)
-    : {...post, isShadowed: true}
+  return useMemo(() => {
+    return state.ts > ifAfterTS
+      ? mergeShadow(post, state.value)
+      : {...post, isShadowed: true}
+  }, [post, state, ifAfterTS])
 }
 
 export function updatePostShadow(uri: string, value: Partial<PostShadow>) {

src/state/cache/profile-shadow.ts

@@ -1,4 +1,4 @@
-import {useEffect, useState, useCallback, useRef} from 'react'
+import {useEffect, useState, useMemo, useCallback, useRef} from 'react'
 import EventEmitter from 'eventemitter3'
 import {AppBskyActorDefs} from '@atproto/api'
 import {Shadow} from './types'
@@ -56,9 +56,11 @@ export function useProfileShadow(
     firstRun.current = false
   }, [profile])
 
-  return state.ts > ifAfterTS
-    ? mergeShadow(profile, state.value)
-    : {...profile, isShadowed: true}
+  return useMemo(() => {
+    return state.ts > ifAfterTS
+      ? mergeShadow(profile, state.value)
+      : {...profile, isShadowed: true}
+  }, [profile, state, ifAfterTS])
 }
 
 export function updateProfileShadow(

src/state/queries/preferences/index.ts

@@ -1,11 +1,6 @@
-import {useEffect, useState} from 'react'
+import {useMemo} from 'react'
 import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query'
-import {
-  LabelPreference,
-  BskyFeedViewPreference,
-  ModerationOpts,
-} from '@atproto/api'
-import isEqual from 'lodash.isequal'
+import {LabelPreference, BskyFeedViewPreference} from '@atproto/api'
 
 import {track} from '#/lib/analytics/analytics'
 import {getAge} from '#/lib/strings/time'
@@ -91,21 +86,16 @@ export function usePreferencesQuery() {
 
 export function useModerationOpts() {
   const {currentAccount} = useSession()
-  const [opts, setOpts] = useState<ModerationOpts | undefined>()
   const prefs = usePreferencesQuery()
-  useEffect(() => {
+  const opts = useMemo(() => {
     if (!prefs.data) {
       return
     }
-    // only update this hook when the moderation options change
-    const newOpts = getModerationOpts({
+    return getModerationOpts({
       userDid: currentAccount?.did || '',
       preferences: prefs.data,
     })
-    if (!isEqual(opts, newOpts)) {
-      setOpts(newOpts)
-    }
-  }, [prefs.data, currentAccount, opts, setOpts])
+  }, [currentAccount?.did, prefs.data])
   return opts
 }
 

src/view/com/post-thread/PostThreadItem.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react'
+import React, {memo, useMemo} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {
   AtUri,
@@ -118,7 +118,7 @@ function PostThreadItemDeleted() {
   )
 }
 
-function PostThreadItemLoaded({
+let PostThreadItemLoaded = ({
   post,
   record,
   richText,
@@ -144,12 +144,12 @@ function PostThreadItemLoaded({
   showParentReplyLine?: boolean
   hasPrecedingItem: boolean
   onPostReply: () => void
-}) {
+}): React.ReactNode => {
   const pal = usePalette('default')
   const langPrefs = useLanguagePrefs()
   const {openComposer} = useComposerControls()
   const [limitLines, setLimitLines] = React.useState(
-    countLines(richText?.text) >= MAX_POST_LINES,
+    () => countLines(richText?.text) >= MAX_POST_LINES,
   )
   const styles = useStyles()
   const hasEngagement = post.likeCount || post.repostCount
@@ -565,6 +565,7 @@ function PostThreadItemLoaded({
     )
   }
 }
+PostThreadItemLoaded = memo(PostThreadItemLoaded)
 
 function PostOuterWrapper({
   post,

src/view/com/post/Post.tsx

@@ -99,7 +99,7 @@ function PostInner({
   const pal = usePalette('default')
   const {openComposer} = useComposerControls()
   const [limitLines, setLimitLines] = useState(
-    countLines(richText?.text) >= MAX_POST_LINES,
+    () => countLines(richText?.text) >= MAX_POST_LINES,
   )
   const itemUrip = new AtUri(post.uri)
   const itemHref = makeProfileLink(post.author, 'post', itemUrip.rkey)

src/view/com/posts/FeedItem.tsx

@@ -106,7 +106,7 @@ let FeedItemInner = ({
   const pal = usePalette('default')
   const {track} = useAnalytics()
   const [limitLines, setLimitLines] = useState(
-    countLines(richText.text) >= MAX_POST_LINES,
+    () => countLines(richText.text) >= MAX_POST_LINES,
   )
 
   const href = useMemo(() => {