[x] This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
[ ] My work includes tests or is validated by existing tests.
Summary
This PR addresses a performance issue with the Dropdown component. When launching a Clinical form in the tablet viewport and clicking on a dropdown field, the Dropdown component re-renders excessively, causing the entire form UI to freeze. To mitigate this, I've updated the useEffect hook's dependency array and cached the handleChange function definition to ensure stability between re-renders. I need to investigate further to understand the root cause, although these two measures seem to resolve the bug.
Requirements
Summary
This PR addresses a performance issue with the Dropdown component. When launching a Clinical form in the tablet viewport and clicking on a dropdown field, the Dropdown component re-renders excessively, causing the entire form UI to freeze. To mitigate this, I've updated the useEffect hook's dependency array and cached the
handleChange
function definition to ensure stability between re-renders. I need to investigate further to understand the root cause, although these two measures seem to resolve the bug.Screenshots
Bug
https://github.com/openmrs/openmrs-form-engine-lib/assets/8509731/845d1207-f86e-423e-a52d-88d9468b1c48
Fix
https://github.com/openmrs/openmrs-form-engine-lib/assets/8509731/82aa0ed5-442a-42d9-a66c-89f7ed09cb0c
Related Issue
O3-3350
Other
We should enable the
rules-of-hooks/exhaustive-deps
rule in our ESLint config and set it toerror
to catch similar bugs in the future.