React Performance Optimization thực tế năm 2026

Performance optimization trong React là chủ đề dễ gây tranh luận: một bên là 'premature optimization is the root of all evil', bên kia là 'user experience phải smooth'. Năm 2026, với React Compiler đã stable, landscape đã thay đổi đáng kể.

Hiểu re-render trước khi optimize

React re-render component khi: state thay đổi, props thay đổi, context thay đổi, hoặc parent re-render. Re-render không có nghĩa là DOM update — React reconcile virtual DOM trước. Nhưng re-render nhiều vẫn tốn CPU, đặc biệt với component tree sâu.

Dùng React DevTools Profiler để đo trước khi optimize. Nhiều developer wrap mọi thứ trong memo() mà không đo — điều này thêm overhead của so sánh props mà không cần thiết.

memo(): dùng khi nào?

React.memo hữu ích khi: component render expensive (complex calculations, large lists), component nhận cùng props thường xuyên nhưng parent re-render vì lý do khác. Không hữu ích khi props luôn thay đổi — overhead của shallow comparison có thể còn tệ hơn.

useCallback và useMemo: chỉ cho referential equality

useCallback và useMemo không 'cache kết quả' theo nghĩa magic — chúng chỉ đảm bảo referential equality giữa các render. Dùng khi function hoặc value được pass xuống memo-ized child, hoặc là dependency của useEffect.

Anti-pattern phổ biến: useMemo cho simple computations như filtering small array hoặc string concatenation. Chi phí của memo vượt qua lợi ích. Rule of thumb: chỉ memo khi computation tốn >1ms.

React Compiler (2025-2026)

React Compiler (trước đây là React Forget) tự động thêm memoization ở compile time. Với compiler enabled, phần lớn useCallback và useMemo manual trở nên không cần thiết. Compiler phân tích code và chỉ memoize khi thực sự cần.

Lưu ý: compiler chỉ hoạt động tốt khi code tuân thủ Rules of React (pure functions, immutable state). Code có side effects trong render hoặc mutate state trực tiếp sẽ không được optimize đúng.

Virtualization cho large lists

Khi render danh sách >100 items, virtualization (chỉ render items trong viewport) thường hiệu quả hơn mọi optimization khác. TanStack Virtual là thư viện headless phổ biến nhất hiện tại, hỗ trợ cả fixed và variable height items.