Làm sao để ngăn các cập nhật state gây ra re-render quá mức?

Question

Accepted Answer

Các thay đổi state kích hoạt re-render, và state có cấu trúc kém có thể gây ra **re-render nhiều hơn cần thiết rất nhiều** — làm chậm app. Các chiến lược then chốt: subscribe hẹp, tách state, memoize, và giữ state local. ## 1. Subscribe vào slice tối thiểu bạn cần ```jsx // ❌ subscribe vào cả store → re-render khi có BẤT KỲ thay đổi nào const store = useStore(); const count = store.count; // ✅ chọn chỉ cái bạn dùng → chỉ re-render khi `count` thay đổi const count = useStore((s) => s.count); ``` Subscription chọn lọc (selector của Zustand/Redux, atom của Jotai) là đòn bẩy lớn nhất — component chỉ re-render khi slice cụ thể của chúng thay đổi, không phải mỗi lần store cập nhật. ## 2. Tách state / context để giới hạn bán kính ảnh hưởng ```jsx // ❌ một context lớn → mọi consumer re-render khi bất cứ gì thay đổi // ✅ tách các context riêng để các cập nhật không liên quan không kích hoạt chéo ... ``` ## 3. Memoize component và giá trị ```jsx const Item = React.memo(ItemComponent); // bỏ qua re-render nếu props không đổi const expensiveValue = useMemo(() => compute(data), [data]); const handleClick = useCallback(() => doX(id), [id]); // reference hàm ổn định ``` Memoization ngăn các component con re-render khi props của chúng (theo reference) không thay đổi — nhưng nó chỉ hoạt động nếu bạn cũng giữ props/callback ổn định về reference (do đó dùng `useCallback`/`useMemo`) và cập nhật state **immutably**. ## 4. Giữ state local nhất có thể ```text State ở cao trong cây re-render mọi thứ bên dưới nó. Chuyển state XUỐNG component nhỏ nhất cần nó → phạm vi re-render nhỏ hơn. ``` ## 5. Đừng lưu giá trị derived; tránh tạo reference mới mỗi lần render ```jsx // ❌ một object/array mới mỗi lần render phá memoization xuôi dòng // {} mới mỗi lần render // ✅ reference ổn định const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Dùng selector được memoize cho dữ liệu derived ```js const selectActive = createSelector([s => s.items], items => items.filter(i => i.active)); // trả về CÙNG reference khi items không đổi → không re-render vô ích ``` ## Đo lường trước ```text React DevTools Profiler / "why did you render" → tìm cái gì thực sự re-render trước khi tối ưu. Memoization quá sớm thêm phức tạp mà không có lợi ích. ``` ## Tại sao điều này quan trọng Re-render quá mức là nguyên nhân hàng đầu của các app React/state-driven chậm chạp, và chúng xuất phát từ cách state được cấu trúc và subscribe. Bộ công cụ — subscription chọn lọc hẹp, tách context, memoization với reference ổn định, cập nhật immutable, và localize state — kiểm soát trực tiếp phạm vi re-render. Quan trọng, bạn nên **đo lường** (Profiler) để tìm nút thắt thực sự trước khi tối ưu, vì memoization bừa bãi thêm phức tạp mà không lợi ích. Hiểu cái gì kích hoạt re-render và cách kiềm chế chúng là thiết yếu cho các app quy mô lớn hiệu năng tốt.