openmrs / openmrs-esm-form-engine-lib

React Form Engine library for O3
Other
10 stars 59 forks source link

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

Closed denniskigen closed 4 months ago

denniskigen commented 4 months ago

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 to error to catch similar bugs in the future.

github-actions[bot] commented 4 months ago

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