Problem
When using Request Money flow, the getOptions function is called multiple times, doing heavy operations and slowing down the app. Based on a provided trace, a single execution of this function takes ~2.5s, and it is called when the following actions are performed:
- entering the Request Money participants list
- typing in the search input (each keystroke)
- pressing the option from the list
- pressing “split” on the option item
Additionally, the server search to get reports is also called on each keystroke.
All of this is making the app unresponsive for a long time, making it difficult to reach the next step of the money request process. The total amount of getOptions execution time in a provided trace was 29.7s.
Solution
To address this problem, we should reduce the amount of getOptions calls to minimum. We can achieve this by:
- using debounced state instead of calling the function on each keystroke - this way we call getOptions and server search only when user is not typing in the input anymore
- properly memoizing the participants selector component - selecting the user from the list is updating the transaction, which triggers the heavy operation even if the participants list hasn’t changed
There is still need of calling the function when pressing “Split”, but there is a possibility we would be able to replace it with filtering once it’s implemented in the list (this is one of the efforts from the performance audit).
Considering the following scenario:
- User requests money and goes to participants list
- User types “workspace” in the search
- User presses the selected option item
Before changes the getOptions was called 16 times, and after it is called 2 times.
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~019e025ca125dedd18
- Upwork Job ID: 1773283266133659648
- Last Price Increase: 2024-03-28
Issue Owner
Current Issue Owner: @slafortune
Problem
When using Request Money flow, the getOptions function is called multiple times, doing heavy operations and slowing down the app. Based on a provided trace, a single execution of this function takes ~2.5s, and it is called when the following actions are performed:
Additionally, the server search to get reports is also called on each keystroke.
All of this is making the app unresponsive for a long time, making it difficult to reach the next step of the money request process. The total amount of getOptions execution time in a provided trace was 29.7s.
Solution
To address this problem, we should reduce the amount of getOptions calls to minimum. We can achieve this by:
There is still need of calling the function when pressing “Split”, but there is a possibility we would be able to replace it with filtering once it’s implemented in the list (this is one of the efforts from the performance audit).
Considering the following scenario:
Before changes the getOptions was called 16 times, and after it is called 2 times.
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @slafortune