diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js index b1430676afc0..7433c2798879 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.js +++ b/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}) => ( - */ export default React.memo( compose( - withCurrentReportID, withReportCommentDrafts({ propName: 'comment', transformValue: (drafts, props) => { diff --git a/src/components/LHNOptionsList/OptionRowLHNDataWithFocus.js b/src/components/LHNOptionsList/OptionRowLHNDataWithFocus.js new file mode 100644 index 000000000000..5e58be79e088 --- /dev/null +++ b/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 ( + + ); +} + +OptionRowLHNDataWithFocus.defaultProps = defaultProps; +OptionRowLHNDataWithFocus.propTypes = propTypes; +OptionRowLHNDataWithFocus.displayName = 'OptionRowLHNDataWithFocus'; + +export default withCurrentReportID(OptionRowLHNDataWithFocus);