perf: create reportAttributes derived value

src/ONYXKEYS.ts

@@ -784,6 +784,7 @@ const ONYXKEYS = {
     },
     DERIVED: {
         CONCIERGE_CHAT_REPORT_ID: 'conciergeChatReportID',
+        REPORT_ATTRIBUTES: 'reportAttributes',
     },
 } as const;
 
@@ -1116,6 +1117,7 @@ type OnyxValuesMapping = {
 
 type OnyxDerivedValuesMapping = {
     [ONYXKEYS.DERIVED.CONCIERGE_CHAT_REPORT_ID]: string | undefined;
+    [ONYXKEYS.DERIVED.REPORT_ATTRIBUTES]: Record<string, OnyxTypes.ReportAttributes>;
 };
 
 type OnyxValues = OnyxValuesMapping & OnyxCollectionValuesMapping & OnyxFormValuesMapping & OnyxFormDraftValuesMapping & OnyxDerivedValuesMapping;

src/libs/ReportUtils.ts

@@ -37,6 +37,7 @@ import type {
     PolicyReportField,
     Report,
     ReportAction,
+    ReportAttributes,
     ReportMetadata,
     ReportNameValuePairs,
     ReportViolationName,
@@ -1029,6 +1030,17 @@ Onyx.connect({
     callback: (value) => (activePolicyID = value),
 });
 
+let reportAttributes: OnyxEntry<Record<string, ReportAttributes>>;
+Onyx.connect({
+    key: ONYXKEYS.DERIVED.REPORT_ATTRIBUTES,
+    callback: (value) => {
+        if (!value) {
+            return;
+        }
+        reportAttributes = value;
+    },
+});
+
 let newGroupChatDraft: OnyxEntry<NewGroupChatDraft>;
 Onyx.connect({
     key: ONYXKEYS.NEW_GROUP_CHAT_DRAFT,
@@ -4504,13 +4516,6 @@ function getInvoicesChatName({
     return getPolicyName({report, policy: invoiceReceiverPolicy, policies});
 }
 
-const reportNameCache = new Map<string, {lastVisibleActionCreated: string; reportName: string}>();
-
-/**
- * Get a cache key for the report name.
- */
-const getCacheKey = (report: OnyxEntry<Report>): string => `${report?.reportID}-${report?.lastVisibleActionCreated}-${report?.reportName}`;
-
 /**
  * Get the title for a report using only participant names. This may be used for 1:1 DMs and other non-categorized chats.
  */
@@ -4528,6 +4533,13 @@ function buildReportNameFromParticipantNames({report, personalDetails}: {report:
         .join(', ');
 }
 
+function generateReportName(report: OnyxEntry<Report>): string {
+    if (!report) {
+        return '';
+    }
+    return getReportNameInternal({report});
+}
+
 /**
  * Get the title for a report.
  */
@@ -4538,6 +4550,12 @@ function getReportName(
     personalDetails?: Partial<PersonalDetailsList>,
     invoiceReceiverPolicy?: OnyxEntry<Policy>,
 ): string {
+    // Check if we can use report name in derived values - only when we have report but no other params
+    const canUseDerivedValue = report && policy === undefined && parentReportActionParam === undefined && personalDetails === undefined && invoiceReceiverPolicy === undefined;
+
+    if (canUseDerivedValue && reportAttributes?.[report.reportID]) {
+        return reportAttributes[report.reportID].reportName;
+    }
     return getReportNameInternal({report, policy, parentReportActionParam, personalDetails, invoiceReceiverPolicy});
 }
 
@@ -4567,15 +4585,6 @@ function getReportNameInternal({
     policies,
 }: GetReportNameParams): string {
     const reportID = report?.reportID;
-    const cacheKey = getCacheKey(report);
-
-    if (reportID) {
-        const reportNameFromCache = reportNameCache.get(cacheKey);
-
-        if (reportNameFromCache?.reportName && reportNameFromCache.reportName === report?.reportName && reportNameFromCache.reportName !== CONST.REPORT.DEFAULT_REPORT_NAME) {
-            return reportNameFromCache.reportName;
-        }
-    }
 
     let formattedName: string | undefined;
     let parentReportAction: OnyxEntry<ReportAction>;
@@ -4759,20 +4768,12 @@ function getReportNameInternal({
     }
 
     if (formattedName) {
-        if (reportID) {
-            reportNameCache.set(cacheKey, {lastVisibleActionCreated: report?.lastVisibleActionCreated ?? '', reportName: formattedName});
-        }
-
         return formatReportLastMessageText(formattedName);
     }
 
     // Not a room or PolicyExpenseChat, generate title from first 5 other participants
     formattedName = buildReportNameFromParticipantNames({report, personalDetails});
 
-    if (reportID) {
-        reportNameCache.set(cacheKey, {lastVisibleActionCreated: report?.lastVisibleActionCreated ?? '', reportName: formattedName});
-    }
-
     return formattedName;
 }
 
@@ -10583,6 +10584,7 @@ export {
     getReportSubtitlePrefix,
     getPolicyChangeMessage,
     getExpenseReportStateAndStatus,
+    generateReportName,
     navigateToLinkedReportAction,
     buildOptimisticResolvedDuplicatesReportAction,
     populateOptimisticReportFormula,

src/libs/actions/OnyxDerived/ONYX_DERIVED_VALUES.ts

@@ -1,6 +1,7 @@
 import type {ValueOf} from 'type-fest';
 import ONYXKEYS from '@src/ONYXKEYS';
 import conciergeChatReportIDConfig from './configs/conciergeChatReportID';
+import reportAttributesConfig from './configs/reportAttributes';
 import type {OnyxDerivedValueConfig} from './types';
 
 /**
@@ -9,6 +10,7 @@ import type {OnyxDerivedValueConfig} from './types';
  */
 const ONYX_DERIVED_VALUES = {
     [ONYXKEYS.DERIVED.CONCIERGE_CHAT_REPORT_ID]: conciergeChatReportIDConfig,
+    [ONYXKEYS.DERIVED.REPORT_ATTRIBUTES]: reportAttributesConfig,
 } as const satisfies {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [Key in ValueOf<typeof ONYXKEYS.DERIVED>]: OnyxDerivedValueConfig<Key, any>;

src/libs/actions/OnyxDerived/configs/reportAttributes.ts

@@ -0,0 +1,36 @@
+import {generateReportName} from '@libs/ReportUtils';
+import createOnyxDerivedValueConfig from '@userActions/OnyxDerived/createOnyxDerivedValueConfig';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {ReportAttributes} from '@src/types/onyx';
+
+/**
+ * This derived value is used to get the report attributes for the report.
+ * Dependency on ONYXKEYS.PERSONAL_DETAILS_LIST is to ensure that the report attributes are generated after the personal details are available.
+ */
+
+export default createOnyxDerivedValueConfig({
+    key: ONYXKEYS.DERIVED.REPORT_ATTRIBUTES,
+    dependencies: [ONYXKEYS.COLLECTION.REPORT, ONYXKEYS.PERSONAL_DETAILS_LIST, ONYXKEYS.NVP_PREFERRED_LOCALE],
+    compute: ([reports, personalDetails, preferredLocale], {currentValue, sourceValues}) => {
+        if (!reports || !personalDetails || !preferredLocale) {
+            return {};
+        }
+
+        const reportUpdates = sourceValues?.[ONYXKEYS.COLLECTION.REPORT];
+
+        return Object.values(reportUpdates ?? reports).reduce<Record<string, ReportAttributes>>(
+            (acc, report) => {
+                if (!report) {
+                    return acc;
+                }
+
+                acc[report.reportID] = {
+                    reportName: generateReportName(report),
+                };
+
+                return acc;
+            },
+            reportUpdates && currentValue ? currentValue : {},
+        );
+    },
+});

src/libs/actions/OnyxDerived/index.ts

@@ -10,6 +10,7 @@ import OnyxUtils from 'react-native-onyx/dist/OnyxUtils';
 import Log from '@libs/Log';
 import ObjectUtils from '@src/types/utils/ObjectUtils';
 import ONYX_DERIVED_VALUES from './ONYX_DERIVED_VALUES';
+import type {DerivedValueContext} from './types';
 
 /**
  * Initialize all Onyx derived values, store them in Onyx, and setup listeners to update them when dependencies change.
@@ -23,11 +24,12 @@ function init() {
         OnyxUtils.get(key).then((storedDerivedValue) => {
             let derivedValue = storedDerivedValue;
             if (derivedValue) {
-                Log.info(`Derived value ${derivedValue} for ${key} restored from disk`);
+                Log.info(`Derived value for ${key} restored from disk`);
             } else {
                 OnyxUtils.tupleGet(dependencies).then((values) => {
+                    // @ts-expect-error TypeScript can't confirm the shape of tupleGet's return value matches the compute function's parameters
+                    derivedValue = compute(values, {currentValue: derivedValue});
                     dependencyValues = values;
-                    derivedValue = compute(values, derivedValue);
                     Onyx.set(key, derivedValue ?? null);
                 });
             }
@@ -36,13 +38,23 @@ function init() {
                 dependencyValues[i] = value;
             };
 
-            const recomputeDerivedValue = () => {
-                const newDerivedValue = compute(dependencyValues, derivedValue);
-                if (newDerivedValue !== derivedValue) {
-                    Log.info(`[OnyxDerived] value for key ${key} changed, updating it in Onyx`, false, {old: derivedValue ?? null, new: newDerivedValue ?? null});
-                    derivedValue = newDerivedValue;
-                    Onyx.set(key, derivedValue ?? null);
+            const recomputeDerivedValue = (sourceKey?: string, sourceValue?: unknown) => {
+                const context: DerivedValueContext<typeof key, typeof dependencies> = {
+                    currentValue: derivedValue,
+                    sourceValues: undefined,
+                };
+
+                // If we got a source key and value, add it to the sourceValues object
+                if (sourceKey && sourceValue !== undefined) {
+                    context.sourceValues = {
+                        [sourceKey]: sourceValue,
+                    };
                 }
+                // @ts-expect-error TypeScript can't confirm the shape of dependencyValues matches the compute function's parameters
+                const newDerivedValue = compute(dependencyValues, context);
+                Log.info(`[OnyxDerived] updating value for ${key} in Onyx`, false, {old: derivedValue ?? null, new: newDerivedValue ?? null});
+                derivedValue = newDerivedValue;
+                Onyx.set(key, derivedValue ?? null);
             };
 
             for (let i = 0; i < dependencies.length; i++) {
@@ -52,10 +64,10 @@ function init() {
                     Onyx.connect({
                         key: dependencyOnyxKey,
                         waitForCollectionCallback: true,
-                        callback: (value) => {
-                            Log.info(`[OnyxDerived] dependency ${dependencyOnyxKey} for derived key ${key} changed, recomputing`);
+                        callback: (value, collectionKey, sourceValue) => {
+                            Log.info(`[OnyxDerived] dependency ${collectionKey} for derived key ${key} changed, recomputing`);
                             setDependencyValue(i, value as Parameters<typeof compute>[0][typeof i]);
-                            recomputeDerivedValue();
+                            recomputeDerivedValue(dependencyOnyxKey, sourceValue);
                         },
                     });
                 } else {
@@ -64,7 +76,7 @@ function init() {
                         callback: (value) => {
                             Log.info(`[OnyxDerived] dependency ${dependencyOnyxKey} for derived key ${key} changed, recomputing`);
                             setDependencyValue(i, value as Parameters<typeof compute>[0][typeof i]);
-                            recomputeDerivedValue();
+                            recomputeDerivedValue(dependencyOnyxKey);
                         },
                     });
                 }

src/libs/actions/OnyxDerived/types.ts

@@ -1,8 +1,15 @@
-import type {OnyxValue} from 'react-native-onyx';
+import type {OnyxCollection, OnyxValue} from 'react-native-onyx';
 import type {NonEmptyTuple, ValueOf} from 'type-fest';
-import type {OnyxDerivedValuesMapping, OnyxKey} from '@src/ONYXKEYS';
+import type {OnyxCollectionKey, OnyxCollectionValuesMapping, OnyxDerivedValuesMapping, OnyxKey} from '@src/ONYXKEYS';
 import type ONYXKEYS from '@src/ONYXKEYS';
 
+type DerivedValueContext<Key extends OnyxKey, Deps extends NonEmptyTuple<Exclude<OnyxKey, Key>>> = {
+    currentValue?: OnyxValue<Key>;
+    sourceValues?: {
+        [K in Deps[number] as K extends OnyxCollectionKey ? K : never]?: K extends keyof OnyxCollectionValuesMapping ? OnyxCollection<OnyxCollectionValuesMapping[K]> : never;
+    };
+};
+
 /**
  * A derived value configuration describes:
  *  - a tuple of Onyx keys to subscribe to (dependencies),
@@ -17,9 +24,8 @@ type OnyxDerivedValueConfig<Key extends ValueOf<typeof ONYXKEYS.DERIVED>, Deps e
         args: {
             [Index in keyof Deps]: OnyxValue<Deps[Index]>;
         },
-        currentValue: OnyxValue<Key>,
+        context: DerivedValueContext<Key, Deps>,
     ) => OnyxDerivedValuesMapping[Key];
 };
 
-// eslint-disable-next-line import/prefer-default-export
-export type {OnyxDerivedValueConfig};
+export type {OnyxDerivedValueConfig, DerivedValueContext};

src/types/onyx/DerivedValues.ts

@@ -0,0 +1,11 @@
+/**
+ * The attributes of a report.
+ */
+type ReportAttributes = {
+    /**
+     * The name of the report.
+     */
+    reportName: string;
+};
+
+export default ReportAttributes;

src/types/onyx/index.ts

@@ -22,6 +22,7 @@ import type Credentials from './Credentials';
 import type Currency from './Currency';
 import type {CurrencyList} from './Currency';
 import type CustomStatusDraft from './CustomStatusDraft';
+import type ReportAttributes from './DerivedValues';
 import type DismissedProductTraining from './DismissedProductTraining';
 import type DismissedReferralBanners from './DismissedReferralBanners';
 import type Download from './Download';
@@ -260,5 +261,6 @@ export type {
     TravelProvisioning,
     SidePanel,
     LastPaymentMethodType,
+    ReportAttributes,
     TalkToAISales,
 };

tests/ui/GroupChatNameTests.tsx

@@ -97,26 +97,27 @@ function signInAndGetApp(reportName = '', participantAccountIDs?: number[]): Pro
         })
         .then(async () => {
             // Simulate setting an unread report and personal details
-            await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, {
-                reportID: REPORT_ID,
-                reportName,
-                lastMessageText: 'Test',
-                participants,
-                lastActorAccountID: USER_B_ACCOUNT_ID,
-                type: CONST.REPORT.TYPE.CHAT,
-                chatType: CONST.REPORT.CHAT_TYPE.GROUP,
-            });
-
-            await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, {
-                [USER_A_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_A_EMAIL, USER_A_ACCOUNT_ID, 'A'),
-                [USER_B_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_B_EMAIL, USER_B_ACCOUNT_ID, 'B'),
-                [USER_C_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_C_EMAIL, USER_C_ACCOUNT_ID, 'C'),
-                [USER_D_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_D_EMAIL, USER_D_ACCOUNT_ID, 'D'),
-                [USER_E_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_E_EMAIL, USER_E_ACCOUNT_ID, 'E'),
-                [USER_F_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_F_EMAIL, USER_F_ACCOUNT_ID, 'F'),
-                [USER_G_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_G_EMAIL, USER_G_ACCOUNT_ID, 'G'),
-                [USER_H_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_H_EMAIL, USER_H_ACCOUNT_ID, 'H'),
-            });
+            await Promise.all([
+                Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, {
+                    reportID: REPORT_ID,
+                    reportName,
+                    lastMessageText: 'Test',
+                    participants,
+                    lastActorAccountID: USER_B_ACCOUNT_ID,
+                    type: CONST.REPORT.TYPE.CHAT,
+                    chatType: CONST.REPORT.CHAT_TYPE.GROUP,
+                }),
+                Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+                    [USER_A_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_A_EMAIL, USER_A_ACCOUNT_ID, 'A'),
+                    [USER_B_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_B_EMAIL, USER_B_ACCOUNT_ID, 'B'),
+                    [USER_C_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_C_EMAIL, USER_C_ACCOUNT_ID, 'C'),
+                    [USER_D_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_D_EMAIL, USER_D_ACCOUNT_ID, 'D'),
+                    [USER_E_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_E_EMAIL, USER_E_ACCOUNT_ID, 'E'),
+                    [USER_F_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_F_EMAIL, USER_F_ACCOUNT_ID, 'F'),
+                    [USER_G_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_G_EMAIL, USER_G_ACCOUNT_ID, 'G'),
+                    [USER_H_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_H_EMAIL, USER_H_ACCOUNT_ID, 'H'),
+                }),
+            ]);
 
             // We manually setting the sidebar as loaded since the onLayout event does not fire in tests
             setSidebarLoaded();