useEffect என்றால் என்ன மற்றும் அது எப்போது இயங்குகிறது?

Question

Accepted Answer

`useEffect` **பக்க விளைவுகளை** இயக்குகிறது — React இன் rendering க்கு வெளியே செல்லும் வேலை, தரவு fetching, subscriptions, timers, அல்லது கைமுறை DOM புதுப்பிப்புக்களைப் போல. இது component render செய்த **பிறகு** இயங்குகிறது, பக்க விளைவுகளை render body க்கு வெளியே வைத்திருக்கிறது (render சுத்தமாக இருக்க வேண்டும்).

## Dependency array நேரத்தைக் கட்டுப்படுத்துகிறது

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → முதல் render க்குப் பிறகு மற்றும் `count` மாறும் போதெல்லாம் இயங்குகிறது.
- **`[]`** (வெற்று) → mount க்குப் பிறகு **ஒருமுறை** இயங்குகிறது (ஒரு முறை setup க்கு நல்லது).
- **பொறுத்தவிட்ட** → **ஒவ்வொரு** render க்குப் பிறகு இயங்குகிறது (அரிதாக நீங்கள் விரும்பிய வொண்ணாம்).

## சுத்தம்: ஒரு செயல்பாடு திரும்பியளிக்கவும்

ஒரு விளைவு something அமைக்கப்பட்டால் அது tear down செய்ய வேண்டும், ஒரு cleanup செயல்பாடு திரும்பியளிக்கவும். React அடுத்த விளைவு இயங்குவதற்கு முன்பாகவும் component unmount செய்யும் போதும் அதை அழைக்கிறது:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## சுத்தம் ஏன் முக்கியமாக இருக்கிறது

இது இல்லாமல், ஒவ்வொரு re-run மற்றொரு timer/subscription சேர்த்து மற்றும் பழைய timer/subscription கைவிட்ட ஒருபோதும் — ஒரு classical memory leak. `[dep]` விளைவுக்கான lifecycle: *விளைவு இயங்குக → (dep மாறுகிறது) → cleanup இயங்குக → விளைவு மீண்டும் இயங்குக*.

**உதாரணம்:** render உள்ளே நீங்கள் compute செய்ய முடியும் விளைவுகளுக்கு use செய்யாதீர்கள் (இதற்கு பதில் derived values), மற்றும் ஒவ்வொரு மதிப்பு விளைவு dependency array இல் வாசிக்கின்றது (the `react-hooks/exhaustive-deps` lint rule உதவி செய்கிறது).