[Bug] Unstable IDs generating React Reconciliation issues
Description:
The application uses Date.now() to generate IDs for stateStyles inside useMemo hooks (e.g., preset-main-${Date.now()}).
Impact:
- IDs change on every re-memoization/re-render.
- Causes React to destroy and recreate DOM nodes instead of updating them.
- Potential ID collisions if multiple IDs are generated within the same millisecond.
Proposed Solution:
- Use deterministic IDs based on state values (e.g.,
preset-main-on).
- Or use
crypto.randomUUID() during state initialization only.
[Bug] Array Mutation inside useMemo
Description:
The configWithPresetConditions memoization directly mutates arrays (e.g., newStateStyles.push(...)) without clearing previous results.
Impact:
- Accumulation of redundant style entries over time.
- Unpredictable UI behavior due to direct state mutation.
Proposed Solution:
Ensure the memo function is pure. Filter out existing preset styles before adding new ones and return a new object spread.
[Bug] Unstable IDs generating React Reconciliation issues
Description:
The application uses
Date.now()to generate IDs forstateStylesinsideuseMemohooks (e.g.,preset-main-${Date.now()}).Impact:
Proposed Solution:
preset-main-on).crypto.randomUUID()during state initialization only.[Bug] Array Mutation inside useMemo
Description:
The
configWithPresetConditionsmemoization directly mutates arrays (e.g.,newStateStyles.push(...)) without clearing previous results.Impact:
Proposed Solution:
Ensure the memo function is pure. Filter out existing preset styles before adding new ones and return a new object spread.