# What are React Hooks ??

React Hooks **allow you to use state and lifecycle features** in functional components without writing class components. Introduced in React 16.8, Hooks make React development more efficient and readable.

Let’s break down the most **important Hooks** and how to use them! 👇

---

## **🔹 1. useState – Managing State**

📌 `useState` lets you add **state** inside a functional component.

### **Example:** Counter App

```jsx
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
```

🔹 **How it works?**

* `count` → Holds the **state value**
    
* `setCount` → Updates the state
    
* `useState(0)` → Initializes `count` to **0**
    

---

## **🔹 2. useEffect – Side Effects in Components**

📌 `useEffect` runs **after the component renders**. It's used for **fetching data, updating the DOM, or setting up event listeners**.

### **Example:** Fetching Data

```jsx
import { useState, useEffect } from "react";

export default function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []); // Empty array means it runs only on mount

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
```

🔹 **How it works?**

* Runs **once** when the component mounts (because of `[]`)
    
* Calls API and updates `users` state
    

**Variants of useEffect:**

* `useEffect(() => { ... })` → Runs **on every render**
    
* `useEffect(() => { ... }, [])` → Runs **only once** (on mount)
    
* `useEffect(() => { ... }, [count])` → Runs **when count changes**
    

---

## **🔹 3. useRef – Accessing DOM Elements & Preserving Values**

📌 `useRef` is used for **getting a reference** to a DOM element or **storing values without causing re-renders**.

### **Example:** Focusing an Input

```jsx
import { useRef, useEffect } from "react";

export default function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus(); // Auto-focus input field on mount
  }, []);

  return <input ref={inputRef} type="text" placeholder="Type here..." />;
}
```

🔹 **How it works?**

* `useRef(null)` → Creates a **mutable reference**
    
* `inputRef.current` → Directly **accesses the input**
    

---

## **🔹 4. useCallback – Optimizing Functions**

📌 `useCallback` **memoizes functions** so they don’t get re-created on every render, improving performance.

### **Example:** Avoid Unnecessary Re-renders

```jsx
import { useState, useCallback } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
```

🔹 **Why use** `useCallback`?

* Prevents `increment` from **recreating on each render**
    
* Improves performance in child components
    

---

## **🔹 5. useMemo – Optimizing Expensive Calculations**

📌 `useMemo` **caches a computed value** so it doesn’t re-calculate unnecessarily.

### **Example:** Expensive Calculation

```jsx
import { useState, useMemo } from "react";

export default function ExpensiveCalculation() {
  const [number, setNumber] = useState(0);

  const squared = useMemo(() => {
    console.log("Calculating square...");
    return number * number;
  }, [number]);

  return (
    <div>
      <h1>Square: {squared}</h1>
      <button onClick={() => setNumber((prev) => prev + 1)}>Increase</button>
    </div>
  );
}
```

🔹 **How it works?**

* Only re-computes when `number` changes
    
* Avoids unnecessary calculations
    

---

## **🔹 6. useContext – Global State Management**

📌 `useContext` helps share **global state** without prop drilling.

### **Example:** Theme Context

```jsx
import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

export function ThemeProvider({ children }) {
  return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>;
}

export function ThemedComponent() {
  const theme = useContext(ThemeContext);
  return <h1>Current Theme: {theme}</h1>;
}
```

🔹 **Why use** `useContext`?

* Avoids **prop drilling**
    
* Shares state across multiple components
    

---

## **📌 Other Useful Hooks**

* `useReducer` → Like `useState`, but for complex state logic
    
* `useImperativeHandle` → Exposes methods from a child component
    
* `useLayoutEffect` → Like `useEffect`, but runs **before** the screen updates
    

---

## **🎯 Final Thoughts**

Hooks **simplify React development** by making functional components more powerful. Mastering them will help you write **cleaner, reusable, and optimized** React apps!

💡 **Now, go build something amazing with React Hooks!** 🚀

---

Got questions? Drop them below! ⬇️ Happy coding! 🎉