# React Hooks

Let’s be honest:  
React Hooks looked scary when they first came out.

Everyone pretended they understood them.  
Everyone nodded like, “Ah yes, `useEffect` with dependency arrays… totally makes sense.”

Meanwhile, inside:  
**“Why does this run 57 times???”**

But don’t worry — Hooks are not here to destroy your sanity.  
(Okay, maybe just a little.)  
They actually make React *so* much nicer once you know what’s going on.

Let’s break them down in the most friendly, slightly sarcastic way possible.

---

# 🧩 **What Even Are React Hooks?**

Hooks are functions that let you “hook into” React’s brain — state, lifecycle, context, and the usual chaos — **without writing class components**.

Yes, no more `this.state`, no more binding functions, no more pretending you like classes.

React Hooks = functional components that can actually do things.

---

# 🔥 **The Essential Hooks (a.k.a. React’s Greatest Hits)**

## 1️⃣ **useState — The “I just need to store a number, bro” Hook**

This is the hook you’ll use 500 times a week.

```javascript
const [count, setCount] = useState(0);
```

Boom.  
You now have state.  
You are powerful.  
You are unstoppable.  
(Until you accidentally mutate the state and React ignores it.)

### When to use it:

* Toggling a modal
    
* Updating forms
    
* Tracking button rage-clicks
    

---

## 2️⃣ **useEffect — The “Why is this running endlessly?” Hook**

Ah yes, the hook responsible for:

* API calls
    
* Subscriptions
    
* 40% of your debugging time
    
* 60% of your existential crises
    

```javascript
useEffect(() => {
  console.log("Running...");
}, []);
```

### Dependency Arrays:

* `[]` → run once
    
* `[value]` → run when value changes
    
* nothing → good luck soldier
    

---

## 3️⃣ **useContext — The “Stop Prop-Drilling Before You Lose Your Mind” Hook**

Passing props three levels deep?  
Just use context.

```javascript
const user = useContext(UserContext);
```

Use it for:

* Themes
    
* User authentication
    
* Anything you want to access without screaming into your component tree
    

---

## 4️⃣ **useRef — The “I Just Need to Grab an Input Field, Okay?” Hook**

Two main uses:

* Getting DOM elements
    
* Storing values that don’t cause re-renders
    

```javascript
const inputRef = useRef();
```

You can now do *real* things like focusing inputs without hacks.

---

## 5️⃣ **useMemo — The “Please Don’t Calculate This Again” Hook**

When your component re-renders, everything re-runs.  
React doesn’t care about your CPU.

So you use `useMemo` to make it chill:

```javascript
const value = useMemo(() => expensiveWork(data), [data]);
```

Great for:

* Heavy calculations
    
* Filtering large lists
    
* Pretending your app is optimized
    

---

## 6️⃣ **useCallback — The “Why Are My Child Components Re-rendering?” Hook**

React creates new functions on every render.  
Children re-render.  
Performance drops.  
You cry.

Solution:

```javascript
const fn = useCallback(() => doSomething(), []);
```

Now functions stay the same between renders.

Children are happy.  
You are happy.  
Everyone wins.

---

## 7️⃣ **useReducer — The “My State Is Too Complicated for useState” Hook**

If your state starts looking like this:

```javascript
const [state, setState] = useState({ 
  items: [], 
  loading: true, 
  error: null 
});
```

React gently whispers:

**“Use a reducer, my child.”**

```javascript
const [state, dispatch] = useReducer(reducer, initialState);
```

It’s basically mini-Redux but without the crying.

---

# 🤦 Common Hooks Mistakes (Don’t Worry, We’ve All Been There)

### ❌ 1. useEffect dependencies missing

Result: Infinite loops  
Your laptop: *starts sounding like a helicopter*

### ❌ 2. Using useMemo/useCallback everywhere

Congratulations, you now wasted more time optimizing than your app actually needed.

### ❌ 3. Mutating state directly

React: “I didn’t see anything. Not re-rendering.”

### ❌ 4. Forgetting cleanup functions

Timers keep running.  
APIs keep fetching.  
Your app becomes haunted.

---

# 🎉 Final Thoughts: Hooks Are Your Friends

React Hooks are like gym workouts:

* Confusing at first
    
* Painful when done wrong
    
* Life-changing when done right
    

Once you get them, your React code becomes:

* cleaner
    
* easier to read
    
* easier to manage
    
* 10x more “senior developer vibes”
    

And hey — if a hook makes you scream once in a while…  
That just means you're learning React the *real* way.