feat: post on react performance techniques

[chrisvaillancourt]

Briefly discuss approaches to performance optimization in react

App architecture

• lazy loading (React.lazy) with suspense
• fast hydration
• avoid fetching during render
  • move requests to the top of the page
  • use relay
• don't share unnecessary state between components
• use state management libraries for anything that isn't simple (zustand, jotai)
• don't use css in js
  • Sam Magura, maintainer of Emotion on why he's no longer using css in js solutions
  • is css in js bad? blog post

Optimizing re-renders

• component memoization
• react compiler
• useMemo
• useCallback
• don't define functions / objects in the render body of a function
  • don't define event handlers directly in line with the component
• remove anything that will change between renders i.e. new Date()
• don't chain effects off state (i.e. calculate derived state in the function's render)
• useTransition() and useDeferredValue() to defer UI updates

Profiling

• react dev tools
• browser dev tools
• react scan

Reimplementations

• million.js

[chrisvaillancourt]

Refer to obsidian notes on react performance.

[chrisvaillancourt]

Add links to a few popular videos on react performance.

If the vast majority of react apps are slow then maybe react is the problem? React doesn't seem to scale well without a lot of engineering effort.

https://emnudge.dev/blog/react-hostage/

[chrisvaillancourt]

blogs on react perf

https://joshcollinsworth.com/blog/self-fulfilling-prophecy-of-react
https://blog.bloomca.me/2021/10/10/performance-optimization-in-react-applications.html
https://devtoys.io/2024/07/11/optimizing-performance-in-large-scale-react-applications/
https://www.developerway.com/posts/how-to-fetch-data-in-react

state management
https://blog.isquaredsoftware.com/2021/01/context-redux-differences/

misc.
https://marmelab.com/blog/2022/09/20/react-i-love-you.html
https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/
https://archive.ph/5oy4w