Performance Improvements / version bumps

[gomesalexandre]

TIL

• <Profiler /> is fren
• <Suspense /> was "mis" used (only for one thing)
  • Any children can "suspend" rendering and nearest parent with Suspense can render a placeholder, but the only one who was was lazy, i.e lazy loading the component itself
  • <Suspense /> is supported by react-query with useSuspenseQuery
  • Also supported by react-router since v5 (stay tuned)
• useDeferredValue() + useTransition() are frens
  • useDeferredValue():
    • "defers updating part of the UI", kind of the a similar concept to debouncing: whichever value is deferred, will always keep its previous value
    • very simple, yet many use cases e.g:
      - defer initial long things e.g feat: blazingly fast activity tab #9122
      - update search query immediately on users typing (using your searchQuery) but let the heavy bits be procesed later (react on const deferredSearchQuery = useDeferredValue(searchQuery))
  • useTransition():
    • marks an expensive operation (called "action") as a "transition" when ran
    • said actions become non-urgent, do not block the main thread, and only run said action when browser is idle
    • transitions usually used in a scenario when it's better off showing the previous (or initial) content rather than proper suspending the tree and showing a fallback
• react 19 makes it even noicer
  • useTransition() supports async functions
  • useOptimistic() for optimistic UI updates
  • use() for async functions directly in react
  • Suspense improvements

Action Items

• When unsure, <Profiler /> it and feed it to Cursor
• Try and consistently make use of all perceived/perf techniques
• Bump react-router to latest (prerequisite for react 19, supports Suspense)
• Bump RTK/react-redux to latest (prerequisite for react 19, perf. improvements)
• Bump to react-19
• ???
• Profit