React.js

What I Can Do

• สร้าง interactive web applications ด้วย React
• ออกแบบ component architecture ที่ reusable และ maintainable
• ใช้ hooks สำหรับ state management และ side effects
• Optimize rendering performance ด้วย memoization
• ใช้ React ร่วมกับ Next.js สำหรับ production apps

Commands I Use Daily

# สร้าง React project ด้วย Vite
npm create vite@latest my-app -- --template react-ts

# development server
npm run dev

# build production
npm run build

# run tests
npm run test

# preview production build locally
npm run preview

JSX

JSX = JavaScript XML — syntax extension ที่ให้เขียน HTML-like code ใน JavaScript, compile เป็น React.createElement() calls ใช้ {} สำหรับ JavaScript expressions, className แทน class, htmlFor แทน for

Components

React component = function ที่ return JSX — เป็น building block ของ UI ทุกอย่าง เช่น function UserCard ที่รับ props name: string, role: string แล้ว return JSX ที่แสดง name ใน h3 และ role ใน p tag

Props

Props = data ที่ส่งจาก parent ไป child — read-only, ใช้ TypeScript interface define type, destructure ใน function parameters, children prop สำหรับ nested content

State (useState)

useState = hook สำหรับ local state ใน component — trigger re-render เมื่อ state เปลี่ยน, ใช้ functional update เมื่อ new state depend on previous state เช่น const [count, setCount] = useState(0) และ const [items, setItems] = useState<Item[]>([]) — functional update: setCount(prev => prev + 1)

Effects (useEffect)

useEffect = hook สำหรับ side effects — data fetching, subscriptions, DOM manipulation, cleanup function สำหรับ unsubscribe/cancel เช่น สร้าง AbortController ใน effect, เรียก fetchData(controller.signal), return cleanup function () => controller.abort(), ใส่ [dependency] array เพื่อ run เมื่อ dependency เปลี่ยน

useCallback & useMemo

• useCallback — memoize function reference, ป้องกัน unnecessary re-renders ของ child components
• useMemo — memoize computed value, ใช้เมื่อ calculation แพง
• ไม่ใช้ทุกที่ — ใช้เมื่อมี actual performance problem

useRef

useRef = mutable reference ที่ไม่ trigger re-render — ใช้สำหรับ DOM references (ref={inputRef}), store previous values, store interval/timeout IDs

Context API

Context ใช้ share data ข้าม component tree โดยไม่ต้อง prop drilling — createContext, Provider, useContext ใช้สำหรับ theme, auth state, locale

Custom Hooks

Custom hooks = function ที่ขึ้นต้นด้วย use — extract reusable logic ออกจาก components เช่น useDebounce, useLocalStorage, useMediaQuery ตัวอย่าง useDebounce<T>(value: T, delay: number): T ที่ใช้ useState + useEffect กับ setTimeout เพื่อ debounce value แล้ว return debounced value กลับ

Conditional Rendering

• Ternary — isLoading ? <Spinner /> : <Content />
• Logical AND — error && <ErrorMessage /> render เมื่อ true
• Early return — if (!user) return <LoginPrompt /> ที่ต้นfunction

Lists & Keys

ใช้ .map() render lists — ต้องใส่ unique key prop เพื่อให้ React track items ได้ถูกต้อง, ห้ามใช้ array index เป็น key ถ้า list มีการ reorder

React.memo

React.memo wrap component เพื่อ skip re-render ถ้า props ไม่เปลี่ยน — ใช้สำหรับ expensive components ที่ receive same props บ่อยๆ

Error Boundaries

Error boundaries catch JavaScript errors ใน component tree — ป้องกัน entire app crash, แสดง fallback UI แทน ต้องใช้ class component (componentDidCatch, getDerivedStateFromError)

Performance

• Code splitting — React.lazy() + Suspense สำหรับ lazy load components
• Virtualization — render เฉพาะ items ที่เห็นบนจอ (react-window, react-virtuoso)
• Profiler — React DevTools Profiler หา unnecessary re-renders
• Key prop — ใช้ stable keys สำหรับ lists

Related Skills

• Next.js — React framework สำหรับ production
• TypeScript — type safety สำหรับ React components
• JavaScript — ภาษาพื้นฐานของ React