Merge pull request #28615 from kacper-mikolajczak/chat-transition-opt…

…imisation-proposal

Improve memoization of LHN by handling the isFocused prop better

src/components/LHNOptionsList/LHNOptionsList.js

@@ -4,8 +4,8 @@ import {FlatList, View} from 'react-native';
 import _ from 'underscore';
 import CONST from '../../CONST';
 import styles from '../../styles/styles';
-import OptionRowLHNData from './OptionRowLHNData';
 import variables from '../../styles/variables';
+import OptionRowLHNDataWithFocus from './OptionRowLHNDataWithFocus';
 
 const propTypes = {
     /** Wrapper style for the section list */
@@ -63,7 +63,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
      * @return {Component}
      */
     const renderItem = ({item}) => (
-        <OptionRowLHNData
+        <OptionRowLHNDataWithFocus
             reportID={item}
             viewMode={optionMode}
             shouldDisableFocusOptions={shouldDisableFocusOptions}

src/components/LHNOptionsList/OptionRowLHNData.js

@@ -8,7 +8,6 @@ import {withReportCommentDrafts} from '../OnyxProvider';
 import SidebarUtils from '../../libs/SidebarUtils';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
-import withCurrentReportID, {withCurrentReportIDPropTypes, withCurrentReportIDDefaultProps} from '../withCurrentReportID';
 import OptionRowLHN, {propTypes as basePropTypes, defaultProps as baseDefaultProps} from './OptionRowLHN';
 import * as Report from '../../libs/actions/Report';
 import * as UserUtils from '../../libs/UserUtils';
@@ -20,8 +19,8 @@ import CONST from '../../CONST';
 import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
 
 const propTypes = {
-    /** If true will disable ever setting the OptionRowLHN to focused */
-    shouldDisableFocusOptions: PropTypes.bool,
+    /** Whether row should be focused */
+    isFocused: PropTypes.bool,
 
     /** List of users' personal details */
     personalDetails: PropTypes.objectOf(participantPropTypes),
@@ -51,20 +50,17 @@ const propTypes = {
         /** The ID of the transaction */
         transactionID: PropTypes.string,
     }),
-
-    ...withCurrentReportIDPropTypes,
     ...basePropTypes,
 };
 
 const defaultProps = {
-    shouldDisableFocusOptions: false,
+    isFocused: false,
     personalDetails: {},
     fullReport: {},
     policy: {},
     parentReportActions: {},
     transaction: {},
     preferredLocale: CONST.LOCALES.DEFAULT,
-    ...withCurrentReportIDDefaultProps,
     ...baseDefaultProps,
 };
 
@@ -75,8 +71,7 @@ const defaultProps = {
  * re-render if the data really changed.
  */
 function OptionRowLHNData({
-    shouldDisableFocusOptions,
-    currentReportID,
+    isFocused,
     fullReport,
     reportActions,
     personalDetails,
@@ -89,9 +84,6 @@ function OptionRowLHNData({
     ...propsToForward
 }) {
     const reportID = propsToForward.reportID;
-    // We only want to pass a boolean to the memoized component,
-    // instead of a changing number (so we prevent unnecessary re-renders).
-    const isFocused = !shouldDisableFocusOptions && currentReportID === reportID;
 
     const parentReportAction = parentReportActions[fullReport.parentReportActionID];
 
@@ -172,7 +164,6 @@ const personalDetailsSelector = (personalDetails) =>
  */
 export default React.memo(
     compose(
-        withCurrentReportID,
         withReportCommentDrafts({
             propName: 'comment',
             transformValue: (drafts, props) => {

src/components/LHNOptionsList/OptionRowLHNDataWithFocus.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withCurrentReportID, {withCurrentReportIDPropTypes, withCurrentReportIDDefaultProps} from '../withCurrentReportID';
+import OptionRowLHNData from './OptionRowLHNData';
+
+const propTypes = {
+    ...withCurrentReportIDPropTypes,
+    shouldDisableFocusOptions: PropTypes.bool,
+};
+
+const defaultProps = {
+    ...withCurrentReportIDDefaultProps,
+    shouldDisableFocusOptions: false,
+};
+
+/**
+ * Wrapper component for OptionRowLHNData that calculates isFocused prop based on currentReportID.
+ * This is extracted from OptionRowLHNData to prevent unnecessary re-renders when currentReportID changes.
+ * @returns {React.Component} OptionRowLHNData component with isFocused prop
+ */
+function OptionRowLHNDataWithFocus({currentReportID, shouldDisableFocusOptions, ...props}) {
+    // We only want to pass a boolean to the memoized component,
+    // instead of a changing number (so we prevent unnecessary re-renders).
+    const isFocused = !shouldDisableFocusOptions && currentReportID === props.reportID;
+
+    return (
+        <OptionRowLHNData
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            isFocused={isFocused}
+        />
+    );
+}
+
+OptionRowLHNDataWithFocus.defaultProps = defaultProps;
+OptionRowLHNDataWithFocus.propTypes = propTypes;
+OptionRowLHNDataWithFocus.displayName = 'OptionRowLHNDataWithFocus';
+
+export default withCurrentReportID(OptionRowLHNDataWithFocus);