React application performance

Measuring

delaying (lets us skip frequent updates)
- debouncing, throttling (e.g., lodash debounce, throttle)
memoizing (lets us skip excessive computations)
- useEffect
- useMemo
- lazy initialization
  - with function argument of useState
  - with the third argument of useReducer
  - with a custom wrapper function for useRef
- any third party helpers like lodash memoize
avoiding reconciliation
- PureComponent, shouldComponentUpdate
- React.memo, the second argument function acts like shouldComponentUpdate
- useMemo, useCallback
- dispatch from useReducer (acts like useCallback)
- immutable data structures let us widely use PureComponent/React.memo with a shallow comparison by default
reducing overhead
- function components over class components
- using optimized production build
- reducing dependencies, e.g., with partial import
code-splitting
SSR, SSG, or isomorphic app for some cases