useState – Basic State Management
Stores a value that persists across renders and updates when set.
import { useState } from "react"; const [count, setCount] = useState(0); // Example usage: setCount(count + 1); useReducer – Complex State Logic
Good for state with multiple related values or when using actions.
import { useReducer } from "react"; const reducer = (state, action) => { switch (action.type) { case "increment": return { count: state.count + 1 }; default: return state; } }; const [state, dispatch] = useReducer(reducer, { count: 0 }); // Example usage: dispatch({ type: "increment" }); useContext – Share Data Without Prop Drilling
Lets you access values from a parent provider anywhere in the tree.
import { createContext, useContext } from "react"; const UserContext = createContext(); const user = useContext(UserContext); // Access shared user data useEffect – Side Effects
Run code after render (e.g., API calls, subscriptions, DOM updates).
import { useEffect } from "react"; useEffect(() => { document.title = "My Page"; }, []); // Runs once on mount useRef – Persistent Values & DOM Access
Keeps a value across renders without causing re-renders.
import { useRef } from "react"; const inputRef = useRef(); <input ref={inputRef} />; useMemo – Cache Computations
Avoids recalculating expensive values unless dependencies change.
import { useMemo } from "react"; const total = useMemo(() => items.reduce((a, b) => a + b, 0), [items]); useCallback – Cache Functions
Prevents function re-creation unless dependencies change.
import { useCallback } from "react"; const handleClick = useCallback(() => { console.log("clicked"); }, []); useLayoutEffect – Before Paint Effects
Runs before the browser paints; useful to avoid flicker.
import { useLayoutEffect } from "react"; useLayoutEffect(() => { console.log("Runs before paint"); }, []); useSWR – Simple Data Fetching & Caching
import useSWR from "swr"; const fetcher = (url) => fetch(url).then(res => res.json()); const { data, error, isLoading } = useSWR("/api/user", fetcher); State Library Hooks – External State
For libraries like Redux or Jotai.
import { useSelector, useDispatch } from "react-redux"; const value = useSelector(state => state.value); const dispatch = useDispatch(); useNavigate – Page Navigation
(React Router)
import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); navigate("/profile"); Utility Hooks
useBoolean – Easy Boolean State
const { value: isOpen, toggle, setFalse } = useBoolean(); useCopyToClipboard – Copy Text
const [copiedText, copy] = useCopyToClipboard(); copy("Hello World"); usePrevious – Track Previous Value
const prevCount = usePrevious(count); useDebounce – Delay State Updates
const [debouncedQuery] = useDebounce(query, 500); useMediaQuery – Match Screen Size
const isMobile = useMediaQuery("(max-width: 768px)"); useResizeObserver – Watch Element Size
const { width, height } = useResizeObserver({ ref }); useLocalStorage – Persist State in Browser
const [theme, setTheme] = useLocalStorage("theme", "light"); 
Top comments (0)