การจดจำค่า Context ด้วย useMemo

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

ปัญหาการอ้างอิงออบเจ็กต์

// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

การแก้ไขด้วย useMemo

const value = useMemo(
  () => ({ user, logout }),
  [user, logout]
);

<UserCtx.Provider value={value}>
  {children}
</UserCtx.Provider>

การเลือกรายการการพึ่งพาอย่างรอบคอบ

ฟังก์ชันคงที่ด้วย useCallback

const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

const value = useMemo(() => ({ user, logout }), [user, logout]);

เมื่อไม่จำเป็นต้องจดจำค่า

ค่าพื้นฐานคงที่อยู่แล้ว

// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

การวิเคราะห์ผลของการจดจำค่า

บริบทที่จดจำค่าแบบซ้อนกัน

รูปแบบคอมโพเนนต์ Provider

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const logout = useCallback(() => setUser(null), []);
  const value = useMemo(() => ({ user, logout }), [user, logout]);
  return <UserCtx.Provider value={value}>{children}</UserCtx.Provider>;
}

export const useUser = () => useContext(UserCtx);

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

สรุปทบทวน

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