React hooks ทำงานอย่างไรใน React Native?

Question

Accepted Answer

**Hooks** (useState, useEffect, useContext และอื่น ๆ) คือฟีเจอร์ของ React สำหรับจัดการ state และ side effect ใน functional component — และมันทำงานเหมือนกันใน React Native การเข้าใจ hooks สำคัญ ๆ เป็นสิ่งจำเป็นต่อการสร้างคอมโพเนนต์ React Native

## useState — state

```jsx
const [count, setCount] = useState(0);     // state + setter; setting it re-renders
const [user, setUser] = useState(null);
```

## useEffect — side effects

```jsx
// useEffect runs side effects (data fetching, subscriptions) after render
useEffect(() => {
  fetchData();                  // runs after render
  // optional CLEANUP (returned function) — runs on unmount / before re-running
  const sub = subscribe();
  return () => sub.unsubscribe();   // CLEAN UP (prevent leaks)
}, [dependency]);                    // dependency array → when to re-run
// → [] = run once on mount; [dep] = run when dep changes; none = every render
```

`useEffect` จัดการ side effect (การดึงข้อมูล, subscription, timer) ด้วย dependency array ที่ควบคุมว่าจะรันเมื่อใด และฟังก์ชัน cleanup ที่เป็นทางเลือก (สำคัญต่อการป้องกัน leak)

## hooks สำคัญอื่น ๆ

```text
useContext → consume context (shared data without prop drilling)
useRef → a mutable reference that persists across renders (e.g. reference a component,
  store a value without re-rendering)
useMemo → memoize an expensive computed value (performance)
useCallback → memoize a function (avoid unnecessary re-creation/re-renders)
useReducer → manage complex state with a reducer
CUSTOM HOOKS → extract reusable stateful logic (e.g. useFetch, useAuth)
```

## กฎของ hooks

```text
⚠️ Only call hooks at the TOP LEVEL of a component (not in conditions/loops/nested functions)
⚠️ Only call hooks from React components or custom hooks
→ These rules ensure hooks work correctly (React relies on call order).
```

## ทำไมจึงสำคัญ

การเข้าใจ React hooks เป็นสิ่งจำเป็นสำหรับ React Native เพราะ **hooks คือวิธีมาตรฐานในการจัดการ state และ side effect ใน functional component** ซึ่งเป็นวิธีที่สร้างแอป React Native สมัยใหม่ จึงเป็นความรู้ที่ต้องรู้

Hooks ทำงานเหมือนกันใน React Native กับ React สำหรับเว็บ ทำให้ความรู้นี้โอนย้ายมาได้โดยตรง **useState** (จัดการ state กระตุ้นการ re-render) เป็นพื้นฐานสำหรับคอมโพเนนต์ใด ๆ ที่มีข้อมูลเปลี่ยนแปลง **useEffect** สำคัญเป็นพิเศษ: มันจัดการ **side effect** (การดึงข้อมูล, subscription, timer) ด้วย dependency array ที่ควบคุมว่าจะรันเมื่อใด และฟังก์ชัน **cleanup ที่เป็นทางเลือก** (สำคัญต่อการป้องกัน leak ด้วยการยกเลิก subscription/เคลียร์) — การเข้าใจ useEffect, dependency array และ cleanup ของมันเป็นสิ่งจำเป็น เพราะ side effect (เช่น การดึงข้อมูลตอนหน้าจอโหลด) พบบ่อย และการใช้ useEffect ผิดทำให้เกิดบั๊ก (infinite loop จาก dependency ที่ผิด, leak จากการขาด cleanup)

การเข้าใจ **hooks สำคัญอื่น ๆ** — useContext (consume ข้อมูลที่แชร์กันโดยไม่ต้อง prop drilling), useRef (reference ที่เปลี่ยนแปลงได้และคงอยู่ถาวร), useMemo/useCallback (memoization เพื่อประสิทธิภาพ), useReducer (state ที่ซับซ้อน) และ **custom hooks** (แยก logic ที่มี state ออกมานำกลับมาใช้ซ้ำได้ เช่น useFetch หรือ useAuth — แพตเทิร์นที่ทรงพลังสำหรับการนำโค้ดกลับมาใช้ซ้ำ) — ครอบคลุมชุดเครื่องมือสำหรับการสร้างคอมโพเนนต์จริง

การเข้าใจ **กฎของ hooks** (เรียกมันเฉพาะที่ระดับบนสุดและจากคอมโพเนนต์/custom hook เท่านั้น เพราะ React อาศัยลำดับการเรียก) เป็นสิ่งจำเป็นในการหลีกเลี่ยงบั๊กที่ยากต่อการสังเกต

เนื่องจาก hooks คือกลไกมาตรฐานสำหรับ state และ side effect ใน functional component ของ React Native สมัยใหม่ (และความรู้โอนย้ายมาได้โดยตรงจาก React) และเนื่องจากการเข้าใจ hooks สำคัญ ๆ (โดยเฉพาะ useState และ useEffect พร้อม cleanup) และกฎต่าง ๆ เป็นสิ่งจำเป็นต่อการสร้างคอมโพเนนต์ที่ถูกต้อง ดังนั้นการเข้าใจ React hooks จึงเป็นความรู้ React Native ที่จำเป็นและใช้บ่อย — เป็นพื้นฐานต่อการสร้างคอมโพเนนต์ React Native สมัยใหม่ เป็นศูนย์กลางของการจัดการ state และ side effect และโอนย้ายมาได้โดยตรงจาก React บนเว็บ ซึ่งเป็นทักษะหลักสำหรับการพัฒนา React Native