การจัดการ State ใน React ด้วย Context API

Context API เป็นวิธีการแชร์ข้อมูลระหว่าง components โดยไม่ต้องส่งผ่าน props ในทุกระดับ (prop drilling)

สร้าง Context

import React, { createContext, useContext, useState } from 'react';

// สร้าง Context
const ThemeContext = createContext();

// Provider Component
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// Custom Hook สำหรับใช้งาน Context
export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
}

การใช้งาน Context

function App() {
  return (
    <ThemeProvider>
      <Header />
      <MainContent />
      <Footer />
    </ThemeProvider>
  );
}

function Header() {
  const { theme, toggleTheme } = useTheme();

  return (
    <header className={theme}>
      <button onClick={toggleTheme}>
        Switch to {theme === 'light' ? 'dark' : 'light'} mode
      </button>
    </header>
  );
}

ข้อดีและข้อเสีย

ข้อดี:

• หลีกเลี่ยง prop drilling
• จัดการ global state ได้ง่าย
• ใช้งานร่วมกับ useReducer ได้

ข้อเสีย:

• อาจทำให้ component re-render บ่อยเกินไป
• ไม่เหมาะสำหรับ state ที่ซับซ้อนมาก

สรุป

Context API เหมาะสำหรับการแชร์ข้อมูลที่ไม่เปลี่ยนแปลงบ่อย เช่น theme, user authentication, หรือ language settings