Use advanced React features and good practices

[maxpatiiuk]

• Sort react component props (event handlers last). Event handlers should come last as they are unusually large (occupy multiple lines), thus single line props could be visually lost in between them
• https://reactjs.org/docs/react-api.html#reactchildrenmap
• https://reactjs.org/docs/hooks-reference.html#usedeferredvalue
• https://reactjs.org/docs/hooks-reference.html#usetransition
• Reduce usage of React.useRef (don't manipulate dom, use context, etc as it causes bugs)
• Reduce usages of ref and forwardRef as much as possible as it's not reactful (doesn't trigger re-render, thus bug prone)
• Don't manipulate dom manually anywhere. Use react if possible (Leaflet, Workbench)
• Make sure callback refs are memorized. Or else they could cause performance problems in some palces
• Run a profiler on all pages and look for unexpected useless rerenders
• Consider un-rendering the child components when <details> element is closed
• If React.useState default value depends on a prop, use useLiveState
  To avoid a bug when the default value depends on a prop, but then the prop changed (i.e, because the same component is now serving a different resource)
  This bug is especially common when adding/removing a line in a list of lines (xml-editor Deleting fields always deletes last field in the list #3332)
  Or try to not use default values that depends on props and use useEffect instead
• Consider adding a react hooks library(ies). To reduce how much code we have to maintain