React Hooks: From ‘What the Hook?!’ to Hooked for Life 🎣😂

When I first heard about React hooks, my brain was like, “Hooks? Are we fishing in the code?” 🎣 But little did I know, these hooks would reel me into the world of React and never let go. This is the story of my love-hate relationship with three of the most iconic hooks: useState, useRef, and useEffect. Let’s dive in and see how these buddies changed the way I code—forever.

Act 1: useState - The Rollercoaster of Emotions 🎢

The first hook I ever met was useState, and let me tell you—it’s like your emotional support system in React. You’re building an app, and suddenly you need to keep track of things like counters, toggles, or user inputs. Boom! In comes useState.

Here’s how I started:

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

I remember staring at this line for 15 minutes straight. “Why are we destructuring? Where is this setCount coming from?!” It felt like React was speaking a language only aliens understood. 🛸

But once I figured it out, I felt like I’d unlocked a superpower. Stateful components? No more class components? Just a single function call? 🤯

useState was my first crush, and let’s be honest—it’s still my favorite. You want to toggle dark mode? Boom. Update a form value? Boom. You want to build a counter app just for the dopamine hit of watching the number go up? BAM!

const [mood, setMood] = useState("😐");

// Toggle mood
const toggleMood = () => setMood(mood === "😐" ? "😄" : "😐");

It’s like magic—but you’re the magician. 🎩✨

Act 2: useRef - The Silent Observer 👀

Next up was useRef, and I’ll be honest—this one didn’t make sense at first. People told me, “It’s used for accessing DOM elements or storing mutable values.”

Me? I was like, “Why can’t I just use state for that?”

Then I tried to manage a timer using useState. Spoiler alert: It was a disaster. The state kept re-rendering, and I felt like I was stuck in an infinite loop of despair. That’s when useRef swooped in like a hero in a Tamil movie climax. 🎥🔥

const timerRef = useRef(null);

const startTimer = () => {
  timerRef.current = setInterval(() => {
    console.log("Tick-tock ⏰");
  }, 1000);
};

const stopTimer = () => {
  clearInterval(timerRef.current);
  timerRef.current = null;
};

This was the moment I realized useRef isn’t just a random sidekick—it’s the quiet MVP. It doesn’t cause re-renders. It’s like the backstage crew of your app, making sure everything runs smoothly without stealing the spotlight.

Act 3: useEffect - The Overachiever 😅

Ah, useEffect—the one hook that made me question all my life choices. Everyone said, “It’s for side effects.” I was like, “What even is a side effect?”

For the first few weeks, I wrote useEffect like this:

useEffect(() => {
  console.log("Component rendered!");
});

And then I kept wondering why my app behaved like it had a caffeine overdose—re-rendering endlessly. "Why React, why?" 😭

That’s when I learned about dependencies:

useEffect(() => {
  console.log("This only runs when count changes!");
}, [count]);

It clicked. Suddenly, useEffect went from annoying frenemy to lifesaver. Need to fetch data? useEffect. Clean up event listeners? useEffect. Run a side effect when something changes? USE. EFFECT.

And let’s not forget the cleanup function—it’s like the nice friend who makes sure the party is over before everyone starts wrecking your house.

useEffect(() => {
  const handleScroll = () => console.log("Scrolling!");

  window.addEventListener("scroll", handleScroll);
  
  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, []);

It’s like having a bouncer for your events. No mess, no drama. 💪

How I Really Understood Hooks

At first, hooks felt like riddles wrapped in mysteries. But the more I used them, the more I realized they’re just tools—powerful tools that let you write clean, efficient React apps.

• useState: When you need to manage state. It’s the bread and butter of React.
• useRef: When you need a mutable reference or access to the DOM without re-rendering.
• useEffect: When you need to handle side effects like data fetching, subscriptions, or anything async.

Where Hooks Shine

Hooks are everywhere in React:

1. Forms: Managing input fields with useState.
2. Timers: Using useRef to store interval IDs.
3. APIs: Fetching data with useEffect and cleaning up subscriptions.
4. Custom Hooks: Combine logic into reusable hooks.

They make your code simpler, cleaner, and more readable—like upgrading from a Nokia 1100 to an iPhone.

Final Words

If React hooks seem confusing, don’t worry—you’re not alone. They take time, but once you get it, you’ll wonder how you ever lived without them.

And remember: Hooks aren’t just a feature—they’re a philosophy. They make your components simpler, your code cleaner, and your life easier. 🎉

So, if you haven’t embraced hooks yet, what are you waiting for? Go on, get hooked! 😉