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 } ` ) . the