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

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

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

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

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

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

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! 🎉