Then came React Hooks, and suddenly everyone was talking about them. At first, they felt intimidating. I remember looking at useEffect and thinking: “Wait, is this supposed to replace all lifecycle methods? How?”

Fast forward a few projects later — Hooks are now my go-to way of building React apps. In this blog, I’ll share the three most important hooks (useState, useEffect, useRef) with examples that actually make sense in real-world coding.

🔹 1. useState – Making Components Remember Things

Think of useState as your component’s memory. Without it, every time React re-renders, your variables would reset.

Here’s a classic example — a simple counter:

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

💡 Every time you click the button, setCount updates the state and React re-renders the UI. Easy and powerful.

I still remember my first bug: I tried doing count++ instead of setCount(count + 1) and spent an hour wondering why the UI didn’t change. Lesson learned: state must be updated through the setter function.

🔹 2. useEffect – Handling Side Effects

In real apps, you don’t just store values. You fetch data, set timers, or sync with APIs. That’s where useEffect comes in.

Example: fetching a list of users from an API:

import { useState, useEffect } from "react";

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []); // run once after initial render

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

⚠️ My first mistake with useEffect was forgetting the dependency array ([]). Without it, the API call ran on every re-render, and I ended up spamming the server. Always remember:

• [] → run once.

• [someVar] → run when someVar changes.

🔹 3. useRef – Keeping Values Without Re-Rendering

Here’s something cool: sometimes you need to keep a value between renders without triggering a re-render. That’s what useRef does.

Example: auto-focusing an input box:

import { useRef, useEffect } from "react";

function InputFocus() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

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

💡 The inputRef here gives you direct access to the DOM element. It’s like saying, “Hey React, don’t re-render this, just let me poke it when I need to.”

I use useRef often for timers (setInterval, setTimeout) or storing previous values without causing UI updates.

🔹 Bonus: A Custom Hook

Once you get comfortable, you can even build your own hooks. Here’s a small one I use for API calls:

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData);
  }, [url]);

  return data;
}

// Usage
function App() {
  const users = useFetch("https://jsonplaceholder.typicode.com/users");
  return <pre>{JSON.stringify(users, null, 2)}</pre>;
}

This way, you can reuse logic without repeating code across components.

🔹 Common Mistakes I Made (So You Don’t Have To)

• ❌ Forgetting the dependency array in useEffect.

• ❌ Trying to update state directly instead of using setter.

• ❌ Using useState for values that don’t affect rendering (better use useRef).

🎯 Wrapping Up

React Hooks might look scary at first, but they simplify React more than anything else. If you’re new to them, start with useState, useEffect, and useRef. Once you get comfortable, explore useReducer, useContext, and even build your own custom hooks.

When I switched from class components to hooks, it felt like a weight off my shoulders — fewer bugs, cleaner code, and much more fun.

👉 What about you? Which React Hook gave you the biggest “aha!” moment? Drop it in the comments!