การแยก Context เพื่อลดการเรนเดอร์ซ้ำ

ยินดีต้อนรับ

ปัญหาการเรนเดอร์ใหม่เมื่อใช้บริบท

การแยกตามความถี่ในการอัปเดต

const ThemeCtx = createContext('light');
const UserCtx = createContext(null);
// theme changes rarely; user changes on login/logout — same frequency is fine
// but notifCount changes every second — split it out!

การแยกบริบทข้อมูลและการส่งคำสั่ง

const CountCtx = createContext(0);
const SetCountCtx = createContext(() => {});

function Provider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountCtx.Provider value={count}>
      <SetCountCtx.Provider value={setCount}>
        {children}
      </SetCountCtx.Provider>
    </CountCtx.Provider>
  );
}

การจดจำค่าบริบทการส่งคำสั่ง

const actions = useMemo(() => ({
  increment: () => setCount(c => c + 1),
  reset: () => setCount(0),
}), []); // stable — empty deps

ผู้ให้บริการแบบซ้อนกัน

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <NotificationsProvider>
          <Router />
        </NotificationsProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

วิเคราะห์ประสิทธิภาพก่อนแยกบริบท

ข้อแลกเปลี่ยนของการแยกบริบท

การผสานกับ React.memo

const ExpensiveChild = React.memo(function({ label }) {
  return <div>{label}</div>;
}); // won't re-render on context change if label hasn't changed

useReducer + Context

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน

บทเรียนถัดไป