React Native இல் React hooks எவ்வாறு செயல்படுகிறது?

Question

Accepted Answer

**Hooks** (useState, useEffect, useContext, மற்றும் மேலும்) செயல்பாட்டு கூறுகளில் state மற்றும் side effects ஐ நிர்வகிப்பதற்கான React அம்சங்கள் — மற்றும் அவை 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 effects (தரவு fetching, subscriptions, timers) ஐ handle செய்கிறது ஒரு dependency array உடன் இது எப்போது chạy செய்ய வேண்டும் என்பதை கட்டுப்படுத்துகிறது, மற்றும் ஒரு விரும்பிய cleanup function (leaks ஐ தடுப்பதற்கு முக்கியமாகும்).

## மற்ற முக்கிய 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 effects ஐ நிர்வகிப்பதற்கான standard வழி**, இது நவீன React Native apps எவ்வாறு உருவாக்கப்படுகின்றன, எனவே இது அவசியமான அறிவு.

Hooks React Native இல் React web க்கு identical ஆக செயல்படுகிறது, இந்த அறிவை நேரடியாக மாற்றக்கூடியதாக செய்கிறது. **useState** (state நிர்வகித்தல், re-renders trigger செய்தல்) மாறிக்கொண்டிருக்கும் தரவு கொண்ட எந்த கூறுக்கும் அடிப்படையாகும். **useEffect** குறிப்பாக முக்கியமாகும்: இது **side effects** (data fetching, subscriptions, timers) ஐ handle செய்கிறது ஒரு dependency array உடன் இது எப்போது chạy செய்ய வேண்டும் என்பதை கட்டுப்படுத்துகிறது மற்றும் ஒரு **விரும்பிய cleanup function** (unsubscribe/cleaning up செய்வதன் மூலம் leaks ஐ தடுப்பதற்கு முக்கியமாகும்) — useEffect ஐ, அதன் dependency array ஐ, மற்றும் cleanup ஐ புரிந்துகொள்வது அপرिहार्य ஆகும் side effects (ஒரு screen load ஆகும் போது data fetching போன்ற) பொதுவாக உள்ளன மற்றும் useEffect ஐ தவறாக செய்வது bugs ஐ ஏற்படுத்துகிறது (wrong dependencies இலிருந்து infinite loops, missing cleanup இலிருந்து leaks).

**மற்ற முக்கிய hooks** ஐ புரிந்துகொள்வது — useContext (shared data ஐ consume செய்தல் prop drilling இல்லாமல்), useRef (persistent mutable references), useMemo/useCallback (performance க்கான memoization), useReducer (complex state), மற்றும் **custom hooks** (reusable stateful logic போல useFetch அல்லது useAuth extracting செய்தல் — code reuse க்கான powerful pattern) — real components உருவாக்குவதற்கான toolkit ஐ cover செய்கிறது.

**hooks இன் விதிகள்** ஐ புரிந்துகொள்வது (அவற்றை top level இல் மற்றும் components/custom hooks மாత்திரமிருந்து call செய்தல், React call order இல் depend செய்கிறது என்பதால்) subtle bugs ஐ தவிர்ப்பதற்கு அபരिहार्य ஆகும்.

Hooks நவீன செயல்பாட்டு React Native கூறுகளில் state மற்றும் side effects க்கான standard mechanism ஆக உள்ளன (மற்றும் அறிவு web React இலிருந்து நேரடியாக மாற்றக்கூடியது), மற்றும் குறிப்பு hooks (குறிப்பாக useState மற்றும் useEffect அதன் cleanup உடன்) மற்றும் விதிகளை புரிந்துகொள்வது சரியான கூறுகளை உருவாக்குவதற்கு அபरिहार्य ஆக உள்ளன, hooks ஐ புரிந்துகொள்வது அপรिहार्य, frequently-applied React Native அறிவு — நவீன React Native கூறுகளை உருவாக்குவதற்கு அடிப்படை, state மற்றும் side effects ஐ நிர்வகிப்பதற்கு central, மற்றும் web React இலிருந்து நேரடியாக மாற்றக்கூடியது, React Native development க்கான core skill.