ReactJS Hooks: The Superpower That Changed How We Write Components

When React introduced Hooks in version 16.8, it completely transformed how developers build components. Hooks made it possible to use state and other React features without writing a class.

Whether you’re a beginner or an experienced developer, understanding hooks is essential to mastering modern React development.

🧠 What Are Hooks?

Hooks are special functions that let you "hook into" React features like state management, lifecycle methods, and context — inside functional components.

Before hooks, only class components could manage state or use lifecycle events. Hooks made functional components more powerful and cleaner.

⚙️ Why Hooks?

🧩 Old Way (Class)	⚡ New Way (Hooks)
Verbose code with lifecycle methods	Simple, functional, and concise
Hard to reuse stateful logic	Hooks make logic reusable
Confusing this keyword	No this in functional components
Separate concerns in one file	Better separation with custom hooks

🪄 Commonly Used React Hooks

Let’s explore the most important hooks with real-world examples.

1. useState() – Managing State

Use this hook to add local state to a function component.

import React, { useState } from "react";

function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      👍 {likes} Likes
    </button>
  );
}

🧩 Real-World Example:
In a social media app, each post’s like count can be managed using useState.

2. useEffect() – Performing Side Effects

Use this hook for tasks like fetching data, setting up subscriptions, or manually changing the DOM.

import React, { useState, useEffect } from "react";

function WeatherApp() {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    fetch("https://api.weatherapi.com/v1/current.json?q=London&key=demo")
      .then(res => res.json())
      .then(data => setWeather(data.current));
  }, []); // Empty array ensures it runs once

  return (
    <div>
      {weather ? <p>🌤 Temp: {weather.temp_c}°C</p> : <p>Loading...</p>}
    </div>
  );
}

🧩 Real-World Example:
Fetching weather, stock prices, or user profiles when a page loads.

3. useContext() – Avoid Prop Drilling

Instead of passing props down multiple levels, use context.

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme.background, color: theme.color }}>Click Me</button>;
}

🧩 Real-World Example:
Sharing global data like theme, language, or authentication state across components.

4. useRef() – Accessing DOM Elements or Persisting Values

useRef lets you reference elements directly or hold values that don’t trigger re-rendering.

import React, { useRef } from "react";

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

  const handleFocus = () => inputRef.current.focus();

  return (
    <>
      <input ref={inputRef} type="text" placeholder="Focus me!" />
      <button onClick={handleFocus}>Focus Input</button>
    </>
  );
}

🧩 Real-World Example:
Focus management, animations, or storing the previous value of a state.

5. useMemo() and useCallback() – Optimization Hooks

They prevent unnecessary re-renders and expensive computations.

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  return num * 2;
};

function Calculator({ number }) {
  const result = React.useMemo(() => expensiveCalculation(number), [number]);
  return <p>Result: {result}</p>;
}

🧩 Real-World Example:
Used in dashboards, filtering, or search results to speed up performance.

6. 🧩 Custom Hooks – Reuse Your Logic

You can create your own hook to reuse logic between components.

import { useState, useEffect } from "react";

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const updateStatus = () => setIsOnline(navigator.onLine);
    window.addEventListener("online", updateStatus);
    window.addEventListener("offline", updateStatus);
    return () => {
      window.removeEventListener("online", updateStatus);
      window.removeEventListener("offline", updateStatus);
    };
  }, []);

  return isOnline;
}

export default useOnlineStatus;

🧩 Real-World Example:
Detecting whether a user is online/offline in a PWA or chat app.

🧭 Pro Tips to Remember Hooks

Concept	Fun Way to Remember
useState	“State starts with useState”
useEffect	“Effect = side-effect like fetching or timer”
useContext	“Skip passing props — just useContext!”
useRef	“Refers to the DOM”
useMemo	“Memo = Memory (cache it!)”

🧩 Common Interview Questions

1. Difference between useEffect and lifecycle methods?

2. Can we use hooks inside loops or conditions? (Answer: ❌ No, only top-level)

3. What is a dependency array in useEffect?

4. Why use useCallback in React?

5. What are custom hooks and how do they help code reusability?

🎯 Final Thoughts

Hooks made React cleaner, faster, and easier to understand. They promote reusable logic, functional style, and better performance.
If you’re still writing class components, now’s the perfect time to make the switch — once you go hooks, you rarely go back!