Muốn tối ưu hiệu năng React, sau đây là checklist để tăng tốc website sử dụng React
1. **Công cụ do hiệu năng render của từng Component React:**
- Chrome DevTools Performance panel
- React DevTools profiler
2. **Giảm thiểu tối đa việc các component re-renders:**
- Override shouldComponentUpdate để kiểm soát việc re-render
- Sử dụng `PureComponent` class components
- Sử dụng `React.memo` functional components
- Memoize Redux selectors (`reselect` là một ví dụ)
- Virtualize super long lists (`react-window` là một ví dụ)
3. **Công cụ đo hiệu năng app-level với Lighthouse**
4. **Tối ưu hiệu năng ở mức ứng dụng**
- Nếu bạn không sử dụng server-side rendering, cắt nhỏ components với `React.lazy`
- Nếu bạn sử dụng server-side rendering, cắt nhỏ components với thư viện, giống như `loadable-components`
- Sử dụng service worker để cache files. `Workbox` sẽ giúp bạn rất nhiều trong việc cache resouce.
- Nếu bạn sử dụng server-side rendering, sử dụng streams thay vì strings (sử dụng `renderToNodeStream` và `renderToStaticNodeStream`)
- Không thể Server-side rendering? Sử dụng `pre-render` như một biện pháp thay thế. Hãy sử dụng `react-snap`.
- Hãy chắc chắn trang React của bạn luôn accessible. Hãy sử dụng `React A11y` và `react-axe`.
- Sử dụng web app manifest nếu bạn muốn user truy cập trang của bạn trên device homescreen.
