[HOLD for payment 2024-04-15] [Performance] Implement caching of list options #37878
Description
Problem
When opening the search page and calling getOptions function, which is responsible for generating a list of options based on specific parameters and conditions, it loops through all the reports and personal details. The most expensive function that is called on each item is createOption - it fills almost all the time of getOptions.
These calculations are done from scratch each time any search page utilizing getOptions is being opened. It means each time Search page is getting opened, user has to wait up to a few seconds to get a list of options. Additionally, the bigger input of getOptions is, the slower the function gets.
Solution
We can implement a solution where all available options are generated only once. They can be shared across all searchable lists, like Search page, New chat, Invite to workspace etc by using React Context. The only thing needed when opening the search page is actually filtering the list based on options currently passed to getOptions.
Options should be generated while opening any search screen for the first time. It means if the screen is opened for the first time, it would display a skeleton first and display options once they are generated, but every next time it will just filter options and display them almost instantly.
Options list will be updated automatically in the background whenever personal details or reports change. Since calling getOptions is costy, we should instead retrieve the updated report ID, create just a single option instead of generating all of them and update it in the options array.
Some results I was able to achieve with PoC:
1st opening of the Search Page: Before: ~4500ms → After: ~4500ms -> no change
2nd and each subsequent opening of the Search Page: Before: ~4500ms → After: ~380ms -> ~12x faster
Update of a single option in an option list: ~0.3ms
from: @TMisiukiewicz here
Metadata
Metadata
Type
Projects
Status