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?

🪄 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.