useReducer và Context: vấn đề re-render và cách khắc phục?

const StateCtx = createContext(null);
const DispatchCtx = createContext(null);

function Provider({ children }) {
  const [state, dispatch] = useReducer(reducer, initial);
  return (
    <DispatchCtx.Provider value={dispatch}>
      <StateCtx.Provider value={state}>{children}</StateCtx.Provider>
    </DispatchCtx.Provider>
  );
}

• dispatch có identity ổn định, nên component chỉ gửi action (nút bấm) không re-render khi state đổi.
• Truyền value={{ a, b }} tạo object mới mỗi lần Provider render: bọc useMemo.
• Tách theo miền (AuthContext, ThemeContext) thay vì một context khổng lồ.
• memo ở con không ngăn được re-render do context: consumer luôn render lại khi value đổi.