React Hooks Explained: A Visual Guide for 2026

React Hooks can be confusing when you're new to them. This guide explains the most important ones with clear examples. useState — Local component state import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Clicked {count} times </button> ); } When to use: Anything the component needs to remember between renders — form values, toggles, counters. Gotcha: State updates are asynchronous. // ❌ This won't work as expected setCount(count + 1); setCount(count + 1); // Both use the same `count` value // ✅ Use the updater function instead setCount(prev => prev + 1); setCount(prev => prev + 1); // Now it's +2 useEffect — Side effects import { useEffect, useState } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); useEffect(() => { // Runs after every render where userId changes fetch(`/api/users/${userId}`) .then(r => r.json()) .then(setUs