DEV Community: Mahdar

Why useRef Is Better Than querySelector in React

Mahdar — Mon, 22 Dec 2025 13:55:33 +0000

If you come from a vanilla JavaScript or jQuery background, document.querySelector probably feels natural. You want a DOM node you grab it. Simple.

But React is not DOM-first.
It’s state-first and declarative.

Using querySelector inside a React app is often a code smell. It might work today, but it silently breaks React’s mental model and makes your code fragile in ways that only show up later.

Let’s talk about why useRef exists, what problem it actually solves, and why it’s the correct tool in React.

React Does Not Own the DOM the Way You Think

In React, you do not control the DOM directly. React does.

React maintains its own abstraction (the Virtual DOM) and decides:

when elements are created
when they are destroyed
when they are replaced
when they are re-used

When you use querySelector, you are bypassing React and reaching into the DOM manually. That creates a hidden dependency between your code and something React considers implementation detail.

This leads to subtle bugs.

useRef Is a Contract With React

When you use useRef, you are not “querying” the DOM.

You are saying to React:
“When you create this element, please give me a stable reference to it.”
That’s a contract, not a hack.
React guarantees that:

the ref will point to the correct DOM node
the reference will stay stable across re-renders
the ref lifecycle is aligned with the component lifecycle

This is something querySelector can never guarantee.

With useRef, React assigns the reference only after the element is committed to the DOM.

Concurrent Rendering Changes Everything

React’s concurrent features (like Suspense, transitions, streaming SSR) make DOM querying even more dangerous.

In concurrent rendering:

React can render multiple versions of the UI
Only one version is committed
Others are thrown away

If you use querySelector, you might accidentally interact with a DOM node from a render that never gets committed.

useRef always points to the committed tree the one the user actually sees.

Performance Is Not the Main Point (But It Helps)
This isn’t really about performance but it’s worth mentioning.

querySelector:

walks the DOM
depends on selector complexity
can become expensive if abused

useRef:

is a direct pointer
no lookup
constant-time access

More importantly, refs avoid unnecessary reflows and re-queries caused by repeated DOM searches.

Final Thoughts

Using querySelector in React is like bypassing the type system in TypeScript it works, until it doesn’t.

useRef:

respects React’s lifecycle
works with concurrent rendering
keeps components isolated
makes intent explicit
scales with your codebase

As your app grows, these things stop being “best practices” and start being requirements.

Write React the way React expects to be written.

Top 30 React Interview Questions and Answers in 2025

Mahdar — Sun, 30 Nov 2025 13:31:10 +0000

This guide breaks down the core concepts that define the modern React ecosystem, focusing on the game-changing features in React 19 and the Server Component Architecture.

1. What are React Server Components (RSCs) and how do they work?
React Server Components (RSCs) represent a fundamental paradigm shift in how we build React applications. They allow components to be rendered exclusively on the server, shifting work out of the client-side bundle and execution environment. They are a complement to, not a replacement for, traditional Client Components.

How they work:

Zero-Bundle-Size: RSC code, including large dependencies like date libraries or Markdown parsers, is never shipped to the client. This drastically reduces the JavaScript bundle size.
Server-Only Execution: They run entirely on the server. They cannot use state (useState), effects (useEffect), or browser-only APIs (like onClick). They are primarily for data fetching and static UI composition.
Direct Backend Access: They can securely and directly access backend resources (databases, file systems, internal services) without the performance overhead or complexity of a separate REST/GraphQL layer.
Understanding React Server Components
Integrated Rendering: The React framework (Next.js App Router, Remix, etc.) orchestrates the rendering. It sends the RSC output as a lightweight "UI description" to the client, while reserving standard client-side JavaScript for interactive elements.
Composition: RSCs can import and render Client Components seamlessly, but the reverse is not true (Client Components cannot import Server Components).

Example: A ProductPage Server Component handles the secure data fetch and renders the static layout, which then imports an interactive AddToCartButton Client Component.

2. What is the React Compiler in React 19?

The React Compiler (formerly "React Forget") is a new, automatic compiler designed to fundamentally solve the problem of unnecessary re-renders in React. Its primary goal is to automatically manage memoization, making manual calls to useMemo, useCallback, and React.memo obsolete.

How it works:
The compiler deeply analyzes your component code and applies memoization only where it's truly beneficial. It ensures that components only re-render when the UI's semantic meaning has actually changed

Before (Manual): Developers had to correctly identify and wrap logic/values to prevent unnecessary re-creation on every render.

// Manual memoization and dependency array management
const expensiveValue = useMemo(() => calculate(a, b), [a, b]);

After (Automatic): The compiler ensures that the variable expensiveValue retains its identity and value across renders if its dependencies (a and b) haven't changed—without any manual wrapping.

// The compiler does the memoization automatically
const expensiveValue = calculate(a, b);

This change is critical: it leads to less boilerplate, eliminates a major source of performance bugs, and allows developers to write cleaner, more standard JavaScript. What does React Compiler do?

3. What are Actions in React 19?

Actions are a first-class feature for managing data mutations and submissions, typically triggered by a form. They are designed to integrate natively with Server Components, providing a robust, built-in solution for form handling, pending states, and optimistic updates.

Whats-new-in-react-19?

How they work:
An async function—the "Action"—is passed directly to a form element's action prop. This function can execute on the server (Server Action) or the client. React manages the entire submission lifecycle: preventing default behavior, handling loading states, and managing errors.

// A Server Component
function AddToCart({ productId }) {
  // The 'use server' directive marks this function for server-side execution.
  async function addToCartAction(formData) {
    'use server'; 
    const itemId = formData.get('itemId');
    await addToCart(itemId); // Securely mutate data on the server
  }

  return (
    <form action={addToCartAction}> {/* Pass the async function as the action */}
      <input type="hidden" name="itemId" value={productId} />
      <button type="submit">Add to Cart</button>
    </form>
  );
}

4. What is the useActionState Hook?

The useActionState hook (previously useFormState) is the client-side counterpart to Actions. It allows a component to handle the state and response that results from an Action submission.
useActionState

"use client";

import { useActionState } from "react";
import { createUser } from "./actions";

const initialState = {
  message: "",
};

export function Signup() {
  const [state, formAction, pending] = useActionState(createUser, initialState);

  return (
    <form action={formAction}>
      <label htmlFor="email">Email</label>
      <input type="text" id="email" name="email" required />
      {/* ... */}
      {state?.message && <p aria-live="polite">{state.message}</p>}
      <button aria-disabled={pending} type="submit">
        {pending ? "Submitting..." : "Sign up"}
      </button>
    </form>
  );
}

5. What is useFormStatus Hook?

The useFormStatus hook is a simple way to access the submission status of the nearest parent <form> that is executing an Action.

useformstatus
How it works:

This hook provides metadata about the form submission, primarily the pending boolean, which is ideal for disabling the submit button or showing a loading spinner. Crucially, it must be used inside a Client Component that is a descendant of the <form> being processed.

'use client';
import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Save Changes'}
    </button>
  );
}

6. What is useOptimistic Hook?
The useOptimistic hook is dedicated to implementing optimistic UI updates. It allows the application to show the user the expected result of a mutation instantly, even before the network request has completed, significantly improving perceived performance.

How it works:

It maintains two versions of state: the real state and the optimistic state. When a mutation starts, you update the optimistic state immediately. When the server response is received (success or error), the optimistic state automatically syncs back to the real state.

import { useOptimistic } from 'react';

function MessageList({ messages }) {
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages, // The real state (from server)
    // The function to compute the optimistic state
    (currentMessages, newMessageText) => [...currentMessages, { text: newMessageText, sending: true }]
  );

  async function formAction(formData) {
    const newMessageText = formData.get('message');
    addOptimisticMessage(newMessageText); // Optimistically update the UI
    await sendMessage(newMessageText); // The real server request (takes time)
  }

  return (
    <>
      {optimisticMessages.map((msg, index) => (
        <div key={index}>{msg.text} {msg.sending && <small>(Sending...)</small>}</div>
      ))}
      <form action={formAction}>...</form>
    </>
  );
}

7. What is Concurrent Rendering in React?

Concurrent Rendering is a foundational feature introduced in React 18 that makes the rendering process interruptible. It allows React to work on multiple states or "versions" of the UI simultaneously, pausing, resuming, or abandoning a render based on priority. more...
Key Benefit:

It prevents the main thread from being blocked by non-urgent updates, ensuring the UI remains highly responsive (e.g., typing in an input field is always smooth) even when a heavy, lower-priority update is processing in the background.

Mechanisms:

Time Slicing: Breaking rendering work into small chunks.
Suspense: Allowing components to declare they are "waiting" for data.
useTransition: A hook to explicitly mark a state update as non-urgent, allowing high-priority updates (like input events) to interrupt it.

8. What are the 'use client' and 'use server' directives?

These are mandatory directives that explicitly define the execution environment within the React Server Component architecture.

'use client' Environment -> Client (Browser): To create an interactive component.Can use state, effects, and all browser APIs (e.g., onClick, localStorage).

'use server' Environment -> Server (Node.js): To create a secure, mutable API endpoint (Action).Can access backend resources (database, file system) but cannot use browser APIs.

Placement: use client is placed at the very top of a file.use server is typically placed at the top of an async function within an RSC, turning that function into a Server Action callable from the client.

9. How does the new use API work?
The use API is a special, non-conditional hook (though it looks like one, it can be called inside conditionals and loops, unlike standard hooks) that reads the value of a resource like a Promise or Context.

Key Difference and Value:

It simplifies Suspense integration. When use is called with a Promise, it forces the nearest Suspense boundary to show its fallback until the Promise resolves.

// Reading a Promise (simplifies Suspense integration)
// The component will suspend until the notePromise resolves.
function Note({ notePromise }) {
  const note = use(notePromise); 
  return <div>{note.title}</div>;
}

// Reading Context
function Sidebar() {
  // Unlike traditional hooks, `use` can be called conditionally
  if (!shouldShowSidebar) return null; 
  const theme = use(ThemeContext); 
  return <div className={theme}>...</div>;
}

10. What is Document Metadata in React 19?
React 19 now offers native support for document metadata, allowing developers to render elements like <title>, <meta>, and <link> anywhere in the component tree.

How it works:

React's renderer automatically detects and hoists these tags, ensuring they are correctly placed into the document's <head> section during both initial SSR and client-side rendering. This drastically simplifies managing SEO-critical metadata, especially in complex, nested routing/layout structures.

function BlogPost({ post }) {
  return (
    <article>
      {/* Rendering metadata anywhere in the component tree */}
      <title>{post.title} | My Blog</title> 
      <meta name="author" content={post.author} />
      <h1>{post.title}</h1>
      {/* ... rest of the content */}
    </article>
  );
}

11. What improvements were made to refs in React 19?

The primary improvement is a significant simplification of ref handling: you can now pass ref as a regular prop to function components without needing forwardRef.

12. What is the Activity component in React 19?

The <Activity> component in React 19 solves a critical problem: how to hide parts of your UI without losing state. It's like putting components to sleep while keeping their memory intact. more...

13. What is useEffectEvent Hook?
At its core, the useEffectEvent hook allows you to create stable event handlers within effects. These handlers always have access to the latest state and props, even without being included in the effect’s dependency array. However, on a broader scope, the Hook provides a solution to a subtle but common challenge that affects how effects in React handle the stale closure problem.more...

14. How does Automatic Batching work in React 19?

Automatic Batching is a performance optimization where React groups multiple state updates (setX, setY) that happen within a single execution cycle into a single, unified re-render.
Automatic Batching is applied to all state updates, regardless of their origin (event handlers, promises, timeouts, native code, etc.). This ensures that any sequence of updates always results in only one re-render, by default.

// In React 18 and 19, this sequence triggers only ONE re-render.
function handleClick() {
  setCount(c => c + 1);
  setName('New Name');
  // Even if setName was in a setTimeout, it would be batched.
}

15. What is Partial Pre-rendering in React?

Partial Pre-rendering is a key performance strategy enabled by RSCs and Suspense. It allows the server to initially send a page as static HTML while leaving "holes" for highly dynamic or personalized content.

How it works:

Static Shell: The page's static structure and layout are served instantly (like a pre-rendered static site, excellent for Core Web Vitals).

Suspense "Holes": Dynamic sections are wrapped in <Suspense>boundaries. The server sends a lightweight placeholder for these.

Streaming: As the server fetches the data for the dynamic parts, it streams the completed HTML for those sections separately, replacing the placeholders without blocking the rest of the page.
This delivers the SEO and performance benefits of Static Site Generation (SSG) combined with the freshness and dynamism of Server-Side Rendering (SSR).

16. How has SSR improved in React 19?
The Server Component architecture fundamentally redefined and improved Server-Side Rendering (SSR) by moving data fetching to the server side.
Key Improvements:
Elimination of Client-Side Data Waterfall: Components fetch data directly on the server, eliminating the need to wait for the client to download JS, hydrate, and then start fetching data.

Intelligent Streaming & Hydration: React can stream the UI in smaller, prioritized chunks. The client starts hydrating and becoming interactive on the critical, ready-to-go parts while the slower parts are still streaming in the background.

Unified Architecture: The line between SSG and SSR is blurred. The framework (like Next.js) can cache RSC outputs intelligently, only re-rendering and re-streaming the parts that need to be fresh.

17. What are Performance Tracks in React?
"Performance Tracks" is a general, non-official term that refers to the practice of monitoring and analyzing the various stages of an application's lifecycle, especially focusing on rendering performance and bundle size.

Key Tools for Tracking Performance:
React DevTools Profiler: The primary tool for tracing component renders, measuring render time, and identifying unnecessary re-renders (which the React Compiler aims to eliminate).

Browser DevTools (Performance Tab): Essential for analyzing CPU usage, repaint/layout times, and identifying long tasks that block the main thread.

Code Splitting/Bundle Analysis: Using tools like Webpack Bundle Analyzer to break down and optimize the size of the JavaScript sent to the client.

18. How do keys work in React lists and why use unique IDs?
The key prop is a special string attribute required when rendering a list of elements. It helps React identify which items in a list have changed, been added, or been removed, which is crucial for efficient DOM manipulation.

Why Unique and Stable IDs are Non-Negotiable:
React uses the key to create a stable identity for each component in the list.

Using Index as Key (Anti-Pattern): If a list's order changes (e.g., an item is prepended or sorted), every item's index/key changes. React sees this as every component being deleted and re-created, leading to:

Significant performance degradation due to unnecessary DOM manipulation.
State bugs where component state (like the value of an input field) is incorrectly retained or mixed up across the wrong list items.

Using Unique ID as Key (Best Practice): By using a stable, unique identifier from your data (e.g., item.id), the identity of each item is preserved regardless of where it moves in the list, ensuring correct, efficient updates.

19. What's the difference between controlled and uncontrolled components?

This distinction relates to how form input data is managed.

Controlled Component: The form data is entirely handled by React's component state (useState).

Mechanism: The input's value is set by the value prop, and changes are handled by an onChange handler that updates the state.
Pros: Single source of truth (the React state), easy to perform immediate validation and conditional formatting, and clear data flow.

- Example:
<input value={state} onChange={handleChange} />

Uncontrolled Component: The form data is managed by the DOM itself (standard HTML behavior).

Mechanism: You use a ref to access the value imperatively when you need it (e.g., in a submit handler). You typically use the defaultValue prop for initial state.
Pros: Requires less boilerplate code, simpler for very basic forms or integrating non-React libraries.

- Example:
<input ref={inputRef} defaultValue="Initial Value" />

20. What are best practices for state management?
The state management landscape is heavily influenced by the Server Component architecture, shifting the responsibility for data fetching and caching away from client-side global stores.

1. Prioritize Server Components for Data: For any server-derived data (products, users, posts), the best practice is to fetch it directly in an RSC. This eliminates the need for complex global client-side caching solutions.

2. Colocate Local UI State: Use useState and useReducer for all local, ephemeral state (e.g., modal open/close, dropdown status). Keep state as close to its usage as possible.

3. Choose Lightweight for Global Client State: For complex, cross-cutting UI state (e.g., dark mode toggle, multi-step form state), favor minimal, low-boilerplate libraries like Zustand or Jotai over heavy solutions like Redux.

4. Use Specialized Libraries for Advanced Server Caching: If you have highly dynamic, frequently updated data or need sophisticated features like offline support and focus-refetching, TanStack Query (React Query) remains the gold standard for managing server cache on the client.

5. Leverage the URL for Global State: Use the URL and search parameters (via hooks like useSearchParams in Next.js/Remix) to manage state that should be persisted, shareable, and refresh-safe (e.g., filters, sorting, active tab).

Summary: The modern stack is about decentralization. Server Components handle data, and React's built-in hooks handle local UI logic. Global stores are reserved only for truly complex, cross-application client-side state.

21. What is hydration in React?
Hydration is the process by which React attaches event listeners and updates the DOM to match the virtual DOM on the client side. Hydration is necessary for server-side rendered React applications to ensure that the client-side rendered content is interactive and matches the server-rendered content. During hydration, React reconciles the server-rendered HTML with the client-side virtual DOM and updates the DOM to match the virtual DOM structure.

Mastering Async & Concurrency: The React 18+ & Next.js Paradigm Shift

Mahdar — Thu, 13 Nov 2025 10:10:41 +0000

Concurrency is about dealing with a lot of things at once.
Asynchrony is about dealing with one thing at a time, but not blocking on it. They are related but distinct concepts, both essential for responsive systems.

1.Concurrency vs Asynchronous — Core Concepts

Asynchronous

Definition: The ability to initiate an operation and continue executing other code without waiting for that operation to complete, returning to it later. It's about "doing one thing while waiting for another to finish" without halting the main flow.

Goal: Primarily, to prevent blocking the main thread, ensuring the application remains responsive, especially during I/O operations.

Mechanism: Achieved through constructs like Promises, async/await syntax, callbacks, and the browser's Web APIs or Node.js's native APIs.

Example:

const data = await fetch("/api/user"); // non-blocking network request
console.log("I run while fetch is pending");

JavaScript is fundamentally single-threaded, meaning it never executes two lines of user-defined code at exactly the same time. Instead, it intelligently schedules tasks via the event loop, giving the illusion of parallel work by quickly switching between tasks.

In short:
Asynchronous = "Don’t block the main thread; I’ll continue later when you’re done."

Concurrency

Definition: The compositional aspect of being able to deal with multiple things at once. It's about managing multiple asynchronous tasks that are in progress simultaneously or interleaved, even when executed on a single processing unit.

Goal: To maximize the utilization of available resources (e.g., I/O bandwidth) and improve overall throughput and responsiveness by efficiently handling these multiple in-flight operations.

In JS: The event loop is the orchestrator. It allows multiple asynchronous operations to be "in flight" concurrently (e.g., several fetch requests waiting for network responses), even though the CPU executes only one JavaScript task at a time. The CPU switches between these tasks when one needs to wait.
Example:

const [user, posts] = await Promise.all([
  fetch("/api/user"),
  fetch("/api/posts")
]);

Both network requests (/api/user and /api/posts) are initiated almost concurrently. While JavaScript itself runs on one thread, the underlying network operations are handled by the browser/OS, and their results are managed together by Promise.all as they resolve.

In short:
Concurrency = "Handle multiple asynchronous operations efficiently and manage their progress together."

2. How This Applies in React

React 18+ introduced Concurrent Rendering It's crucial to understand that this is not the same as JavaScript's concurrency model (i.e., making your JavaScript code run in parallel threads). React's Concurrent Rendering is a specific, internal scheduling model that makes the process of rendering UI updates interruptible and prioritizable.

Example: Prioritized UI Updates Consider a scenario where React needs to render a large, complex component tree.

In old React (synchronous rendering): Once a render cycle started, it was monolithic and couldn't be interrupted. If a user clicked a button or typed into an input during this heavy render, the UI would freeze until the entire render completed.

In Concurrent React: React can now intelligently pause, abort, or reprioritize rendering work. So, if a new high-priority update (like a keyboard input event or a button click) occurs during a computationally intensive render, React can:

Pause the current lower-priority render in progress.
Handle the urgent, high-priority work immediately (e.g., updating the input value).
Resume or even completely restart the previous render later, without the user perceiving a freeze.

Key concurrent features that leverage this scheduling:

useTransition() → Mark state updates as low priority, allowing urgent updates to interrupt them.

useDeferredValue() → Defer re-renders for less critical parts of the UI, ensuring the primary content remains responsive.

Streaming Server Components (in Next.js) → Stream HTML chunks progressively, improving perceived loading times.

In short:

React’s concurrency = "Smart, interruptible scheduling of UI renders for a smoother, more responsive user experience, not parallel CPU execution of your JS code."

3. In Next.js (React 18+ / 19)

Next.js deeply integrates and leverages React's concurrent features to enhance both server and client-side rendering.

Examples:

Server Components (RSC):

These execute asynchronously on the server, allowing you to await data fetching directly within a component (await fetch() in an RSC).

Their rendering is concurrent, enabling React to stream parts of the UI to the client as data for each section becomes ready, rather than waiting for the entire page.

Suspense Boundaries:

Used extensively for asynchronous data fetching and code splitting. React effectively "waits" for promises to resolve before continuing rendering a specific subtree.

Crucially, while waiting, it can show a predefined fallback UI, keeping the rest of the application interactive.

Streaming:

Instead of the traditional approach of waiting for the entire page's HTML to be generated before sending anything, React/Next.js streams chunks of HTML to the browser as they become ready.

This is a direct application of concurrent rendering, allowing users to see and even interact with parts of the page much sooner.

Error Handling and Race Safety:

Concurrent React can gracefully cancel an in-progress async render if new data or navigation demands a different UI state, preventing stale UI or race conditions.

JavaScript asynchrony keeps the single main thread free by offloading work; Concurrency in JavaScript deals with efficiently managing multiple such asynchronous tasks together; React concurrent rendering takes that same principle into the UI layer — scheduling and rendering multiple UI “tasks” concurrently and interruptibly so users always get a smooth, non-blocking experience.

React Hooks: A Comprehensive Cheatsheet & Guide

Mahdar — Mon, 03 Nov 2025 14:56:00 +0000

React Hooks revolutionized how we write components, moving logic from complex class lifecycles to clean, reusable functions. But with so many hooks (especially with React 19!), it's easy to get lost.

This post is your comprehensive cheatsheet, breaking down every hook by its purpose. Bookmark this page—you'll come back to it!

The Rules of Hooks

Before you start, remember the two golden rules (with one new exception):

Only Call Hooks at Top Level (not in loops/conditionals/nested functions)
Only Call from React Functions (components or custom hooks)
use hook is the exception can be called conditionally!

// ✅ Correct
function MyComponent() {
  const [count, setCount] = useState(0); // top-level
}

// ❌ Wrong
if (condition) {
  const [count, setCount] = useState(0); // don't do this
}

STATE: Managing Component State

Hooks for storing and updating values within your component.

useState → The basic state hook. Use it for simple, local component state (strings, numbers, booleans, arrays).
useReducer → Manages complex state logic, especially when the next state depends on the previous one. A great alternative to useState for complex objects or when state transitions are well-defined (think: Redux-lite for a single component).

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

ACTION & FORM: Hooks for Forms (React 19+)

A new suite of hooks designed to make form handling and server actions seamless.

useActionState → Manages the state of a form action. It gives you the pending state, the error message, and the returned data from the action, all in one.

const [state, formAction] = useActionState(async (formData) => {
  const result = await submitForm(formData);
  return result;
});

useFormStatus → Used inside a <form>, this hook gives you the pending status of the parent form. Perfect for disabling a submit button or showing a spinner.

useOptimistic → Lets you "optimistically" update the UI before an async action completes. For example, show a new message in a chat list immediately while the server request is still pending. React will automatically revert it if the action fails.

Optimistically update UI before async actions complete.

const [messages, setMessages] = useOptimistic(initialMessages);

async function handleSend(newMessage) {
  setMessages([...messages, newMessage]); // show instantly
  await sendToServer(newMessage); // sync with backend
}

EFFECT: Side Effects & Lifecycle

Hooks for interacting with the "outside world" (APIs, subscriptions, the DOM).

useEffect → Run side effects after render. This is your go-to for data fetching, setting up subscriptions, or manually manipulating the DOM. Don't forget the cleanup function!

useEffectEvent → Creates a stable function to read the latest state/props inside an effect.

When to use: When you need to call a function inside useEffect that uses props/state, but you don't want the effect to re-run when that prop/state changes. (Solves the "dependency array" problem).

useLayoutEffect → Runs synchronously after all DOM mutations but before the browser paints. Use this only when you need to read layout from the DOM (like getting an element's size) and synchronously re-render.** Use sparingly as it blocks painting.**

useInsertionEffect → Runs before useLayoutEffect and before any DOM mutations. This is almost exclusively for CSS-in-JS libraries to inject <style> tags. You will probably never use this directly.

ASYNC: Resource Loading (React 19+)

A new paradigm for handling async data and resources.

use → The revolutionary hook. It "unwraps" the value of a Promise (for data) or reads a Context. Unlike other hooks, it can be used in loops and conditionals. It's the key to client-side data fetching with Suspense.

PERF: Performance & Memoization

Hooks to skip unnecessary work and keep your app fast.

useMemo → Caches (memoizes) the result of an expensive calculation. It re-runs the calculation only if one of its dependencies changes.

useCallback → Caches a function definition. This is vital when passing callbacks to optimized child components (like React.memo) to prevent them from re-rendering unnecessarily.

useTransition → Marks state updates as "non-urgent." This keeps your UI responsive (like keeping a text input fast) while a "heavy" update (like re-rendering a large list) happens in the background.

useDeferredValue → Defers updating a non-critical part of the UI. Similar to useTransition but used when you don't control the state update itself (e.g., the value is a prop) debouncing alternative.

// useTransition
const [isPending, startTransition] = useTransition();

startTransition(() => {
  setFilteredItems(expensiveFilter(items));
});

// useDeferredValue
const deferredSearch = useDeferredValue(searchTerm);

Refs & Imperative Access

Hooks for accessing DOM nodes or storing values that don't cause re-renders.

useRef → Returns a mutable ref object. Its .current property can hold a value that persists across renders without triggering a re-render. Perfect for accessing DOM elements (e.g., myInput.current.focus()) or storing timer IDs.

useImperativeHandle → Customizes the instance value that is exposed to parent components when using ref. Used with forwardRef to create a custom, limited API for your component.

OTHER: Context, Identity & External Stores

Utility hooks for solving specific problems.

useContext → Reads and subscribes to a React Context. The simplest way to consume shared data (like a theme or user auth) and avoid "prop drilling."

useId → Generates a unique, stable ID. Essential for accessibility attributes (like connecting <label>s to <input>s) and preventing ID mismatches during Server-Side Rendering (SSR).

useSyncExternalStore → Subscribes to an external store (like Zustand, Redux, or even window.matchMedia) in a way that is compatible with concurrent rendering.

const online = useSyncExternalStore(
  (listener) => window.addEventListener("online", listener),
  () => navigator.onLine
);

That's the list! Don't try to memorize them all. Use this guide as a reference. The best way to learn is to build.

What's your most-used hook? Any tricky ones I missed? Let me know in the comments!