Revert "perf: move screen focus to LHNOptionsList to avoid re-renders"

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -1,4 +1,4 @@
-import {useIsFocused, useRoute} from '@react-navigation/native';
+import {useRoute} from '@react-navigation/native';
 import type {FlashListProps} from '@shopify/flash-list';
 import {FlashList} from '@shopify/flash-list';
 import type {ReactElement} from 'react';
@@ -58,8 +58,6 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
     const styles = useThemeStyles();
     const {translate, preferredLocale} = useLocalize();
     const estimatedListSize = useLHNEstimatedListSize();
-    const isScreenFocused = useIsFocused();
-
     const shouldShowEmptyLHN = data.length === 0;
     const estimatedItemSize = optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight;
     const platform = getPlatform();
@@ -227,15 +225,14 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
                     lastReportActionTransaction={lastReportActionTransaction}
                     receiptTransactions={transactions}
                     viewMode={optionMode}
-                    isOptionFocused={!shouldDisableFocusOptions}
+                    isFocused={!shouldDisableFocusOptions}
                     lastMessageTextFromReport={lastMessageTextFromReport}
                     onSelectRow={onSelectRow}
                     preferredLocale={preferredLocale}
                     hasDraftComment={hasDraftComment}
                     transactionViolations={transactionViolations}
                     onLayout={onLayoutItem}
                     shouldShowRBRorGBRTooltip={shouldShowRBRorGBRTooltip}
-                    isScreenFocused={isScreenFocused}
                 />
             );
         },
@@ -256,7 +253,6 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
             onLayoutItem,
             isOffline,
             firstReportIDWithGBRorRBR,
-            isScreenFocused,
         ],
     );
 

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -1,4 +1,5 @@
-import React, {useMemo, useRef, useState} from 'react';
+import {useFocusEffect} from '@react-navigation/native';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent, ViewStyle} from 'react-native';
 import {StyleSheet, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -50,20 +51,20 @@ import type {OptionRowLHNProps} from './types';
 
 function OptionRowLHN({
     reportID,
-    isOptionFocused = false,
+    isFocused = false,
     onSelectRow = () => {},
     optionItem,
     viewMode = 'default',
     style,
     onLayout = () => {},
     hasDraftComment,
     shouldShowRBRorGBRTooltip,
-    isScreenFocused,
 }: OptionRowLHNProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const popoverAnchor = useRef<View>(null);
     const StyleUtils = useStyleUtils();
+    const [isScreenFocused, setIsScreenFocused] = useState(false);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${optionItem?.reportID}`, {canBeMissing: true});
@@ -104,14 +105,23 @@ function OptionRowLHN({
     const {translate} = useLocalize();
     const [isContextMenuActive, setIsContextMenuActive] = useState(false);
 
+    useFocusEffect(
+        useCallback(() => {
+            setIsScreenFocused(true);
+            return () => {
+                setIsScreenFocused(false);
+            };
+        }, []),
+    );
+
     const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT;
     const sidebarInnerRowStyle = StyleSheet.flatten<ViewStyle>(
         isInFocusMode
             ? [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRowCompact, styles.justifyContentCenter]
             : [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRow, styles.justifyContentCenter],
     );
 
-    if (!optionItem && !isOptionFocused) {
+    if (!optionItem && !isFocused) {
         // rendering null as a render item causes the FlashList to render all
         // its children and consume significant memory on the first render. We can avoid this by
         // rendering a placeholder view instead. This behaviour is only observed when we
@@ -130,7 +140,7 @@ function OptionRowLHN({
     }
 
     const brickRoadIndicator = optionItem.brickRoadIndicator;
-    const textStyle = isOptionFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
+    const textStyle = isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
     const textUnreadStyle = shouldUseBoldText(optionItem) ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
     const displayNameStyle = [styles.optionDisplayName, styles.optionDisplayNameCompact, styles.pre, textUnreadStyle, style];
     const alternateTextStyle = isInFocusMode
@@ -178,7 +188,7 @@ function OptionRowLHN({
     const statusContent = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText;
     const isStatusVisible = !!emojiCode && isOneOnOneChat(!isEmptyObject(report) ? report : undefined);
 
-    const subscriptAvatarBorderColor = isOptionFocused ? focusedBackgroundColor : theme.sidebar;
+    const subscriptAvatarBorderColor = isFocused ? focusedBackgroundColor : theme.sidebar;
     const firstIcon = optionItem.icons?.at(0);
 
     const onOptionPress = (event: GestureResponderEvent | KeyboardEvent | undefined) => {
@@ -246,8 +256,8 @@ function OptionRowLHN({
                                     styles.sidebarLink,
                                     styles.sidebarLinkInnerLHN,
                                     StyleUtils.getBackgroundColorStyle(theme.sidebar),
-                                    isOptionFocused ? styles.sidebarLinkActive : null,
-                                    (hovered || isContextMenuActive) && !isOptionFocused ? styles.sidebarLinkHover : null,
+                                    isFocused ? styles.sidebarLinkActive : null,
+                                    (hovered || isContextMenuActive) && !isFocused ? styles.sidebarLinkHover : null,
                                 ]}
                                 role={CONST.ROLE.BUTTON}
                                 accessibilityLabel={`${translate('accessibilityHints.navigatesToChat')} ${optionItem.text}. ${optionItem.isUnread ? `${translate('common.unread')}.` : ''} ${
@@ -262,7 +272,7 @@ function OptionRowLHN({
                                             firstIcon &&
                                             (optionItem.shouldShowSubscript ? (
                                                 <SubscriptAvatar
-                                                    backgroundColor={hovered && !isOptionFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
+                                                    backgroundColor={hovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
                                                     mainAvatar={firstIcon}
                                                     secondaryAvatar={optionItem.icons.at(1)}
                                                     size={isInFocusMode ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
@@ -274,8 +284,8 @@ function OptionRowLHN({
                                                     size={isInFocusMode ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
                                                     secondAvatarStyle={[
                                                         StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-                                                        isOptionFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
-                                                        hovered && !isOptionFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
+                                                        isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
+                                                        hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
                                                     ]}
                                                     shouldShowTooltip={shouldOptionShowTooltip(optionItem)}
                                                 />

src/components/LHNOptionsList/OptionRowLHNData.tsx

@@ -14,7 +14,7 @@ import type {OptionRowLHNDataProps} from './types';
  * re-render if the data really changed.
  */
 function OptionRowLHNData({
-    isOptionFocused = false,
+    isFocused = false,
     fullReport,
     reportAttributes,
     oneTransactionThreadReport,
@@ -35,7 +35,7 @@ function OptionRowLHNData({
 }: OptionRowLHNDataProps) {
     const reportID = propsToForward.reportID;
     const currentReportIDValue = useCurrentReportID();
-    const isReportFocused = isOptionFocused && currentReportIDValue?.currentReportID === reportID;
+    const isReportFocused = isFocused && currentReportIDValue?.currentReportID === reportID;
 
     const optionItemRef = useRef<OptionData | undefined>(undefined);
     const optionItem = useMemo(() => {
@@ -88,7 +88,7 @@ function OptionRowLHNData({
         <OptionRowLHN
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...propsToForward}
-            isOptionFocused={isReportFocused}
+            isFocused={isReportFocused}
             optionItem={optionItem}
         />
     );

src/components/LHNOptionsList/types.ts

@@ -36,8 +36,8 @@ type CustomLHNOptionsListProps = {
 type LHNOptionsListProps = CustomLHNOptionsListProps;
 
 type OptionRowLHNDataProps = {
-    /** Whether option should be focused */
-    isOptionFocused?: boolean;
+    /** Whether row should be focused */
+    isFocused?: boolean;
 
     /** List of users' personal details */
     personalDetails?: PersonalDetailsList;
@@ -109,17 +109,14 @@ type OptionRowLHNDataProps = {
 
     /** Whether to show the educational tooltip for the GBR or RBR */
     shouldShowRBRorGBRTooltip: boolean;
-
-    /** Whether the screen is focused */
-    isScreenFocused: boolean;
 };
 
 type OptionRowLHNProps = {
     /** The ID of the report that the option is for */
     reportID: string;
 
     /** Whether this option is currently in focus so we can modify its style */
-    isOptionFocused?: boolean;
+    isFocused?: boolean;
 
     /** A function that is called when an option is selected. Selected option is passed as a param */
     onSelectRow?: (optionItem: OptionData, popoverAnchor: RefObject<View>) => void;
@@ -140,9 +137,6 @@ type OptionRowLHNProps = {
 
     /** Whether to show the educational tooltip on the GBR or RBR */
     shouldShowRBRorGBRTooltip: boolean;
-
-    /** Whether the screen is focused */
-    isScreenFocused: boolean;
 };
 
 type RenderItemProps = {item: Report};