Merge pull request #20434 from Expensify/srikar-refactorLHNOptionsList

Refactor lhn options list to function component

src/components/LHNOptionsList/LHNOptionsList.js

@@ -1,11 +1,11 @@
-import _ from 'underscore';
-import React, {Component} from 'react';
-import {View, FlatList} from 'react-native';
 import PropTypes from 'prop-types';
+import React, {useMemo} from 'react';
+import {FlatList, View} from 'react-native';
+import _ from 'underscore';
+import CONST from '../../CONST';
 import styles from '../../styles/styles';
-import OptionRowLHN from './OptionRowLHN';
 import variables from '../../styles/variables';
-import CONST from '../../CONST';
+import OptionRowLHN from './OptionRowLHN';
 
 const propTypes = {
     /** Extra styles for the section list container */
@@ -32,33 +32,27 @@ const defaultProps = {
     shouldDisableFocusOptions: false,
 };
 
-class LHNOptionsList extends Component {
-    constructor(props) {
-        super(props);
-
-        this.renderItem = this.renderItem.bind(this);
-        this.getItemLayout = this.getItemLayout.bind(this);
-        this.data = this.props.data;
-    }
+function LHNOptionsList(props) {
+    const data = useMemo(() => props.data, [props.data]);
 
     /**
      * This function is used to compute the layout of any given item in our list. Since we know that each item will have the exact same height, this is a performance optimization
      * so that the heights can be determined before the options are rendered. Otherwise, the heights are determined when each option is rendering and it causes a lot of overhead on large
      * lists.
      *
-     * @param {Array} data - This is the same as the data we pass into the component
+     * @param {Array} itemData - This is the same as the data we pass into the component
      * @param {Number} index the current item's index in the set of data
      *
      * @returns {Object}
      */
-    getItemLayout(data, index) {
-        const optionHeight = this.props.optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight;
+    const getItemLayout = (itemData, index) => {
+        const optionHeight = props.optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight;
         return {
             length: optionHeight,
             offset: index * optionHeight,
             index,
         };
-    }
+    };
 
     /**
      * Function which renders a row in the list
@@ -69,43 +63,34 @@ class LHNOptionsList extends Component {
      *
      * @return {Component}
      */
-    renderItem({item, index}) {
-        return (
-            <OptionRowLHN
-                reportID={item}
-                viewMode={this.props.optionMode}
-                isFocused={!this.props.shouldDisableFocusOptions && this.props.focusedIndex === index}
-                onSelectRow={this.props.onSelectRow}
-            />
-        );
-    }
+    const renderItem = ({item, index}) => (
+        <OptionRowLHN
+            reportID={item}
+            viewMode={props.optionMode}
+            isFocused={!props.shouldDisableFocusOptions && props.focusedIndex === index}
+            onSelectRow={props.onSelectRow}
+        />
+    );
 
-    render() {
-        const areArraysEqual = _.isEqual(this.props.data, this.data);
-        if (!areArraysEqual) {
-            this.data = this.props.data;
-        }
-
-        return (
-            <View style={[styles.flex1]}>
-                <FlatList
-                    indicatorStyle="white"
-                    keyboardShouldPersistTaps="always"
-                    contentContainerStyle={this.props.contentContainerStyles}
-                    showsVerticalScrollIndicator={false}
-                    data={this.data}
-                    keyExtractor={(item) => item}
-                    stickySectionHeadersEnabled={false}
-                    renderItem={this.renderItem}
-                    getItemLayout={this.getItemLayout}
-                    extraData={this.props.focusedIndex}
-                    initialNumToRender={5}
-                    maxToRenderPerBatch={5}
-                    windowSize={5}
-                />
-            </View>
-        );
-    }
+    return (
+        <View style={[styles.flex1]}>
+            <FlatList
+                indicatorStyle="white"
+                keyboardShouldPersistTaps="always"
+                contentContainerStyle={props.contentContainerStyles}
+                showsVerticalScrollIndicator={false}
+                data={data}
+                keyExtractor={(item) => item}
+                stickySectionHeadersEnabled={false}
+                renderItem={renderItem}
+                getItemLayout={getItemLayout}
+                extraData={props.focusedIndex}
+                initialNumToRender={5}
+                maxToRenderPerBatch={5}
+                windowSize={5}
+            />
+        </View>
+    );
 }
 
 LHNOptionsList.propTypes = propTypes;