React Hooks Explained: useState, useEffect, useCallback, useMemo, useRef In Depth

import { useState } from 'react';

// React 18: automatic batching — multiple setState = ONE re-render
function Counter() {
 const [count, setCount] = useState(0);
 const [name, setName] = useState('');

 const handleClick = () => {
 setCount(c => c + 1); // Functional update: safe when next state depends on previous
 setName('updated');
 // React 18: ONE re-render (batched), not two
 };
}

// Functional update pattern — avoids stale closure bugs
const [count, setCount] = useState(0);
// WRONG: setCount(count + 1) — count may be stale in closures
// RIGHT: setCount(c => c + 1) — c is always current

// Object state: always spread to preserve other fields
const [form, setForm] = useState({ name: '', email: '' });
const handleName = (e) => setForm(prev => ({ ...prev, name: e.target.value }));

// Lazy initialization: for expensive initial computation
const [data, setData] = useState(() => expensiveCompute()); // Called once

import { useEffect, useState } from 'react';

// The dependency array:
// [] — run once on mount (and cleanup on unmount)
// [dep1, dep2] — run when dep1 or dep2 changes
// (omitted) — run after every render (usually wrong)

// Cleanup — ALWAYS clean up subscriptions, timers, event listeners
function Timer() {
 const [count, setCount] = useState(0);
 useEffect(() => {
 const id = setInterval(() => setCount(c => c + 1), 1000);
 return () => clearInterval(id); // Cleanup: runs before next effect OR unmount
 }, []); // Empty deps: set up once, clean up on unmount
}

// Data fetching with cleanup (prevent setState on unmounted component)
function UserProfile({ userId }) {
 const [user, setUser] = useState(null);
 useEffect(() => {
 let cancelled = false;
 fetchUser(userId).then(data => {
 if (!cancelled) setUser(data); // Only set if still mounted
 });
 return () => { cancelled = true; };
 }, [userId]); // Re-run when userId changes
}

// Stale closure bug — classic mistake
function Bad() {
 const [count, setCount] = useState(0);
 useEffect(() => {
 const id = setInterval(() => {
 console.log(count); // STALE: count is always 0 (closed over initial value)
 }, 1000);
 return () => clearInterval(id);
 }, []); // Missing count in deps!
}
// Fix: add count to deps, or use functional update

// useCallback: stable function reference
// ONLY helps when the function is passed to a React.memo component
function Parent() {
 const [count, setCount] = useState(0);

 // Without useCallback: new function reference every render
 // MemoizedChild would re-render even though it shouldn't
 const handleDelete = useCallback((id) => {
 deleteItem(id);
 }, []); // No deps: function never changes

 return ;
}
// Rule: useCallback is ONLY useful when the function is a prop to a memoized child

// useMemo: cache expensive computation
function ProductList({ products, query, sort }) {
 const filtered = useMemo(() => {
 return products
 .filter(p => p.name.includes(query))
 .sort((a, b) => a[sort] > b[sort] ? 1 : -1);
 }, [products, query, sort]);
 // Only recalculates when products, query, or sort changes
 // NOT on every render
}
// Rule: useMemo for computation that takes >1ms or returns object/array passed to memo child

import { useRef, useEffect } from 'react';

// DOM reference
function Input() {
 const inputRef = useRef(null);
 useEffect(() => { inputRef.current.focus(); }, []);
 return ;
}

// Mutable value that does NOT trigger re-render
function StopWatch() {
 const [time, setTime] = useState(0);
 const intervalRef = useRef(null); // Store interval ID without re-render

 const start = () => {
 intervalRef.current = setInterval(() => setTime(t => t + 1), 100);
 };
 const stop = () => clearInterval(intervalRef.current);
}

// Previous value pattern
function usePrevious(value) {
 const ref = useRef();
 useEffect(() => { ref.current = value; }); // Runs after render
 return ref.current; // Returns previous render's value
}

// useState vs useRef:
// useState: triggers re-render when changed
// useRef: no re-render, value persists across renders, synchronous access

// Extract stateful logic into reusable hooks
function useLocalStorage(key, defaultValue) {
 const [value, setValue] = useState(() => {
 try { return JSON.parse(localStorage.getItem(key)) ?? defaultValue; }
 catch { return defaultValue; }
 });
 const set = useCallback((newValue) => {
 setValue(newValue);
 localStorage.setItem(key, JSON.stringify(newValue));
 }, [key]);
 return [value, set];
}

// Usage:
const [theme, setTheme] = useLocalStorage('theme', 'light');

// useFetch — data fetching hook
function useFetch(url) {
 const [state, setState] = useState({ data: null, loading: true, error: null });
 useEffect(() => {
 setState(s => ({ ...s, loading: true }));
 fetch(url)
 .then(r => r.json())
 .then(data => setState({ data, loading: false, error: null }))
 .catch(error => setState({ data: null, loading: false, error }));
 }, [url]);
 return state;
}