React Hooks Explained Simply

The Core Hooks

React has many hooks. These five handle 90% of cases.

useState

Local component state:

const [count, setCount] = useState(0);
const [user, setUser] = useState(null);

// Update state
setCount(count + 1);
setCount(prev => prev + 1);  // Safer for async

useEffect

Side effects (API calls, subscriptions, DOM manipulation):

// Run on every render
useEffect(() => {
    console.log('Rendered');
});

// Run once on mount
useEffect(() => {
    fetchData();
}, []);

// Run when dependencies change
useEffect(() => {
    fetchUser(userId);
}, [userId]);

// Cleanup
useEffect(() => {
    const subscription = subscribe();
    return () => subscription.unsubscribe();
}, []);

useContext

Access context without prop drilling:

const ThemeContext = createContext('light');

function App() {
    return (
        <ThemeContext.Provider value="dark">
            <Button />
        </ThemeContext.Provider>
    );
}

function Button() {
    const theme = useContext(ThemeContext);
    return <button className={theme}>Click</button>;
}

useMemo / useCallback

Performance optimization (use sparingly):

// Memoize expensive computation
const sorted = useMemo(() => {
    return items.sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

// Memoize function reference
const handleClick = useCallback(() => {
    doSomething(id);
}, [id]);

Custom Hooks

Extract reusable logic:

function useLocalStorage(key, initialValue) {
    const [value, setValue] = useState(() => {
        const stored = localStorage.getItem(key);
        return stored ? JSON.parse(stored) : initialValue;
    });

    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(value));
    }, [key, value]);

    return [value, setValue];
}

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