diff --git a/src/components/OptionListContextProvider.tsx b/src/components/OptionListContextProvider.tsx index 5693d68a8c2c..aa3552e989d2 100644 --- a/src/components/OptionListContextProvider.tsx +++ b/src/components/OptionListContextProvider.tsx @@ -1,5 +1,6 @@ import React, {createContext, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; import {useOnyx} from 'react-native-onyx'; +import type {OnyxCollection} from 'react-native-onyx'; import usePrevious from '@hooks/usePrevious'; import {createOptionFromReport, createOptionList, processReport} from '@libs/OptionsListUtils'; import type {OptionList, SearchOption} from '@libs/OptionsListUtils'; @@ -84,23 +85,35 @@ function OptionsListContextProvider({children}: OptionsListProviderProps) { loadOptions(); }, [prevReportAttributesLocale, loadOptions, reportAttributes?.locale]); + const changedReportsEntries = useMemo(() => { + const result: OnyxCollection = {}; + + Object.keys(changedReports ?? {}).forEach((key) => { + const report = reports?.[key]; + if (report) { + result[key] = report; + } + }); + return result; + }, [changedReports, reports]); + /** * This effect is responsible for updating the options only for changed reports */ useEffect(() => { - if (!changedReports || !areOptionsInitialized.current) { + if (!changedReportsEntries || !areOptionsInitialized.current) { return; } setOptions((prevOptions) => { - const changedReportKeys = Object.keys(changedReports); + const changedReportKeys = Object.keys(changedReportsEntries); if (changedReportKeys.length === 0) { return prevOptions; } const updatedReportsMap = new Map(prevOptions.reports.map((report) => [report.reportID, report])); changedReportKeys.forEach((reportKey) => { - const report = changedReports[reportKey]; + const report = changedReportsEntries[reportKey]; const reportID = reportKey.replace(ONYXKEYS.COLLECTION.REPORT, ''); const {reportOption} = processReport(report, personalDetails); @@ -116,7 +129,7 @@ function OptionsListContextProvider({children}: OptionsListProviderProps) { reports: Array.from(updatedReportsMap.values()), }; }); - }, [changedReports, personalDetails]); + }, [changedReportsEntries, personalDetails]); /** * This effect is used to update the options list when personal details change.