Improve state management [SYNTH-263]

[0xda157]

Task

SYNTH-263

Symptom

many of our components include useReducers purely to avoid manage state in the correct react way

Solution

this pr improve the state handling in many locations, primarily by copying the state using their set function instead of directly mutating them.

Note

There are few more places with very poor state management, but I've deemed them too difficult to improve in this pr. Ideally they will be addressed later.

Verification

Playwright tests pass, and the UI seems to work as expected.

---

Before merging, ensure the following criteria are met:

• All acceptance criteria outlined in the ticket are met.
• Necessary test cases have been added and updated.
• A feature toggle or safe disable path has been added (if applicable).
• User-facing polish:
  • Ask: "Is this ready-looking?"
• Cross-linking between Jira and GitHub:
  • PR links to the relevant Jira issue.
  • Jira ticket has a comment referencing this PR.

[Dhruv-0-Arora]

This will fire a preferenceChanged event for every preference on mount and twice in dev strictmode

instead, I would suggest

<Checkbox {...props} label={label} checked={pref} onClick={
setPref(val)
PreferencesSystem.setUserPreferences(preference, val)
} />

[0xda157]

This will fire a preferenceChanged event for every preference on mount and twice in dev strictmode

why is this an issue?

instead, I would suggest

<Checkbox {...props} label={label} checked={pref} onClick={
setPref(val)
PreferencesSystem.setUserPreferences(preference, val)
} />

this is a very strong react anti-pattern. If setPref gets called somewhere else, after this change, it will lead to the UI being in an invalid state.

[PepperLola]

I agree with @0xda157; there's not much of a cost to the event being fired repeatedly since we have relatively few listeners and preferences, and it avoids ending up with an invalid UI state

[Dhruv-0-Arora]

So we are reading from the preferences and setting the preferences...

There are 13 preference events being triggered and it seems that 8 do not have listeners:
ReportAnalytics, SubsystemGravity, RenderSceneTag, RenderScoreboard, ShowViewCube

ReportAnalytics & SubsystemGravity might be problematic:
-> ReportAnalytics calls sendMetaData() [eventually] -> sending to google analytics
-> calls GetMotorSettings() and rewrites 2 torque limits on a constraint

@PepperLola @0xda157