perf: reduce rerenders of sidebar

src/components/FloatingActionButton.js

@@ -73,7 +73,7 @@ class FloatingActionButton extends PureComponent {
         });
 
         return (
-            <KeyboardAvoidingView behavior="padding">
+            <KeyboardAvoidingView behavior="height">
                 <Tooltip absolute text={this.props.translate('common.new')}>
                     <AnimatedPressable
                         accessibilityLabel={this.props.accessibilityLabel}

src/components/ScreenWrapper/BaseScreenWrapper.js

@@ -44,6 +44,23 @@ class BaseScreenWrapper extends React.Component {
         });
     }
 
+    /**
+     * We explicitly want to ignore if props.modal changes, and only want to rerender if
+     * any of the other props **used for the rendering output** is changed.
+     * @param {Object} nextProps
+     * @param {Object} nextState
+     * @returns {boolean}
+     */
+    shouldComponentUpdate(nextProps, nextState) {
+        return this.state !== nextState
+            || this.props.children !== nextProps.children
+            || this.props.network.isOffline !== nextProps.network.isOffline
+            || this.props.includePaddingBottom !== nextProps.includePaddingBottom
+            || this.props.includePaddingTop !== nextProps.includePaddingTop
+            || this.props.isSmallScreenWidth !== nextProps.isSmallScreenWidth
+            || this.props.keyboardAvoidingViewBehavior !== nextProps.keyboardAvoidingViewBehavior;
+    }
+
     componentWillUnmount() {
         if (this.unsubscribeEscapeKey) {
             this.unsubscribeEscapeKey();

src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js

@@ -1,56 +1,31 @@
 import lodashGet from 'lodash/get';
-import _ from 'underscore';
 import React, {Component} from 'react';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
 import styles from '../../../../styles/styles';
 import SidebarLinks from '../SidebarLinks';
-import PopoverMenu from '../../../../components/PopoverMenu';
-import FloatingActionButton from '../../../../components/FloatingActionButton';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
 import Navigation from '../../../../libs/Navigation/Navigation';
 import ROUTES from '../../../../ROUTES';
 import Timing from '../../../../libs/actions/Timing';
 import CONST from '../../../../CONST';
-import * as Expensicons from '../../../../components/Icon/Expensicons';
-import Permissions from '../../../../libs/Permissions';
-import * as Policy from '../../../../libs/actions/Policy';
 import Performance from '../../../../libs/Performance';
 import * as Welcome from '../../../../libs/actions/Welcome';
-import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes';
 import withDrawerState from '../../../../components/withDrawerState';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
+import compose from '../../../../libs/compose';
+import sidebarPropTypes from './sidebarPropTypes';
 
 const propTypes = {
-
-    /** Callback function when the menu is shown */
-    onShowCreateMenu: PropTypes.func,
-
-    /** Callback function before the menu is hidden */
-    onHideCreateMenu: PropTypes.func,
-
-    /** reportID in the current navigation state */
-    reportIDFromRoute: PropTypes.string,
-
     ...sidebarPropTypes,
-};
-const defaultProps = {
-    onHideCreateMenu: () => {},
-    onShowCreateMenu: () => {},
-    ...sidebarDefaultProps,
+    ...windowDimensionsPropTypes,
 };
 
 class BaseSidebarScreen extends Component {
     constructor(props) {
         super(props);
 
-        this.hideCreateMenu = this.hideCreateMenu.bind(this);
         this.startTimer = this.startTimer.bind(this);
         this.navigateToSettings = this.navigateToSettings.bind(this);
-        this.showCreateMenu = this.showCreateMenu.bind(this);
-
-        this.state = {
-            isCreateMenuActive: false,
-        };
     }
 
     componentDidMount() {
@@ -61,35 +36,13 @@ class BaseSidebarScreen extends Component {
         Welcome.show({routes, showCreateMenu: this.showCreateMenu});
     }
 
-    /**
-     * Method called when we click the floating action button
-     */
-    showCreateMenu() {
-        this.setState({
-            isCreateMenuActive: true,
-        });
-        this.props.onShowCreateMenu();
-    }
-
     /**
      * Method called when avatar is clicked
      */
     navigateToSettings() {
         Navigation.navigate(ROUTES.SETTINGS);
     }
 
-    /**
-     * Method called either when:
-     * Pressing the floating action button to open the CreateMenu modal
-     * Selecting an item on CreateMenu or closing it by clicking outside of the modal component
-     */
-    hideCreateMenu() {
-        this.props.onHideCreateMenu();
-        this.setState({
-            isCreateMenuActive: false,
-        });
-    }
-
     /**
      * Method called when a pinned chat is selected.
      */
@@ -99,8 +52,6 @@ class BaseSidebarScreen extends Component {
     }
 
     render() {
-        // Workspaces are policies with type === 'free'
-        const workspaces = _.filter(this.props.allPolicies, policy => policy && policy.type === CONST.POLICY.TYPE.FREE);
         return (
             <ScreenWrapper
                 includePaddingBottom={false}
@@ -117,70 +68,8 @@ class BaseSidebarScreen extends Component {
                                 isDrawerOpen={this.props.isDrawerOpen}
                                 reportIDFromRoute={this.props.reportIDFromRoute}
                             />
-                            <FloatingActionButton
-                                accessibilityLabel={this.props.translate('sidebarScreen.fabNewChat')}
-                                accessibilityRole="button"
-                                isActive={this.state.isCreateMenuActive}
-                                onPress={this.showCreateMenu}
-                            />
                         </View>
-                        <PopoverMenu
-                            onClose={this.hideCreateMenu}
-                            isVisible={this.state.isCreateMenuActive}
-                            anchorPosition={styles.createMenuPositionSidebar}
-                            onItemSelected={this.hideCreateMenu}
-                            fromSidebarMediumScreen={!this.props.isSmallScreenWidth}
-                            menuItems={[
-                                {
-                                    icon: Expensicons.ChatBubble,
-                                    text: this.props.translate('sidebarScreen.newChat'),
-                                    onSelected: () => Navigation.navigate(ROUTES.NEW_CHAT),
-                                },
-                                {
-                                    icon: Expensicons.Users,
-                                    text: this.props.translate('sidebarScreen.newGroup'),
-                                    onSelected: () => Navigation.navigate(ROUTES.NEW_GROUP),
-                                },
-                                ...(Permissions.canUsePolicyRooms(this.props.betas) && workspaces.length ? [
-                                    {
-                                        icon: Expensicons.Hashtag,
-                                        text: this.props.translate('sidebarScreen.newRoom'),
-                                        onSelected: () => Navigation.navigate(ROUTES.WORKSPACE_NEW_ROOM),
-                                    },
-                                ] : []),
-                                ...(Permissions.canUseIOUSend(this.props.betas) ? [
-                                    {
-                                        icon: Expensicons.Send,
-                                        text: this.props.translate('iou.sendMoney'),
-                                        onSelected: () => Navigation.navigate(ROUTES.IOU_SEND),
-                                    },
-                                ] : []),
-                                ...(Permissions.canUseIOU(this.props.betas) ? [
-                                    {
-                                        icon: Expensicons.MoneyCircle,
-                                        text: this.props.translate('iou.requestMoney'),
-                                        onSelected: () => Navigation.navigate(ROUTES.IOU_REQUEST),
-                                    },
-                                ] : []),
-                                ...(Permissions.canUseIOU(this.props.betas) ? [
-                                    {
-                                        icon: Expensicons.Receipt,
-                                        text: this.props.translate('iou.splitBill'),
-                                        onSelected: () => Navigation.navigate(ROUTES.IOU_BILL),
-                                    },
-                                ] : []),
-                                ...(!Policy.isAdminOfFreePolicy(this.props.allPolicies) ? [
-                                    {
-                                        icon: Expensicons.NewWorkspace,
-                                        iconWidth: 46,
-                                        iconHeight: 40,
-                                        text: this.props.translate('workspace.new.newWorkspace'),
-                                        description: this.props.translate('workspace.new.getTheExpensifyCardAndMore'),
-                                        onSelected: () => Policy.createWorkspace(),
-                                    },
-                                ] : []),
-                            ]}
-                        />
+                        {this.props.children}
                     </>
                 )}
             </ScreenWrapper>
@@ -189,6 +78,8 @@ class BaseSidebarScreen extends Component {
 }
 
 BaseSidebarScreen.propTypes = propTypes;
-BaseSidebarScreen.defaultProps = defaultProps;
 
-export default withDrawerState(BaseSidebarScreen);
+export default compose(
+    withWindowDimensions,
+    withDrawerState,
+)(BaseSidebarScreen);

src/pages/home/sidebar/SidebarScreen/PopoverModal.js

@@ -0,0 +1,170 @@
+import React from 'react';
+import _ from 'underscore';
+import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
+import styles from '../../../../styles/styles';
+import * as Expensicons from '../../../../components/Icon/Expensicons';
+import Navigation from '../../../../libs/Navigation/Navigation';
+import ROUTES from '../../../../ROUTES';
+import Permissions from '../../../../libs/Permissions';
+import * as Policy from '../../../../libs/actions/Policy';
+import PopoverMenu from '../../../../components/PopoverMenu';
+import CONST from '../../../../CONST';
+import FloatingActionButton from '../../../../components/FloatingActionButton';
+import compose from '../../../../libs/compose';
+import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import withWindowDimensions from '../../../../components/withWindowDimensions';
+import ONYXKEYS from '../../../../ONYXKEYS';
+
+const propTypes = {
+    /* Callback function when the menu is shown */
+    onShowCreateMenu: PropTypes.func,
+
+    /* Callback function before the menu is hidden */
+    onHideCreateMenu: PropTypes.func,
+
+    /** The list of policies the user has access to. */
+    allPolicies: PropTypes.shape({
+        /** The policy name */
+        name: PropTypes.string,
+    }),
+
+    /* Beta features list */
+    betas: PropTypes.arrayOf(PropTypes.string),
+
+    ...withLocalizePropTypes,
+};
+const defaultProps = {
+    onHideCreateMenu: () => {},
+    onShowCreateMenu: () => {},
+    allPolicies: {},
+    betas: [],
+};
+
+/**
+ * Responsible for rendering the {@link PopoverMenu}, and the accompanying
+ * FAB that can open or close the menu.
+ */
+class PopoverModal extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.showCreateMenu = this.showCreateMenu.bind(this);
+        this.hideCreateMenu = this.hideCreateMenu.bind(this);
+
+        this.state = {
+            isCreateMenuActive: false,
+        };
+    }
+
+    /**
+     * Method called when we click the floating action button
+     */
+    showCreateMenu() {
+        this.setState({
+            isCreateMenuActive: true,
+        });
+        this.props.onShowCreateMenu();
+    }
+
+    /**
+     * Method called either when:
+     * - Pressing the floating action button to open the CreateMenu modal
+     * - Selecting an item on CreateMenu or closing it by clicking outside of the modal component
+     */
+    hideCreateMenu() {
+        this.props.onHideCreateMenu();
+        this.setState({
+            isCreateMenuActive: false,
+        });
+    }
+
+    render() {
+        // Workspaces are policies with type === 'free'
+        const workspaces = _.filter(this.props.allPolicies, policy => policy && policy.type === CONST.POLICY.TYPE.FREE);
+
+        return (
+            <>
+                <PopoverMenu
+                    onClose={this.hideCreateMenu}
+                    isVisible={this.state.isCreateMenuActive}
+                    anchorPosition={styles.createMenuPositionSidebar}
+                    onItemSelected={this.hideCreateMenu}
+                    fromSidebarMediumScreen={!this.props.isSmallScreenWidth}
+                    menuItems={[
+                        {
+                            icon: Expensicons.ChatBubble,
+                            text: this.props.translate('sidebarScreen.newChat'),
+                            onSelected: () => Navigation.navigate(ROUTES.NEW_CHAT),
+                        },
+                        {
+                            icon: Expensicons.Users,
+                            text: this.props.translate('sidebarScreen.newGroup'),
+                            onSelected: () => Navigation.navigate(ROUTES.NEW_GROUP),
+                        },
+                        ...(Permissions.canUsePolicyRooms(this.props.betas) && workspaces.length ? [
+                            {
+                                icon: Expensicons.Hashtag,
+                                text: this.props.translate('sidebarScreen.newRoom'),
+                                onSelected: () => Navigation.navigate(ROUTES.WORKSPACE_NEW_ROOM),
+                            },
+                        ] : []),
+                        ...(Permissions.canUseIOUSend(this.props.betas) ? [
+                            {
+                                icon: Expensicons.Send,
+                                text: this.props.translate('iou.sendMoney'),
+                                onSelected: () => Navigation.navigate(ROUTES.IOU_SEND),
+                            },
+                        ] : []),
+                        ...(Permissions.canUseIOU(this.props.betas) ? [
+                            {
+                                icon: Expensicons.MoneyCircle,
+                                text: this.props.translate('iou.requestMoney'),
+                                onSelected: () => Navigation.navigate(ROUTES.IOU_REQUEST),
+                            },
+                        ] : []),
+                        ...(Permissions.canUseIOU(this.props.betas) ? [
+                            {
+                                icon: Expensicons.Receipt,
+                                text: this.props.translate('iou.splitBill'),
+                                onSelected: () => Navigation.navigate(ROUTES.IOU_BILL),
+                            },
+                        ] : []),
+                        ...(!Policy.isAdminOfFreePolicy(this.props.allPolicies) ? [
+                            {
+                                icon: Expensicons.NewWorkspace,
+                                iconWidth: 46,
+                                iconHeight: 40,
+                                text: this.props.translate('workspace.new.newWorkspace'),
+                                description: this.props.translate('workspace.new.getTheExpensifyCardAndMore'),
+                                onSelected: () => Policy.createWorkspace(),
+                            },
+                        ] : []),
+                    ]}
+                />
+                <FloatingActionButton
+                    accessibilityLabel={this.props.translate('sidebarScreen.fabNewChat')}
+                    accessibilityRole="button"
+                    isActive={this.state.isCreateMenuActive}
+                    onPress={this.showCreateMenu}
+                />
+            </>
+        );
+    }
+}
+
+PopoverModal.propTypes = propTypes;
+PopoverModal.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withWindowDimensions,
+    withOnyx({
+        allPolicies: {
+            key: ONYXKEYS.COLLECTION.POLICY,
+        },
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
+    }),
+)(PopoverModal);