Decide How To Manage Form State In A Performant Way

[JamieB-gu]

If we naively lift form state up to the reducer and do nothing else, the performance drops because the whole app re-renders on every key press (typing into the form). Two options to solve this:

1. Manage the form state at the form component level.
2. Manage the form state at the top level, and use context to pass it to the form to prevent intermediate components re-rendering.

[arelra]

1. The amount of lag caused by the performance degradation was surprising. It's worth checking if we have any unnecessary re-renders or computation in the discussion component tree. Possible suspects are:
   • chained useEffects that could be derived state instead
   • reassignment of objects which changes their reference and hence causes unnecessary triggering of useEffects
2. I think I saw memo mentioned in another issue, memo is usually a last resort sticky-plaster. It is usually worth understanding why the re-renders are slow before reaching for memoisation.
3. Another option is a composition 'trick' which passes components as props to avoid re-renders although this is getting into the esoteric territory of React performance optimisation.
   https://overreacted.io/before-you-memo/
   https://kentcdodds.com/blog/optimize-react-re-renders
   https://www.developerway.com/posts/react-re-renders-guide#part3.2
4. It seems like we are looking for a heuristic to guide us on where to place state. I think rather than a binary 'local' or 'all at the top' we could perhaps expand this:
   • if state is not dependant or interacts with any other state then it should stay local to the component
   • if state is dependent or interacts with other state then it can move to the top of the discussion tree
5. Context is a good option for state propagation down a complex tree but we should make it clear that in almost all other cases we favour prop drilling as it is more explicit

[mxdvl]

Fixed by #10531