Intro to React Hooks

Published on September 12, 2025 • Jane Doe

React Hooks were introduced in React 16.8 and have completely changed the way we write functional components. Instead of relying on class components and lifecycle methods, Hooks let you “hook into” React’s state and lifecycle features directly from functional components.

Why Hooks?

Hooks solve several problems that existed with class components:

• Complexity of this binding.
• Duplicated logic across components.
• Hard-to-follow lifecycle methods when components grow.

Basic Hooks

useState

The useState Hook adds state to a functional component.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect

Side‑effects (data fetching, subscriptions, timers) are handled with useEffect.

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);
  
  useEffect(() => {
    const id = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(id); // cleanup
  }, []);
  
  return <p>Elapsed: {seconds}s</p>;
}

Custom Hooks

When you have reusable logic, extract it into a custom Hook.

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(json => {
        setData(json);
        setLoading(false);
      });
  }, [url]);
  
  return { data, loading };
}

// Usage
function Users() {
  const { data, loading } = useFetch('https://api.example.com/users');
  if (loading) return <p>Loading...</p>;
  return (
    <ul>
      {data.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

Conclusion

Hooks bring simplicity, composability, and a more functional approach to building React apps. Mastering useState, useEffect, and creating custom hooks will dramatically improve your codebase.