Give explicit names to MobX observer components (#1413)

* Consider observer(...) as components

* Add display names to MobX observers

* Temporarily suppress nested components

* Suppress new false positives for react/prop-types

.eslintrc.js

@@ -26,4 +26,7 @@ module.exports = {
     '*.html',
     'bskyweb',
   ],
+  settings: {
+    componentWrapperFunctions: ['observer'],
+  },
 }

src/App.native.tsx

@@ -19,7 +19,7 @@ import {handleLink} from './Navigation'
 
 SplashScreen.preventAutoHideAsync()
 
-const App = observer(() => {
+const App = observer(function AppImpl() {
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
     undefined,
   )

src/App.web.tsx

@@ -10,7 +10,7 @@ import {ToastContainer} from './view/com/util/Toast.web'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {observer} from 'mobx-react-lite'
 
-const App = observer(() => {
+const App = observer(function AppImpl() {
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
     undefined,
   )

src/Navigation.tsx

@@ -330,7 +330,7 @@ function NotificationsTabNavigator() {
   )
 }
 
-const MyProfileTabNavigator = observer(() => {
+const MyProfileTabNavigator = observer(function MyProfileTabNavigatorImpl() {
   const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark)
   const store = useStores()
   return (
@@ -360,7 +360,7 @@ const MyProfileTabNavigator = observer(() => {
  * The FlatNavigator is used by Web to represent the routes
  * in a single ("flat") stack.
  */
-const FlatNavigator = observer(() => {
+const FlatNavigator = observer(function FlatNavigatorImpl() {
   const pal = usePalette('default')
   const unreadCountLabel = useStores().me.notifications.unreadCountLabel
   const title = (page: string) => bskyTitle(page, unreadCountLabel)

src/view/com/auth/LoggedOut.tsx

@@ -16,7 +16,7 @@ enum ScreenState {
   S_CreateAccount,
 }
 
-export const LoggedOut = observer(() => {
+export const LoggedOut = observer(function LoggedOutImpl() {
   const pal = usePalette('default')
   const store = useStores()
   const {screen} = useAnalytics()

src/view/com/auth/Onboarding.tsx

@@ -8,7 +8,7 @@ import {useStores} from 'state/index'
 import {Welcome} from './onboarding/Welcome'
 import {RecommendedFeeds} from './onboarding/RecommendedFeeds'
 
-export const Onboarding = observer(() => {
+export const Onboarding = observer(function OnboardingImpl() {
   const pal = usePalette('default')
   const store = useStores()
 

src/view/com/auth/create/CreateAccount.tsx

@@ -20,8 +20,11 @@ import {Step1} from './Step1'
 import {Step2} from './Step2'
 import {Step3} from './Step3'
 
-export const CreateAccount = observer(
+export const CreateAccount = observer(function CreateAccountImpl({
-  ({onPressBack}: {onPressBack: () => void}) => {
+  onPressBack,
+}: {
+  onPressBack: () => void
+}) {
   const {track, screen} = useAnalytics()
   const pal = usePalette('default')
   const store = useStores()
@@ -126,8 +129,7 @@ export const CreateAccount = observer(
       </ScrollView>
     </LoggedOutLayout>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   stepContainer: {

src/view/com/auth/create/Step1.tsx

@@ -20,7 +20,11 @@ import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags'
  * @field Bluesky (default)
  * @field Other (staging, local dev, your own PDS, etc.)
  */
-export const Step1 = observer(({model}: {model: CreateAccountModel}) => {
+export const Step1 = observer(function Step1Impl({
+  model,
+}: {
+  model: CreateAccountModel
+}) {
   const pal = usePalette('default')
   const [isDefaultSelected, setIsDefaultSelected] = React.useState(true)
 

src/view/com/auth/create/Step2.tsx

@@ -21,7 +21,11 @@ import {useStores} from 'state/index'
  * @field Birth date
  * @readonly Terms of service & privacy policy
  */
-export const Step2 = observer(({model}: {model: CreateAccountModel}) => {
+export const Step2 = observer(function Step2Impl({
+  model,
+}: {
+  model: CreateAccountModel
+}) {
   const pal = usePalette('default')
   const store = useStores()
 

src/view/com/auth/create/Step3.tsx

@@ -13,7 +13,11 @@ import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
 /** STEP 3: Your user handle
  * @field User handle
  */
-export const Step3 = observer(({model}: {model: CreateAccountModel}) => {
+export const Step3 = observer(function Step3Impl({
+  model,
+}: {
+  model: CreateAccountModel
+}) {
   const pal = usePalette('default')
   return (
     <View>

src/view/com/auth/onboarding/RecommendedFeeds.tsx

@@ -15,7 +15,9 @@ import {RECOMMENDED_FEEDS} from 'lib/constants'
 type Props = {
   next: () => void
 }
-export const RecommendedFeeds = observer(({next}: Props) => {
+export const RecommendedFeeds = observer(function RecommendedFeedsImpl({
+  next,
+}: Props) {
   const pal = usePalette('default')
   const {isTabletOrMobile} = useWebMediaQueries()
 

src/view/com/auth/onboarding/RecommendedFeedsItem.tsx

@@ -13,8 +13,13 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {makeRecordUri} from 'lib/strings/url-helpers'
 import {sanitizeHandle} from 'lib/strings/handles'
 
-export const RecommendedFeedsItem = observer(
+export const RecommendedFeedsItem = observer(function RecommendedFeedsItemImpl({
-  ({did, rkey}: {did: string; rkey: string}) => {
+  did,
+  rkey,
+}: {
+  did: string
+  rkey: string
+}) {
   const {isMobile} = useWebMediaQueries()
   const pal = usePalette('default')
   const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey)
@@ -138,5 +143,4 @@ export const RecommendedFeedsItem = observer(
       </View>
     </View>
   )
-  },
+})
-)

src/view/com/auth/onboarding/WelcomeDesktop.tsx

@@ -14,7 +14,9 @@ type Props = {
   skip: () => void
 }
 
-export const WelcomeDesktop = observer(({next}: Props) => {
+export const WelcomeDesktop = observer(function WelcomeDesktopImpl({
+  next,
+}: Props) {
   const pal = usePalette('default')
   const horizontal = useMediaQuery({minWidth: 1300})
   const title = (

src/view/com/auth/onboarding/WelcomeMobile.tsx

@@ -13,7 +13,10 @@ type Props = {
   skip: () => void
 }
 
-export const WelcomeMobile = observer(({next, skip}: Props) => {
+export const WelcomeMobile = observer(function WelcomeMobileImpl({
+  next,
+  skip,
+}: Props) {
   const pal = usePalette('default')
 
   return (

src/view/com/auth/withAuthRequired.tsx

@@ -17,7 +17,7 @@ import {STATUS_PAGE_URL} from 'lib/constants'
 export const withAuthRequired = <P extends object>(
   Component: React.ComponentType<P>,
 ): React.FC<P> =>
-  observer((props: P) => {
+  observer(function AuthRequired(props: P) {
     const store = useStores()
     if (store.session.isResumingSession) {
       return <Loading />

src/view/com/composer/photos/Gallery.tsx

@@ -16,7 +16,7 @@ interface Props {
   gallery: GalleryModel
 }
 
-export const Gallery = observer(function ({gallery}: Props) {
+export const Gallery = observer(function GalleryImpl({gallery}: Props) {
   const store = useStores()
   const pal = usePalette('default')
   const {isMobile} = useWebMediaQueries()

src/view/com/composer/text-input/mobile/Autocomplete.tsx

@@ -8,14 +8,13 @@ import {Text} from 'view/com/util/text/Text'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {useGrapheme} from '../hooks/useGrapheme'
 
-export const Autocomplete = observer(
+export const Autocomplete = observer(function AutocompleteImpl({
-  ({
   view,
   onSelect,
 }: {
   view: UserAutocompleteModel
   onSelect: (item: string) => void
-  }) => {
+}) {
   const pal = usePalette('default')
   const positionInterp = useAnimatedValue(0)
   const {getGraphemeString} = useGrapheme()
@@ -90,8 +89,7 @@ export const Autocomplete = observer(
       ) : null}
     </Animated.View>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   container: {

src/view/com/feeds/CustomFeed.tsx

@@ -15,8 +15,7 @@ import {AtUri} from '@atproto/api'
 import * as Toast from 'view/com/util/Toast'
 import {sanitizeHandle} from 'lib/strings/handles'
 
-export const CustomFeed = observer(
+export const CustomFeed = observer(function CustomFeedImpl({
-  ({
   item,
   style,
   showSaveBtn = false,
@@ -28,7 +27,7 @@ export const CustomFeed = observer(
   showSaveBtn?: boolean
   showDescription?: boolean
   showLikes?: boolean
-  }) => {
+}) {
   const store = useStores()
   const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
@@ -127,8 +126,7 @@ export const CustomFeed = observer(
       ) : null}
     </Pressable>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   container: {

src/view/com/lists/ListItems.tsx

@@ -35,8 +35,7 @@ const EMPTY_ITEM = {_reactKey: '__empty__'}
 const ERROR_ITEM = {_reactKey: '__error__'}
 const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
 
-export const ListItems = observer(
+export const ListItems = observer(function ListItemsImpl({
-  ({
   list,
   style,
   scrollElRef,
@@ -62,7 +61,7 @@ export const ListItems = observer(
   renderEmptyState?: () => JSX.Element
   testID?: string
   headerOffset?: number
-  }) => {
+}) {
   const pal = usePalette('default')
   const store = useStores()
   const {track} = useAnalytics()
@@ -260,11 +259,9 @@ export const ListItems = observer(
       )}
     </View>
   )
-  },
+})
-)
 
-const ListHeader = observer(
+const ListHeader = observer(function ListHeaderImpl({
-  ({
   list,
   isOwner,
   onToggleSubscribed,
@@ -280,7 +277,7 @@ const ListHeader = observer(
   onPressDeleteList: () => void
   onPressShareList: () => void
   onPressReportList: () => void
-  }) => {
+}) {
   const pal = usePalette('default')
   const store = useStores()
   const {isDesktop} = useWebMediaQueries()
@@ -337,8 +334,7 @@ const ListHeader = observer(
       </View>
       <View
         style={{flexDirection: 'row', paddingHorizontal: isDesktop ? 16 : 6}}>
-          <View
+        <View style={[styles.fakeSelectorItem, {borderColor: pal.colors.link}]}>
-            style={[styles.fakeSelectorItem, {borderColor: pal.colors.link}]}>
           <Text type="md-medium" style={[pal.text]}>
             Muted users
           </Text>
@@ -346,8 +342,7 @@ const ListHeader = observer(
       </View>
     </>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   header: {

src/view/com/lists/ListsList.tsx

@@ -30,8 +30,7 @@ const EMPTY_ITEM = {_reactKey: '__empty__'}
 const ERROR_ITEM = {_reactKey: '__error__'}
 const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
 
-export const ListsList = observer(
+export const ListsList = observer(function ListsListImpl({
-  ({
   listsList,
   showAddBtns,
   style,
@@ -53,7 +52,7 @@ export const ListsList = observer(
   renderEmptyState?: () => JSX.Element
   testID?: string
   headerOffset?: number
-  }) => {
+}) {
   const pal = usePalette('default')
   const {track} = useAnalytics()
   const [isRefreshing, setIsRefreshing] = React.useState(false)
@@ -195,8 +194,7 @@ export const ListsList = observer(
       )}
     </View>
   )
-  },
+})
-)
 
 function CreateNewItem({onPress}: {onPress: () => void}) {
   const pal = usePalette('default')

src/view/com/modals/ContentFilteringSettings.tsx

@@ -17,7 +17,8 @@ import * as Toast from '../util/Toast'
 
 export const snapPoints = ['90%']
 
-export const Component = observer(({}: {}) => {
+export const Component = observer(
+  function ContentFilteringSettingsImpl({}: {}) {
     const store = useStores()
     const {isMobile} = useWebMediaQueries()
     const pal = usePalette('default')
@@ -35,7 +36,9 @@ export const Component = observer(({}: {}) => {
           !store.preferences.adultContentEnabled,
         )
       } catch (e) {
-      Toast.show('There was an issue syncing your preferences with the server')
+        Toast.show(
+          'There was an issue syncing your preferences with the server',
+        )
         store.log.error('Failed to update preferences with server', {e})
       }
     }, [store])
@@ -115,17 +118,17 @@ export const Component = observer(({}: {}) => {
         </View>
       </View>
     )
-})
+  },
+)
 
 // TODO: Refactor this component to pass labels down to each tab
-const ContentLabelPref = observer(
+const ContentLabelPref = observer(function ContentLabelPrefImpl({
-  ({
   group,
   disabled,
 }: {
   group: keyof typeof CONFIGURABLE_LABEL_GROUPS
   disabled?: boolean
-  }) => {
+}) {
   const store = useStores()
   const pal = usePalette('default')
 
@@ -168,8 +171,7 @@ const ContentLabelPref = observer(
       )}
     </View>
   )
-  },
+})
-)
 
 interface SelectGroupProps {
   current: LabelPreference

src/view/com/modals/EditImage.tsx

@@ -46,7 +46,10 @@ interface Props {
   gallery: GalleryModel
 }
 
-export const Component = observer(function ({image, gallery}: Props) {
+export const Component = observer(function EditImageImpl({
+  image,
+  gallery,
+}: Props) {
   const pal = usePalette('default')
   const theme = useTheme()
   const store = useStores()

src/view/com/modals/InviteCodes.tsx

@@ -79,8 +79,15 @@ export function Component({}: {}) {
   )
 }
 
-const InviteCode = observer(
+const InviteCode = observer(function InviteCodeImpl({
-  ({testID, code, used}: {testID: string; code: string; used?: boolean}) => {
+  testID,
+  code,
+  used,
+}: {
+  testID: string
+  code: string
+  used?: boolean
+}) {
   const pal = usePalette('default')
   const store = useStores()
   const {invitesAvailable} = store.me
@@ -121,8 +128,7 @@ const InviteCode = observer(
       )}
     </TouchableOpacity>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   container: {

src/view/com/modals/ListAddRemoveUser.tsx

@@ -24,8 +24,7 @@ import isEqual from 'lodash.isequal'
 
 export const snapPoints = ['fullscreen']
 
-export const Component = observer(
+export const Component = observer(function ListAddRemoveUserImpl({
-  ({
   subject,
   displayName,
   onUpdate,
@@ -33,14 +32,14 @@ export const Component = observer(
   subject: string
   displayName: string
   onUpdate?: () => void
-  }) => {
+}) {
   const store = useStores()
   const pal = usePalette('default')
   const palPrimary = usePalette('primary')
   const palInverted = usePalette('inverted')
-    const [originalSelections, setOriginalSelections] = React.useState<
+  const [originalSelections, setOriginalSelections] = React.useState<string[]>(
-      string[]
+    [],
-    >([])
+  )
   const [selected, setSelected] = React.useState<string[]>([])
   const [membershipsLoaded, setMembershipsLoaded] = React.useState(false)
 
@@ -132,8 +131,7 @@ export const Component = observer(
               {sanitizeDisplayName(list.name)}
             </Text>
             <Text type="md" style={[pal.textLight]} numberOfLines={1}>
-                {list.purpose === 'app.bsky.graph.defs#modlist' && 'Mute list'}{' '}
+              {list.purpose === 'app.bsky.graph.defs#modlist' && 'Mute list'} by{' '}
-                by{' '}
               {list.creator.did === store.me.did
                 ? 'you'
                 : sanitizeHandle(list.creator.handle, '@')}
@@ -226,8 +224,7 @@ export const Component = observer(
       </View>
     </View>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   container: {

src/view/com/modals/ProfilePreview.tsx

@@ -14,7 +14,11 @@ import {s} from 'lib/styles'
 
 export const snapPoints = [520, '100%']
 
-export const Component = observer(({did}: {did: string}) => {
+export const Component = observer(function ProfilePreviewImpl({
+  did,
+}: {
+  did: string
+}) {
   const store = useStores()
   const pal = usePalette('default')
   const [model] = useState(new ProfileModel(store, {actor: did}))

src/view/com/modals/lang-settings/LanguageToggle.tsx

@@ -5,8 +5,7 @@ import {observer} from 'mobx-react-lite'
 import {ToggleButton} from 'view/com/util/forms/ToggleButton'
 import {useStores} from 'state/index'
 
-export const LanguageToggle = observer(
+export const LanguageToggle = observer(function LanguageToggleImpl({
-  ({
   code2,
   name,
   onPress,
@@ -16,7 +15,7 @@ export const LanguageToggle = observer(
   name: string
   onPress: () => void
   langType: 'contentLanguages' | 'postLanguages'
-  }) => {
+}) {
   const pal = usePalette('default')
   const store = useStores()
 
@@ -40,8 +39,7 @@ export const LanguageToggle = observer(
       style={[pal.border, styles.languageToggle, isDisabled && styles.dimmed]}
     />
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   languageToggle: {

src/view/com/modals/lang-settings/PostLanguagesSettings.tsx

@@ -13,7 +13,7 @@ import {ToggleButton} from 'view/com/util/forms/ToggleButton'
 
 export const snapPoints = ['100%']
 
-export const Component = observer(() => {
+export const Component = observer(function PostLanguagesSettingsImpl() {
   const store = useStores()
   const pal = usePalette('default')
   const {isMobile} = useWebMediaQueries()

src/view/com/notifications/FeedItem.tsx

@@ -52,7 +52,7 @@ interface Author {
   moderation: ProfileModeration
 }
 
-export const FeedItem = observer(function ({
+export const FeedItem = observer(function FeedItemImpl({
   item,
 }: {
   item: NotificationsFeedItemModel

src/view/com/notifications/InvitedUsers.tsx

@@ -18,7 +18,7 @@ import {s} from 'lib/styles'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {makeProfileLink} from 'lib/routes/links'
 
-export const InvitedUsers = observer(() => {
+export const InvitedUsers = observer(function InvitedUsersImpl() {
   const store = useStores()
   return (
     <CenteredView>

src/view/com/pager/FeedsTabBar.web.tsx

@@ -9,23 +9,20 @@ import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {FeedsTabBar as FeedsTabBarMobile} from './FeedsTabBarMobile'
 
-export const FeedsTabBar = observer(
+export const FeedsTabBar = observer(function FeedsTabBarImpl(
-  (
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
-  ) => {
+) {
   const {isMobile} = useWebMediaQueries()
   if (isMobile) {
     return <FeedsTabBarMobile {...props} />
   } else {
     return <FeedsTabBarDesktop {...props} />
   }
-  },
+})
-)
 
-const FeedsTabBarDesktop = observer(
+const FeedsTabBarDesktop = observer(function FeedsTabBarDesktopImpl(
-  (
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
-  ) => {
+) {
   const store = useStores()
   const items = useMemo(
     () => ['Following', ...store.me.savedFeeds.pinnedFeedNames],
@@ -60,8 +57,7 @@ const FeedsTabBarDesktop = observer(
       />
     </Animated.View>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   tabBar: {

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -14,10 +14,9 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {s} from 'lib/styles'
 import {HITSLOP_10} from 'lib/constants'
 
-export const FeedsTabBar = observer(
+export const FeedsTabBar = observer(function FeedsTabBarImpl(
-  (
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
-  ) => {
+) {
   const store = useStores()
   const pal = usePalette('default')
   const interp = useAnimatedValue(0)
@@ -85,8 +84,7 @@ export const FeedsTabBar = observer(
       />
     </Animated.View>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   tabBar: {

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

@@ -8,7 +8,11 @@ import {ProfileCardWithFollowBtn} from '../profile/ProfileCard'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 
-export const PostLikedBy = observer(function ({uri}: {uri: string}) {
+export const PostLikedBy = observer(function PostLikedByImpl({
+  uri,
+}: {
+  uri: string
+}) {
   const pal = usePalette('default')
   const store = useStores()
   const view = React.useMemo(() => new LikesModel(store, {uri}), [store, uri])
@@ -64,6 +68,8 @@ export const PostLikedBy = observer(function ({uri}: {uri: string}) {
       onEndReached={onEndReached}
       renderItem={renderItem}
       initialNumToRender={15}
+      // FIXME(dan)
+      // eslint-disable-next-line react/no-unstable-nested-components
       ListFooterComponent={() => (
         <View style={styles.footer}>
           {view.isLoading && <ActivityIndicator />}

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

@@ -8,7 +8,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 
-export const PostRepostedBy = observer(function PostRepostedBy({
+export const PostRepostedBy = observer(function PostRepostedByImpl({
   uri,
 }: {
   uri: string
@@ -75,6 +75,8 @@ export const PostRepostedBy = observer(function PostRepostedBy({
       onEndReached={onEndReached}
       renderItem={renderItem}
       initialNumToRender={15}
+      // FIXME(dan)
+      // eslint-disable-next-line react/no-unstable-nested-components
       ListFooterComponent={() => (
         <View style={styles.footer}>
           {view.isLoading && <ActivityIndicator />}

src/view/com/post/Post.tsx

@@ -31,7 +31,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
 import {makeProfileLink} from 'lib/routes/links'
 
-export const Post = observer(function Post({
+export const Post = observer(function PostImpl({
   view,
   showReplyLine,
   hideError,
@@ -88,8 +88,7 @@ export const Post = observer(function Post({
   )
 })
 
-const PostLoaded = observer(
+const PostLoaded = observer(function PostLoadedImpl({
-  ({
   item,
   record,
   setDeleted,
@@ -101,7 +100,7 @@ const PostLoaded = observer(
   setDeleted: (v: boolean) => void
   showReplyLine?: boolean
   style?: StyleProp<ViewStyle>
-  }) => {
+}) {
   const pal = usePalette('default')
   const store = useStores()
 
@@ -294,8 +293,7 @@ const PostLoaded = observer(
       </View>
     </Link>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/posts/FeedItem.tsx

@@ -30,7 +30,7 @@ import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
 import {makeProfileLink} from 'lib/routes/links'
 import {isEmbedByEmbedder} from 'lib/embeds'
 
-export const FeedItem = observer(function ({
+export const FeedItem = observer(function FeedItemImpl({
   item,
   isThreadChild,
   isThreadLastChild,

src/view/com/posts/FeedSlice.tsx

@@ -10,14 +10,13 @@ import {FeedItem} from './FeedItem'
 import {usePalette} from 'lib/hooks/usePalette'
 import {makeProfileLink} from 'lib/routes/links'
 
-export const FeedSlice = observer(
+export const FeedSlice = observer(function FeedSliceImpl({
-  ({
   slice,
   ignoreFilterFor,
 }: {
   slice: PostsFeedSliceModel
   ignoreFilterFor?: string
-  }) => {
+}) {
   if (slice.shouldFilter(ignoreFilterFor)) {
     return null
   }
@@ -65,8 +64,7 @@ export const FeedSlice = observer(
       ))}
     </>
   )
-  },
+})
-)
 
 function ViewFullThread({slice}: {slice: PostsFeedSliceModel}) {
   const pal = usePalette('default')

src/view/com/profile/FollowButton.tsx

@@ -6,8 +6,7 @@ import {useStores} from 'state/index'
 import * as Toast from '../util/Toast'
 import {FollowState} from 'state/models/cache/my-follows'
 
-export const FollowButton = observer(
+export const FollowButton = observer(function FollowButtonImpl({
-  ({
   unfollowedType = 'inverted',
   followedType = 'default',
   did,
@@ -17,7 +16,7 @@ export const FollowButton = observer(
   followedType?: ButtonType
   did: string
   onToggleFollow?: (v: boolean) => void
-  }) => {
+}) {
   const store = useStores()
   const followState = store.me.follows.getFollowState(did)
 
@@ -57,5 +56,4 @@ export const FollowButton = observer(
       label={followState === FollowState.Following ? 'Unfollow' : 'Follow'}
     />
   )
-  },
+})
-)

src/view/com/profile/ProfileCard.tsx

@@ -22,8 +22,7 @@ import {
   getModerationCauseKey,
 } from 'lib/moderation'
 
-export const ProfileCard = observer(
+export const ProfileCard = observer(function ProfileCardImpl({
-  ({
   testID,
   profile,
   noBg,
@@ -36,17 +35,12 @@ export const ProfileCard = observer(
   noBg?: boolean
   noBorder?: boolean
   followers?: AppBskyActorDefs.ProfileView[] | undefined
-    renderButton?: (
+  renderButton?: (profile: AppBskyActorDefs.ProfileViewBasic) => React.ReactNode
-      profile: AppBskyActorDefs.ProfileViewBasic,
+}) {
-    ) => React.ReactNode
-  }) => {
   const store = useStores()
   const pal = usePalette('default')
 
-    const moderation = moderateProfile(
+  const moderation = moderateProfile(profile, store.preferences.moderationOpts)
-      profile,
-      store.preferences.moderationOpts,
-    )
 
   return (
     <Link
@@ -103,8 +97,7 @@ export const ProfileCard = observer(
       <FollowersList followers={followers} />
     </Link>
   )
-  },
+})
-)
 
 function ProfileCardPills({
   followedBy,
@@ -146,8 +139,11 @@ function ProfileCardPills({
   )
 }
 
-const FollowersList = observer(
+const FollowersList = observer(function FollowersListImpl({
-  ({followers}: {followers?: AppBskyActorDefs.ProfileView[] | undefined}) => {
+  followers,
+}: {
+  followers?: AppBskyActorDefs.ProfileView[] | undefined
+}) {
   const store = useStores()
   const pal = usePalette('default')
   if (!followers?.length) {
@@ -180,11 +176,10 @@ const FollowersList = observer(
       ))}
     </View>
   )
-  },
+})
-)
 
 export const ProfileCardWithFollowBtn = observer(
-  ({
+  function ProfileCardWithFollowBtnImpl({
     profile,
     noBg,
     noBorder,
@@ -194,7 +189,7 @@ export const ProfileCardWithFollowBtn = observer(
     noBg?: boolean
     noBorder?: boolean
     followers?: AppBskyActorDefs.ProfileView[] | undefined
-  }) => {
+  }) {
     const store = useStores()
     const isMe = store.me.did === profile.did
 

src/view/com/profile/ProfileFollowers.tsx

@@ -78,6 +78,8 @@ export const ProfileFollowers = observer(function ProfileFollowers({
       onEndReached={onEndReached}
       renderItem={renderItem}
       initialNumToRender={15}
+      // FIXME(dan)
+      // eslint-disable-next-line react/no-unstable-nested-components
       ListFooterComponent={() => (
         <View style={styles.footer}>
           {view.isLoading && <ActivityIndicator />}

src/view/com/profile/ProfileFollows.tsx

@@ -75,6 +75,8 @@ export const ProfileFollows = observer(function ProfileFollows({
       onEndReached={onEndReached}
       renderItem={renderItem}
       initialNumToRender={15}
+      // FIXME(dan)
+      // eslint-disable-next-line react/no-unstable-nested-components
       ListFooterComponent={() => (
         <View style={styles.footer}>
           {view.isLoading && <ActivityIndicator />}

src/view/com/profile/ProfileHeader.tsx

@@ -45,8 +45,11 @@ interface Props {
   hideBackButton?: boolean
 }
 
-export const ProfileHeader = observer(
+export const ProfileHeader = observer(function ProfileHeaderImpl({
-  ({view, onRefreshAll, hideBackButton = false}: Props) => {
+  view,
+  onRefreshAll,
+  hideBackButton = false,
+}: Props) {
   const pal = usePalette('default')
 
   // loading
@@ -56,11 +59,7 @@ export const ProfileHeader = observer(
       <View style={pal.view}>
         <LoadingPlaceholder width="100%" height={120} />
         <View
-            style={[
+          style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}>
-              pal.view,
-              {borderColor: pal.colors.background},
-              styles.avi,
-            ]}>
           <LoadingPlaceholder width={80} height={80} style={styles.br40} />
         </View>
         <View style={styles.content}>
@@ -98,11 +97,13 @@ export const ProfileHeader = observer(
       hideBackButton={hideBackButton}
     />
   )
-  },
+})
-)
 
-const ProfileHeaderLoaded = observer(
+const ProfileHeaderLoaded = observer(function ProfileHeaderLoadedImpl({
-  ({view, onRefreshAll, hideBackButton = false}: Props) => {
+  view,
+  onRefreshAll,
+  hideBackButton = false,
+}: Props) {
   const pal = usePalette('default')
   const palInverted = usePalette('inverted')
   const store = useStores()
@@ -421,11 +422,7 @@ const ProfileHeaderLoaded = observer(
               testID="profileHeaderDropdownBtn"
               items={dropdownItems}>
               <View style={[styles.btn, styles.secondaryBtn, pal.btn]}>
-                  <FontAwesomeIcon
+                <FontAwesomeIcon icon="ellipsis" size={20} style={[pal.text]} />
-                    icon="ellipsis"
-                    size={20}
-                    style={[pal.text]}
-                  />
               </View>
             </NativeDropdown>
           ) : undefined}
@@ -533,11 +530,7 @@ const ProfileHeaderLoaded = observer(
         accessibilityLabel={`View ${view.handle}'s avatar`}
         accessibilityHint="">
         <View
-            style={[
+          style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}>
-              pal.view,
-              {borderColor: pal.colors.background},
-              styles.avi,
-            ]}>
           <UserAvatar
             size={80}
             avatar={view.avatar}
@@ -547,8 +540,7 @@ const ProfileHeaderLoaded = observer(
       </TouchableWithoutFeedback>
     </View>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   banner: {

src/view/com/search/SearchResults.tsx

@@ -18,7 +18,11 @@ import {s} from 'lib/styles'
 
 const SECTIONS = ['Posts', 'Users']
 
-export const SearchResults = observer(({model}: {model: SearchUIModel}) => {
+export const SearchResults = observer(function SearchResultsImpl({
+  model,
+}: {
+  model: SearchUIModel
+}) {
   const pal = usePalette('default')
   const {isMobile} = useWebMediaQueries()
 
@@ -56,7 +60,11 @@ export const SearchResults = observer(({model}: {model: SearchUIModel}) => {
   )
 })
 
-const PostResults = observer(({model}: {model: SearchUIModel}) => {
+const PostResults = observer(function PostResultsImpl({
+  model,
+}: {
+  model: SearchUIModel
+}) {
   const pal = usePalette('default')
   if (model.isPostsLoading) {
     return (
@@ -88,7 +96,11 @@ const PostResults = observer(({model}: {model: SearchUIModel}) => {
   )
 })
 
-const Profiles = observer(({model}: {model: SearchUIModel}) => {
+const Profiles = observer(function ProfilesImpl({
+  model,
+}: {
+  model: SearchUIModel
+}) {
   const pal = usePalette('default')
   if (model.isProfilesLoading) {
     return (

src/view/com/search/Suggestions.tsx

@@ -38,6 +38,9 @@ interface ProfileView {
 }
 type Item = Heading | RefWrapper | SuggestWrapper | ProfileView
 
+// FIXME(dan): Figure out why the false positives
+/* eslint-disable react/prop-types */
+
 export const Suggestions = observer(
   forwardRef(function SuggestionsImpl(
     {

src/view/com/util/PostMeta.tsx

@@ -25,7 +25,7 @@ interface PostMetaOpts {
   timestamp: string
 }
 
-export const PostMeta = observer(function (opts: PostMetaOpts) {
+export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) {
   const pal = usePalette('default')
   const displayName = opts.author.displayName || opts.author.handle
   const handle = opts.author.handle

src/view/com/util/TimeElapsed.tsx

@@ -3,6 +3,9 @@ import {observer} from 'mobx-react-lite'
 import {ago} from 'lib/strings/time'
 import {useStores} from 'state/index'
 
+// FIXME(dan): Figure out why the false positives
+/* eslint-disable react/prop-types */
+
 export const TimeElapsed = observer(function TimeElapsed({
   timestamp,
   children,

src/view/com/util/ViewHeader.tsx

@@ -14,7 +14,7 @@ import {NavigationProp} from 'lib/routes/types'
 
 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 
-export const ViewHeader = observer(function ({
+export const ViewHeader = observer(function ViewHeaderImpl({
   title,
   canGoBack,
   showBackButton = true,
@@ -140,8 +140,7 @@ function DesktopWebHeader({
   )
 }
 
-const Container = observer(
+const Container = observer(function ContainerImpl({
-  ({
   children,
   hideOnScroll,
   showBorder,
@@ -149,7 +148,7 @@ const Container = observer(
   children: React.ReactNode
   hideOnScroll: boolean
   showBorder?: boolean
-  }) => {
+}) {
   const store = useStores()
   const pal = usePalette('default')
   const interp = useAnimatedValue(0)
@@ -202,8 +201,7 @@ const Container = observer(
       {children}
     </Animated.View>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   header: {

src/view/com/util/fab/FABInner.tsx

@@ -14,7 +14,11 @@ export interface FABProps
   icon: JSX.Element
 }
 
-export const FABInner = observer(({testID, icon, ...props}: FABProps) => {
+export const FABInner = observer(function FABInnerImpl({
+  testID,
+  icon,
+  ...props
+}: FABProps) {
   const {isTablet} = useWebMediaQueries()
   const store = useStores()
   const interp = useAnimatedValue(0)

src/view/com/util/load-latest/LoadLatestBtnMobile.tsx

@@ -9,8 +9,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {colors} from 'lib/styles'
 import {HITSLOP_20} from 'lib/constants'
 
-export const LoadLatestBtn = observer(
+export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
-  ({
   onPress,
   label,
   showIndicator,
@@ -19,7 +18,7 @@ export const LoadLatestBtn = observer(
   label: string
   showIndicator: boolean
   minimalShellMode?: boolean // NOTE not used on mobile -prf
-  }) => {
+}) {
   const store = useStores()
   const pal = usePalette('default')
   const safeAreaInsets = useSafeAreaInsets()
@@ -42,8 +41,7 @@ export const LoadLatestBtn = observer(
       {showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
     </TouchableOpacity>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   loadLatest: {

src/view/com/util/post-embeds/ListEmbed.tsx

@@ -6,14 +6,13 @@ import {ListCard} from 'view/com/lists/ListCard'
 import {AppBskyGraphDefs} from '@atproto/api'
 import {s} from 'lib/styles'
 
-export const ListEmbed = observer(
+export const ListEmbed = observer(function ListEmbedImpl({
-  ({
   item,
   style,
 }: {
   item: AppBskyGraphDefs.ListView
   style?: StyleProp<ViewStyle>
-  }) => {
+}) {
   const pal = usePalette('default')
 
   return (
@@ -21,8 +20,7 @@ export const ListEmbed = observer(
       <ListCard list={item} style={[style, styles.card]} />
     </View>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   container: {

src/view/screens/AppPasswords.tsx

@@ -19,7 +19,7 @@ import {CenteredView} from 'view/com/util/Views'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppPasswords'>
 export const AppPasswords = withAuthRequired(
-  observer(({}: Props) => {
+  observer(function AppPasswordsImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
     const {screen} = useAnalytics()

src/view/screens/CustomFeed.tsx

@@ -42,7 +42,7 @@ import {NavigationProp} from 'lib/routes/types'
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'CustomFeed'>
 
 export const CustomFeedScreen = withAuthRequired(
-  observer((props: Props) => {
+  observer(function CustomFeedScreenImpl(props: Props) {
     const pal = usePalette('default')
     const store = useStores()
     const navigation = useNavigation<NavigationProp>()
@@ -119,7 +119,10 @@ export const CustomFeedScreen = withAuthRequired(
 )
 
 export const CustomFeedScreenInner = observer(
-  ({route, feedOwnerDid}: Props & {feedOwnerDid: string}) => {
+  function CustomFeedScreenInnerImpl({
+    route,
+    feedOwnerDid,
+  }: Props & {feedOwnerDid: string}) {
     const store = useStores()
     const pal = usePalette('default')
     const {isTabletOrDesktop} = useWebMediaQueries()

src/view/screens/DiscoverFeeds.tsx

@@ -19,7 +19,7 @@ import debounce from 'lodash.debounce'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'DiscoverFeeds'>
 export const DiscoverFeedsScreen = withAuthRequired(
-  observer(({}: Props) => {
+  observer(function DiscoverFeedsScreenImpl({}: Props) {
     const store = useStores()
     const pal = usePalette('default')
     const feeds = React.useMemo(() => new FeedsDiscoveryModel(store), [store])

src/view/screens/Feeds.tsx

@@ -25,7 +25,7 @@ const MOBILE_HEADER_OFFSET = 40
 
 type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
 export const FeedsScreen = withAuthRequired(
-  observer<Props>(({}: Props) => {
+  observer<Props>(function FeedsScreenImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
     const {isMobile} = useWebMediaQueries()

src/view/screens/Home.tsx

@@ -28,7 +28,7 @@ const POLL_FREQ = 30e3 // 30sec
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired(
-  observer(({}: Props) => {
+  observer(function HomeScreenImpl({}: Props) {
     const store = useStores()
     const pagerRef = React.useRef<PagerRef>(null)
     const [selectedPage, setSelectedPage] = React.useState(0)
@@ -142,8 +142,7 @@ export const HomeScreen = withAuthRequired(
   }),
 )
 
-const FeedPage = observer(
+const FeedPage = observer(function FeedPageImpl({
-  ({
   testID,
   isPageFocused,
   feed,
@@ -153,11 +152,10 @@ const FeedPage = observer(
   feed: PostsFeedModel
   isPageFocused: boolean
   renderEmptyState?: () => JSX.Element
-  }) => {
+}) {
   const store = useStores()
   const {isMobile} = useWebMediaQueries()
-    const [onMainScroll, isScrolledDown, resetMainScroll] =
+  const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store)
-      useOnMainScroll(store)
   const {screen, track} = useAnalytics()
   const [headerOffset, setHeaderOffset] = React.useState(
     isMobile ? HEADER_OFFSET_MOBILE : HEADER_OFFSET_DESKTOP,
@@ -233,15 +231,7 @@ const FeedPage = observer(
       softResetSub.remove()
       feedCleanup()
     }
-    }, [
+  }, [store, doPoll, onSoftReset, screen, feed, isPageFocused, isScreenFocused])
-      store,
-      doPoll,
-      onSoftReset,
-      screen,
-      feed,
-      isPageFocused,
-      isScreenFocused,
-    ])
 
   const onPressCompose = React.useCallback(() => {
     track('HomeScreen:PressCompose')
@@ -289,5 +279,4 @@ const FeedPage = observer(
       />
     </View>
   )
-  },
+})
-)

src/view/screens/ModerationBlockedAccounts.tsx

@@ -27,7 +27,7 @@ type Props = NativeStackScreenProps<
   'ModerationBlockedAccounts'
 >
 export const ModerationBlockedAccounts = withAuthRequired(
-  observer(({}: Props) => {
+  observer(function ModerationBlockedAccountsImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
     const {isTabletOrDesktop} = useWebMediaQueries()
@@ -116,6 +116,8 @@ export const ModerationBlockedAccounts = withAuthRequired(
             onEndReached={onEndReached}
             renderItem={renderItem}
             initialNumToRender={15}
+            // FIXME(dan)
+            // eslint-disable-next-line react/no-unstable-nested-components
             ListFooterComponent={() => (
               <View style={styles.footer}>
                 {blockedAccounts.isLoading && <ActivityIndicator />}

src/view/screens/ModerationMutedAccounts.tsx

@@ -27,7 +27,7 @@ type Props = NativeStackScreenProps<
   'ModerationMutedAccounts'
 >
 export const ModerationMutedAccounts = withAuthRequired(
-  observer(({}: Props) => {
+  observer(function ModerationMutedAccountsImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
     const {isTabletOrDesktop} = useWebMediaQueries()
@@ -112,6 +112,8 @@ export const ModerationMutedAccounts = withAuthRequired(
             onEndReached={onEndReached}
             renderItem={renderItem}
             initialNumToRender={15}
+            // FIXME(dan)
+            // eslint-disable-next-line react/no-unstable-nested-components
             ListFooterComponent={() => (
               <View style={styles.footer}>
                 {mutedAccounts.isLoading && <ActivityIndicator />}

src/view/screens/Notifications.tsx

@@ -24,7 +24,7 @@ type Props = NativeStackScreenProps<
   'Notifications'
 >
 export const NotificationsScreen = withAuthRequired(
-  observer(({}: Props) => {
+  observer(function NotificationsScreenImpl({}: Props) {
     const store = useStores()
     const [onMainScroll, isScrolledDown, resetMainScroll] =
       useOnMainScroll(store)

src/view/screens/PreferencesHomeFeed.tsx

@@ -48,7 +48,9 @@ type Props = NativeStackScreenProps<
   CommonNavigatorParams,
   'PreferencesHomeFeed'
 >
-export const PreferencesHomeFeed = observer(({navigation}: Props) => {
+export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({
+  navigation,
+}: Props) {
   const pal = usePalette('default')
   const store = useStores()
   const {isTabletOrDesktop} = useWebMediaQueries()

src/view/screens/Profile.tsx

@@ -32,7 +32,7 @@ import {combinedDisplayName} from 'lib/strings/display-names'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
 export const ProfileScreen = withAuthRequired(
-  observer(({route}: Props) => {
+  observer(function ProfileScreenImpl({route}: Props) {
     const store = useStores()
     const {screen, track} = useAnalytics()
     const viewSelectorRef = React.useRef<ViewSelectorHandle>(null)

src/view/screens/ProfileList.tsx

@@ -23,7 +23,7 @@ import {s} from 'lib/styles'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileList'>
 export const ProfileListScreen = withAuthRequired(
-  observer(({route}: Props) => {
+  observer(function ProfileListScreenImpl({route}: Props) {
     const store = useStores()
     const navigation = useNavigation<NavigationProp>()
     const {isTabletOrDesktop} = useWebMediaQueries()

src/view/screens/SavedFeeds.tsx

@@ -35,7 +35,7 @@ import {Link, TextLink} from 'view/com/util/Link'
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
 
 export const SavedFeeds = withAuthRequired(
-  observer(({}: Props) => {
+  observer(function SavedFeedsImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
     const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
@@ -151,8 +151,13 @@ export const SavedFeeds = withAuthRequired(
   }),
 )
 
-const ListItem = observer(
+const ListItem = observer(function ListItemImpl({
-  ({item, drag}: {item: CustomFeedModel; drag: () => void}) => {
+  item,
+  drag,
+}: {
+  item: CustomFeedModel
+  drag: () => void
+}) {
   const pal = usePalette('default')
   const store = useStores()
   const savedFeeds = useMemo(() => store.me.savedFeeds, [store])
@@ -192,9 +197,7 @@ const ListItem = observer(
           style={[styles.itemContainer, pal.border]}>
           {isPinned && isWeb ? (
             <View style={styles.webArrowButtonsContainer}>
-                <TouchableOpacity
+              <TouchableOpacity accessibilityRole="button" onPress={onPressUp}>
-                  accessibilityRole="button"
-                  onPress={onPressUp}>
                 <FontAwesomeIcon
                   icon="arrow-up"
                   size={12}
@@ -239,8 +242,7 @@ const ListItem = observer(
       </ShadowDecorator>
     </ScaleDecorator>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   desktopContainer: {

src/view/screens/Search.web.tsx

@@ -18,7 +18,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 type Props = NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>
 export const SearchScreen = withAuthRequired(
-  observer(({navigation, route}: Props) => {
+  observer(function SearchScreenImpl({navigation, route}: Props) {
     const store = useStores()
     const params = route.params || {}
     const foafs = React.useMemo<FoafsModel>(

src/view/screens/SearchMobile.tsx

@@ -30,7 +30,7 @@ import {isAndroid, isIOS} from 'platform/detection'
 
 type Props = NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>
 export const SearchScreen = withAuthRequired(
-  observer<Props>(({}: Props) => {
+  observer<Props>(function SearchScreenImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
     const scrollViewRef = React.useRef<ScrollView>(null)

src/view/shell/Composer.tsx

@@ -6,8 +6,7 @@ import {ComposerOpts} from 'state/models/ui/shell'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {usePalette} from 'lib/hooks/usePalette'
 
-export const Composer = observer(
+export const Composer = observer(function ComposerImpl({
-  ({
   active,
   winHeight,
   replyTo,
@@ -23,7 +22,7 @@ export const Composer = observer(
   onClose: () => void
   quote?: ComposerOpts['quote']
   mention?: ComposerOpts['mention']
-  }) => {
+}) {
   const pal = usePalette('default')
   const initInterp = useAnimatedValue(0)
 
@@ -71,8 +70,7 @@ export const Composer = observer(
       />
     </Animated.View>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   wrapper: {

src/view/shell/Composer.web.tsx

@@ -8,8 +8,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 const BOTTOM_BAR_HEIGHT = 61
 
-export const Composer = observer(
+export const Composer = observer(function ComposerImpl({
-  ({
   active,
   replyTo,
   quote,
@@ -24,7 +23,7 @@ export const Composer = observer(
   onPost?: ComposerOpts['onPost']
   onClose: () => void
   mention?: ComposerOpts['mention']
-  }) => {
+}) {
   const pal = usePalette('default')
   const {isMobile} = useWebMediaQueries()
 
@@ -54,8 +53,7 @@ export const Composer = observer(
       </View>
     </View>
   )
-  },
+})
-)
 
 const styles = StyleSheet.create({
   mask: {

src/view/shell/Drawer.tsx

@@ -44,7 +44,7 @@ import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
 import {isWeb} from 'platform/detection'
 import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format'
 
-export const DrawerContent = observer(() => {
+export const DrawerContent = observer(function DrawerContentImpl() {
   const theme = useTheme()
   const pal = usePalette('default')
   const store = useStores()
@@ -400,7 +400,7 @@ function MenuItem({
   )
 }
 
-const InviteCodes = observer(() => {
+const InviteCodes = observer(function InviteCodesImpl() {
   const {track} = useAnalytics()
   const store = useStores()
   const pal = usePalette('default')

src/view/shell/bottom-bar/BottomBar.tsx

@@ -32,7 +32,9 @@ import {UserAvatar} from 'view/com/util/UserAvatar'
 
 type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds'
 
-export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
+export const BottomBar = observer(function BottomBarImpl({
+  navigation,
+}: BottomTabBarProps) {
   const store = useStores()
   const pal = usePalette('default')
   const safeAreaInsets = useSafeAreaInsets()

src/view/shell/bottom-bar/BottomBarWeb.tsx

@@ -23,7 +23,7 @@ import {Link} from 'view/com/util/Link'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {makeProfileLink} from 'lib/routes/links'
 
-export const BottomBarWeb = observer(() => {
+export const BottomBarWeb = observer(function BottomBarWebImpl() {
   const store = useStores()
   const pal = usePalette('default')
   const safeAreaInsets = useSafeAreaInsets()

src/view/shell/desktop/LeftNav.tsx

@@ -40,7 +40,7 @@ import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types'
 import {router} from '../../../routes'
 import {makeProfileLink} from 'lib/routes/links'
 
-const ProfileCard = observer(() => {
+const ProfileCard = observer(function ProfileCardImpl() {
   const store = useStores()
   const {isDesktop} = useWebMediaQueries()
   const size = isDesktop ? 64 : 48
@@ -103,8 +103,13 @@ interface NavItemProps {
   iconFilled: JSX.Element
   label: string
 }
-const NavItem = observer(
+const NavItem = observer(function NavItemImpl({
-  ({count, href, icon, iconFilled, label}: NavItemProps) => {
+  count,
+  href,
+  icon,
+  iconFilled,
+  label,
+}: NavItemProps) {
   const pal = usePalette('default')
   const store = useStores()
   const {isDesktop, isTablet} = useWebMediaQueries()
@@ -173,8 +178,7 @@ const NavItem = observer(
       )}
     </PressableWithHover>
   )
-  },
+})
-)
 
 function ComposeBtn() {
   const store = useStores()

src/view/shell/desktop/RightNav.tsx

@@ -13,7 +13,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {pluralize} from 'lib/strings/helpers'
 import {formatCount} from 'view/com/util/numeric/format'
 
-export const DesktopRightNav = observer(function DesktopRightNav() {
+export const DesktopRightNav = observer(function DesktopRightNavImpl() {
   const store = useStores()
   const pal = usePalette('default')
   const palError = usePalette('error')
@@ -78,7 +78,7 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
   )
 })
 
-const InviteCodes = observer(() => {
+const InviteCodes = observer(function InviteCodesImpl() {
   const store = useStores()
   const pal = usePalette('default')
 

src/view/shell/index.tsx

@@ -24,7 +24,7 @@ import {isStateAtTabRoot} from 'lib/routes/helpers'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {useOTAUpdate} from 'lib/hooks/useOTAUpdate'
 
-const ShellInner = observer(() => {
+const ShellInner = observer(function ShellInnerImpl() {
   const store = useStores()
   useOTAUpdate() // this hook polls for OTA updates every few seconds
   const winDim = useWindowDimensions()
@@ -81,7 +81,7 @@ const ShellInner = observer(() => {
   )
 })
 
-export const Shell: React.FC = observer(() => {
+export const Shell: React.FC = observer(function ShellImpl() {
   const pal = usePalette('default')
   const theme = useTheme()
   return (

src/view/shell/index.web.tsx

@@ -17,7 +17,7 @@ import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
 import {useNavigation} from '@react-navigation/native'
 import {NavigationProp} from 'lib/routes/types'
 
-const ShellInner = observer(() => {
+const ShellInner = observer(function ShellInnerImpl() {
   const store = useStores()
   const {isDesktop, isMobile} = useWebMediaQueries()
   const navigator = useNavigation<NavigationProp>()
@@ -71,7 +71,7 @@ const ShellInner = observer(() => {
   )
 })
 
-export const Shell: React.FC = observer(() => {
+export const Shell: React.FC = observer(function ShellImpl() {
   const pageBg = useColorSchemeStyle(styles.bgLight, styles.bgDark)
   return (
     <View style={[s.hContentRegion, pageBg]}>