(fix) O3-3350: Resolve dropdown re-rendering bug in the tablet viewport

[denniskigen]

Requirements

• 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 conforms to the OpenMRS 3.0 Styleguide and design documentation.
• 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.

Screenshots

Bug

dropdown-rerendering-bug.mp4

Fix

dropdown-re-rendering-fix.mp4

Related Issue

O3-3350

Other

We should enable the rules-of-hooks/exhaustive-deps rule in our ESLint config and set it to error to catch similar bugs in the future.

[github-actions]

Size Change: +72 B (+0.01%)

Total Size: 1.05 MB

ℹ️ View Unchanged

Filename	Size	Change
dist/184.js	11.2 kB	0 B
dist/225.js	2.57 kB	0 B
dist/29.js	163 kB	0 B
dist/300.js	709 B	0 B
dist/31.js	5.32 kB	0 B
dist/318.js	2.43 kB	0 B
dist/327.js	1.84 kB	0 B
dist/335.js	967 B	0 B
dist/353.js	3.02 kB	0 B
dist/371.js	71.5 kB	0 B
dist/41.js	3.36 kB	0 B
dist/436.js	759 B	0 B
dist/465.js	182 kB	0 B
dist/540.js	2.63 kB	0 B
dist/55.js	2.14 kB	0 B
dist/635.js	14.3 kB	0 B
dist/708.js	245 kB	+38 B (+0.02%)
dist/8.js	3.68 kB	0 B
dist/979.js	6.85 kB	0 B
dist/99.js	690 B	0 B
dist/993.js	3.09 kB	0 B
dist/998.js	15.6 kB	0 B
dist/main.js	300 kB	+34 B (+0.01%)
dist/openmrs-form-engine-lib.js	3.76 kB	0 B

_{compressed-size-action}

[samuelmale]

LGTM 🍻