diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 6f1874eb3154..78876d9eb042 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {useMemo} from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -57,146 +57,147 @@ const defaultProps = {
     personalDetails: {},
 };
 
-class ReportDetailsPage extends Component {
-    getPolicy() {
-        return this.props.policies[`${ONYXKEYS.COLLECTION.POLICY}${this.props.report.policyID}`];
-    }
+const ReportDetailsPage = (props) => {
+    const policy = useMemo(() => props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`], [props.policies, props.report.policyID]);
+    const isPolicyAdmin = useMemo(() => PolicyUtils.isPolicyAdmin(policy), [policy]);
+    const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(props.report), [props.report]);
+    const isChatRoom = useMemo(() => ReportUtils.isChatRoom(props.report), [props.report]);
+    const isThread = useMemo(() => ReportUtils.isThread(props.report), [props.report]);
+    const isUserCreatedPolicyRoom = useMemo(() => ReportUtils.isUserCreatedPolicyRoom(props.report), [props.report]);
+    const isArchivedRoom = useMemo(() => ReportUtils.isArchivedRoom(props.report), [props.report]);
 
-    getMenuItems() {
-        const menuItems = [
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- policy is a dependency because `getChatRoomSubtitle` calls `getPolicyName` which in turn retrieves the value from the `policy` value stored in Onyx
+    const chatRoomSubtitle = useMemo(() => ReportUtils.getChatRoomSubtitle(props.report), [props.report, policy]);
+    const canLeaveRoom = useMemo(() => ReportUtils.canLeaveRoom(props.report, !_.isEmpty(policy)), [policy, props.report]);
+    const participants = useMemo(() => lodashGet(props.report, 'participants', []), [props.report]);
+
+    const menuItems = useMemo(() => {
+        if (isArchivedRoom) {
+            return [];
+        }
+
+        const items = [
             {
                 key: CONST.REPORT_DETAILS_MENU_ITEM.SHARE_CODE,
                 translationKey: 'common.shareCode',
                 icon: Expensicons.QrCode,
-                action: () => Navigation.navigate(ROUTES.getReportShareCodeRoute(this.props.report.reportID)),
+                action: () => Navigation.navigate(ROUTES.getReportShareCodeRoute(props.report.reportID)),
             },
         ];
 
-        if (ReportUtils.isArchivedRoom(this.props.report)) {
-            return [];
-        }
-
-        if (lodashGet(this.props.report, 'participants', []).length) {
-            menuItems.push({
+        if (participants.length) {
+            items.push({
                 key: CONST.REPORT_DETAILS_MENU_ITEM.MEMBERS,
                 translationKey: 'common.members',
                 icon: Expensicons.Users,
-                subtitle: lodashGet(this.props.report, 'participants', []).length,
+                subtitle: participants.length,
                 action: () => {
-                    Navigation.navigate(ROUTES.getReportParticipantsRoute(this.props.report.reportID));
+                    Navigation.navigate(ROUTES.getReportParticipantsRoute(props.report.reportID));
                 },
             });
         }
 
-        if (ReportUtils.isPolicyExpenseChat(this.props.report) || ReportUtils.isChatRoom(this.props.report) || ReportUtils.isThread(this.props.report)) {
-            menuItems.push({
+        if (isPolicyExpenseChat || isChatRoom || isThread) {
+            items.push({
                 key: CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS,
                 translationKey: 'common.settings',
                 icon: Expensicons.Gear,
                 action: () => {
-                    Navigation.navigate(ROUTES.getReportSettingsRoute(this.props.report.reportID));
+                    Navigation.navigate(ROUTES.getReportSettingsRoute(props.report.reportID));
                 },
             });
         }
 
-        const policy = this.getPolicy();
-        const isThread = ReportUtils.isThread(this.props.report);
-        if (ReportUtils.isUserCreatedPolicyRoom(this.props.report) || ReportUtils.canLeaveRoom(this.props.report, !_.isEmpty(policy)) || isThread) {
-            menuItems.push({
+        if (isUserCreatedPolicyRoom || canLeaveRoom || isThread) {
+            items.push({
                 key: CONST.REPORT_DETAILS_MENU_ITEM.LEAVE_ROOM,
                 translationKey: isThread ? 'common.leaveThread' : 'common.leaveRoom',
                 icon: Expensicons.Exit,
-                action: () => Report.leaveRoom(this.props.report.reportID),
+                action: () => Report.leaveRoom(props.report.reportID),
             });
         }
 
-        return menuItems;
-    }
-
-    render() {
-        const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(this.props.report);
-        const isChatRoom = ReportUtils.isChatRoom(this.props.report);
-        const isThread = ReportUtils.isThread(this.props.report);
-        const chatRoomSubtitle = ReportUtils.getChatRoomSubtitle(this.props.report);
-        const participants = lodashGet(this.props.report, 'participants', []);
-        const isMultipleParticipant = participants.length > 1;
-        const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(
-            OptionsListUtils.getPersonalDetailsForLogins(participants, this.props.personalDetails),
-            isMultipleParticipant,
-        );
-        const menuItems = this.getMenuItems();
-        const isPolicyAdmin = PolicyUtils.isPolicyAdmin(this.getPolicy());
-        const chatRoomSubtitleText = (
-            <Text
-                style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.mb2, styles.pre]}
-                numberOfLines={1}
-            >
-                {chatRoomSubtitle}
-            </Text>
-        );
-        return (
-            <ScreenWrapper>
-                <FullPageNotFoundView shouldShow={_.isEmpty(this.props.report)}>
-                    <HeaderWithCloseButton
-                        title={this.props.translate('common.details')}
-                        onBackButtonPress={() => Navigation.goBack()}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
-                    />
-                    <ScrollView style={[styles.flex1]}>
-                        <View style={[styles.m5]}>
-                            <View style={styles.reportDetailsTitleContainer}>
-                                <View style={styles.mb4}>
-                                    <RoomHeaderAvatars icons={ReportUtils.getIcons(this.props.report, this.props.personalDetails, this.props.policies)} />
-                                </View>
-                                <View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
-                                    <View style={[styles.alignSelfCenter, styles.w100]}>
-                                        <DisplayNames
-                                            fullTitle={ReportUtils.getReportName(this.props.report)}
-                                            displayNamesWithTooltips={displayNamesWithTooltips}
-                                            tooltipEnabled
-                                            numberOfLines={1}
-                                            textStyles={[styles.textHeadline, styles.mb2, styles.textAlignCenter, styles.pre]}
-                                            shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isThread}
-                                        />
-                                    </View>
-                                    {isPolicyAdmin ? (
-                                        <Pressable
-                                            onPress={() => {
-                                                Navigation.navigate(ROUTES.getWorkspaceInitialRoute(this.props.report.policyID));
-                                            }}
-                                        >
-                                            {chatRoomSubtitleText}
-                                        </Pressable>
-                                    ) : (
-                                        chatRoomSubtitleText
-                                    )}
+        return items;
+    }, [props.report.reportID, participants, isArchivedRoom, isPolicyExpenseChat, isChatRoom, isThread, isUserCreatedPolicyRoom, canLeaveRoom]);
+
+    const displayNamesWithTooltips = useMemo(() => {
+        const hasMultipleParticipants = participants.length > 1;
+        return ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForLogins(participants, props.personalDetails), hasMultipleParticipants);
+    }, [participants, props.personalDetails]);
+
+    const chatRoomSubtitleText = (
+        <Text
+            style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.mb2, styles.pre]}
+            numberOfLines={1}
+        >
+            {chatRoomSubtitle}
+        </Text>
+    );
+
+    return (
+        <ScreenWrapper>
+            <FullPageNotFoundView shouldShow={_.isEmpty(props.report)}>
+                <HeaderWithCloseButton
+                    title={props.translate('common.details')}
+                    onBackButtonPress={() => Navigation.goBack()}
+                    onCloseButtonPress={() => Navigation.dismissModal()}
+                />
+                <ScrollView style={[styles.flex1]}>
+                    <View style={[styles.m5]}>
+                        <View style={styles.reportDetailsTitleContainer}>
+                            <View style={styles.mb4}>
+                                <RoomHeaderAvatars icons={ReportUtils.getIcons(props.report, props.personalDetails, props.policies)} />
+                            </View>
+                            <View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
+                                <View style={[styles.alignSelfCenter, styles.w100]}>
+                                    <DisplayNames
+                                        fullTitle={ReportUtils.getReportName(props.report)}
+                                        displayNamesWithTooltips={displayNamesWithTooltips}
+                                        tooltipEnabled
+                                        numberOfLines={1}
+                                        textStyles={[styles.textHeadline, styles.mb2, styles.textAlignCenter, styles.pre]}
+                                        shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isThread}
+                                    />
                                 </View>
+                                {isPolicyAdmin ? (
+                                    <Pressable
+                                        onPress={() => {
+                                            Navigation.navigate(ROUTES.getWorkspaceInitialRoute(props.report.policyID));
+                                        }}
+                                    >
+                                        {chatRoomSubtitleText}
+                                    </Pressable>
+                                ) : (
+                                    chatRoomSubtitleText
+                                )}
                             </View>
                         </View>
-                        {_.map(menuItems, (item) => {
-                            const brickRoadIndicator =
-                                ReportUtils.hasReportNameError(this.props.report) && item.key === CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
-                            return (
-                                <MenuItem
-                                    key={item.key}
-                                    title={this.props.translate(item.translationKey)}
-                                    subtitle={item.subtitle}
-                                    icon={item.icon}
-                                    onPress={Session.checkIfActionIsAllowed(item.action)}
-                                    shouldShowRightIcon
-                                    brickRoadIndicator={brickRoadIndicator}
-                                />
-                            );
-                        })}
-                    </ScrollView>
-                </FullPageNotFoundView>
-            </ScreenWrapper>
-        );
-    }
-}
+                    </View>
+                    {_.map(menuItems, (item) => {
+                        const brickRoadIndicator =
+                            ReportUtils.hasReportNameError(props.report) && item.key === CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
+                        return (
+                            <MenuItem
+                                key={item.key}
+                                title={props.translate(item.translationKey)}
+                                subtitle={item.subtitle}
+                                icon={item.icon}
+                                onPress={Session.checkIfActionIsAllowed(item.action)}
+                                shouldShowRightIcon
+                                brickRoadIndicator={brickRoadIndicator}
+                            />
+                        );
+                    })}
+                </ScrollView>
+            </FullPageNotFoundView>
+        </ScreenWrapper>
+    );
+};
 
+ReportDetailsPage.displayName = 'ReportDetailsPage';
 ReportDetailsPage.propTypes = propTypes;
 ReportDetailsPage.defaultProps = defaultProps;
+
 export default compose(
     withLocalize,
     withReportOrNotFound,