React Hooks That Drive Most Modern Components

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");