Clean up react bad pratices [SYNTH-224]

[0xda157]

Task

SYNTH-224

Symptom

many bad practices which make code less readable and in some cases less performant

Solution

clean up the bad code

Verification

bun run fmt, bun run lint and bun run build all pass

---

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.

[rutmanz]

There are quite a few changes to switch the typing of functional components, what's the theory behind that?

[0xda157]

I think that React.FC<AnalyticsConsentProps> is too broad and AnalyticsConsentProps -> React.JSX.Element is a much more straight forward and narrower type. If we don't use React.FC the return type becomes much more useful, for example (): React.JSX.Element | null tells someone using their lsp hover that the function may not render, without having to view implementation of the component. As far as I can tell, aside from React.FC previously being bad pratice, there's no strong recommendation either way in the react community.

[rutmanz]

My IDE is also warning that React should be imported instead of used as a global namespace to make resolution more reliable

[rutmanz]

And this matters less but stylistically I prefer React.ReactElement over React.JSX.Element (which is basically an alias)

[0xda157]

lowkey decided that React.FC doesn't matter that much the remove ternary blocks doesn't really matter and too much of a pain

[rutmanz]

Otherwise LGTM

For the future though, it's a lot more tedious to re-review a PR if you force push because you can't see what's changed since the last review anymore.