Context re-render optimization là gì?

Khi context value object được tạo mới mỗi render, tất cả consumers re-render dù giá trị thực không đổi.

• Fix: memoize value với useMemo useMemo(() => ({ user, logout }), [user]), tách state context và dispatch context riêng, dùng libraries như jotai/zustand tránh context re-render issues.
• Structural sharing giúp nhưng không đủ.

When a context value object is recreated on every render, all consumers re-render even if the actual values have not changed.

• Fixes: memoize the value with useMemo useMemo(() => ({ user, logout }), [user]), split state and dispatch into separate contexts, or use libraries like Jotai or Zustand that avoid context re-render issues altogether.
• Structural sharing helps but is not sufficient on its own.