The Complete Guide to React: Components, State, Hooks & Performance

Most developers understand how to write functional React components, handle simple state transitions, and consume REST APIs. However, when an unexpected re-render slows down an application, an infinite effect loop freezes the browser, or state synchronization behaves unpredictably, surface-level knowledge falls short. To build fast, resilient, and enterprise-ready web applications, you need an exact mental model of how React really works under the hood.

This comprehensive engineering guide breaks down React from first principles: why it was designed, how components communicate, how the Virtual DOM and Reconciliation engine operate, and how core hooks like useState, useEffect, useMemo, and useCallback manage memory and execution cycles.

1. Why React? Evaluating Vanilla JavaScript, Angular, and Vue

To appreciate React's architecture, we must first look at the real-world engineering challenges it was designed to resolve.

The Problem with Vanilla JavaScript

Imagine engineering an operations dashboard—such as an inventory and service tracking system with real-time job queues, customer records, and billing modules. In Vanilla JavaScript, keeping the user interface in sync with application data requires imperative DOM surgery.

Every time a status updates, you must manually query the DOM (document.getElementById), compute layout modifications, and append or remove elements. As an application grows across dozens of views and thousands of elements, manual DOM manipulation becomes an unmaintainable tangle where synchronization bugs thrive.

React's Declarative Solution

React solves this through two foundational principles: Component-Based Architecture and Declarative UI. Instead of writing imperative code that tells the browser step-by-step how to alter the DOM, you declare what the UI should look like for any given state. When underlying state updates, React's runtime engine computes and applies the minimum necessary DOM mutations automatically.

Architectural Trade-offs: React vs Angular vs Vue

Selecting a frontend library is an architectural trade-off tailored to organizational goals and team velocity:

• React vs Angular: Angular is a complete, opinionated framework offering built-in dependency injection, form validation, and routing. While suitable for rigid enterprise standardization, React was adopted for its lightweight flexibility, composable architecture, and rapid release velocity.
• React vs Vue: Vue is intuitive, approachable, and lightweight. However, React commands a significantly larger global ecosystem, deep enterprise library support (TanStack Query, Tailwind, Redux Toolkit, Next.js), and an expansive hiring pool.
• The Fundamental Differentiator: While Vanilla JS can be structured into modular functions, it still mutates the Real DOM directly. React couples componentization with an in-memory Virtual DOM so that only the exact piece of UI that changed ever touches the browser.

2. The Foundation: Components, Props, and State

Every modern React application is built on three foundational pillars: Components, Props, and State.

What is a Component?

A component is a self-contained, reusable piece of user interface written as a JavaScript function that returns JSX. Think of it as a custom UI building block—similar to how HTML provides native primitives like <button> and <input>, React empowers you to create domain-specific primitives like <RepairCard />, <Sidebar />, and <Navbar />.

function RepairCard({ customerName, status }) {
  return (
    <div className="repair-card">
      <h3>{customerName}</h3>
      <p>Status: {status}</p>
    </div>
  );
}

Without components, large applications would dissolve into unreadable monolithic scripts. Breaking the UI into components makes each piece independently testable, reusable, and predictable.

Props: Predictable Downward Data Flow

Props (short for properties) represent the mechanism by which a parent component passes data down to its children, analogous to passing arguments into a function. Props are strictly read-only. A child component can read props, but it can never modify them directly.

function Dashboard() {
  return <RepairCard customerName="Ashish" status="Pending" />;
}

function RepairCard({ customerName, status }) {
  return <h3>{customerName} — {status}</h3>;
}

This immutability guarantees unidirectional data flow: data strictly moves downward (parent ➔ child). If a child needs to modify parent data, it cannot reach upward directly; it must invoke a callback function provided by the parent.

State: Internal Reactive Data

While props are received from outside, state is internal data owned and managed by the component itself that changes over time. Whenever state updates, React automatically schedules a re-render to reflect the new values on screen.

In functional components, state is initialized using the useState hook:

const [repairs, setRepairs] = useState([]);

Here, repairs represents the current state snapshot, while setRepairs is the updater function. Calling setRepairs(newRepairs) instructs React: "This data has changed; please re-render the component with the new snapshot."

Why not use a plain variable? If you declare let count = 0 and mutate it with count++, the value in memory changes, but React has no subscription to detect the change. Consequently, no re-render occurs and the screen remains stale. useState is the hook that binds a mutable variable to React's rendering pipeline.

Connecting Components, State, and Props

function Dashboard() {
  const [repairs, setRepairs] = useState([
    { id: 1, name: "Samsung Galaxy S24", status: "In Progress" },
    { id: 2, name: "iPhone 15 Pro", status: "Ready for Delivery" },
  ]);

  return (
    <div className="dashboard-grid">
      {repairs.map((repair) => (
        <RepairCard
          key={repair.id}
          customerName={repair.name}
          status={repair.status}
        />
      ))}
    </div>
  );
}

In this architecture, Dashboard is the component, repairs is its internal reactive state, and customerName and status are read-only props flowing downward into RepairCard.

3. React Internals: Real DOM vs Virtual DOM, Diffing & Reconciliation

Understanding what happens behind the scenes during state transitions is what empowers developers to build performant, 60 FPS user interfaces.

The Real DOM Bottleneck

The Document Object Model (DOM) is the browser's hierarchical node tree representing rendered HTML:

// Browser DOM Tree representation:
// document.body ➔ div.container ➔ (h1.title, button.save)

In large modern applications containing thousands of elements, updating a single DOM node imperatively can force the browser through computationally expensive rendering phases: Layout recalculation, Reflow, and Repaint. Mutating JavaScript objects takes nanoseconds, whereas browser reflows take milliseconds.

What is the Virtual DOM?

The Virtual DOM is not a browser API. It is a lightweight, in-memory JavaScript object tree maintained by React that mirrors the actual UI structure.

// Conceptual Virtual DOM snapshot before click
const oldVNode = {
  type: 'button',
  props: { className: 'btn', children: 'Save Order' }
};

// Virtual DOM snapshot after state change
const newVNode = {
  type: 'button',
  props: { className: 'btn', children: 'Saved!' }
};

The Diffing Algorithm

When state changes, React constructs a new Virtual DOM tree in memory and executes its Diffing Algorithm to compare it against the previous tree. Instead of assuming the entire page changed, React isolates the exact delta: "Only the text child of this button changed from 'Save Order' to 'Saved!'."

Reconciliation: Applying Minimal Patches

Once the diffing algorithm calculates the delta, React performs Reconciliation. It batches the operations and applies the absolute minimum patch to the real browser DOM.

4. Component Re-renders: Parent-Child Dynamics

A frequent point of confusion among engineers: "When a parent component re-renders, do all its children re-render as well?"

Yes, by default. When a parent updates, React re-executes the parent function body, which in turn calls the render functions of all nested children. However, this does not mean the browser touches the Real DOM. React compares the resulting Virtual DOM snapshots first; if a child's output is identical, real DOM mutation is skipped entirely.

To skip child function execution completely, React provides React.memo.

5. The Performance Trio: React.memo, useMemo & useCallback

Knowing when and how to memoize is essential for high-throughput data dashboards and complex user interfaces.

React.memo: Component-Level Optimization

React.memo is a Higher-Order Component (HOC) that wraps a functional component. If its incoming props remain shallowly unchanged, React skips re-rendering the component and reuses the previous rendered output.

const RepairCard = React.memo(function RepairCard({ customerName, status }) {
  console.log("RepairCard rendered:", customerName);
  return <div>{customerName} — {status}</div>;
});

If the parent dashboard re-renders 100 times but customerName and status remain unchanged, RepairCard will not execute.

The Shallow Comparison Pitfall

React.memo relies on shallow equality (===) to compare props. In JavaScript, non-primitive values (objects, arrays, and functions) are compared by memory address, not content:

const obj1 = { name: "Ashish" };
const obj2 = { name: "Ashish" };

console.log(obj1 === obj2); // FALSE: different memory addresses!

If a parent passes an inline function or object literal to a memoized child, a new memory reference is allocated on every render, completely bypassing React.memo unless stabilized with useCallback or useMemo.

useMemo: Value-Level Optimization

useMemo caches the result of an expensive calculation across render passes. React returns the cached calculation result as long as its specified dependencies remain unchanged.

const analytics = useMemo(() => {
  return calculateAnalytics(repairs);
}, [repairs]);

If an unrelated UI state updates (such as opening a modal or switching a theme), repairs remains identical, so the heavy calculation is skipped.

useCallback: Function-Level Optimization

useCallback memoizes a function reference itself across renders rather than recalculating a value. It ensures that an event callback passed to children maintains a stable memory reference.

const handleEdit = useCallback((repairId) => {
  openEditModal(repairId);
}, []);

Without useCallback, re-rendering a parent with 1,000 cards generates 1,000 new function instances every render, forcing all memoized children to re-render.

Comparing the Performance Trio

Combining All Three on a Dashboard

function RepairDashboard({ repairs }) {
  // 1. useMemo caches heavy financial metrics
  const financialMetrics = useMemo(() => {
    return calculateRevenueMetrics(repairs);
  }, [repairs]);

  // 2. useCallback preserves action handler reference
  const handleDeleteRepair = useCallback((id) => {
    deleteRepairRecord(id);
  }, []);

  return (
    <div>
      <MetricsSummary metrics={financialMetrics} />
      {repairs.map((repair) => (
        // 3. React.memo prevents card re-renders because handleDeleteRepair is stable
        <MemoizedRepairCard
          key={repair.id}
          repair={repair}
          onDelete={handleDeleteRepair}
        />
      ))}
    </div>
  );
}

6. Mastering useEffect: Lifecycle, Execution Timing & Cleanups

The useEffect hook coordinates side effects—operations outside the pure functional render cycle.

What is a Side Effect?

A side effect is any operation that interacts with an external system or browser API outside pure React rendering. Examples include HTTP requests, DOM listeners, timers, WebSocket channels, and local storage access.

Execution Order: Render, Paint, Then Effect

useEffect always executes asynchronously after the browser has completed layout and paint:

function App() {
  console.log("1. Component Render");

  useEffect(() => {
    console.log("3. Effect Executed");
  });

  return <div>Hello</div>; // 2. UI painted to screen
}

Why API calls belong in useEffect: If an API call is placed directly in the component body, it fires on every render. When the response arrives and updates state, it schedules another render, triggering another API call—causing an immediate infinite loop.

The Dependency Array Rules

• useEffect(() => {}, []): Executes once on initial mount only (e.g. initial data fetching).
• useEffect(() => {}) (no array): Executes after every single render. Placing state updates inside this creates an infinite loop.
• useEffect(() => {}, [user]): Executes on mount and whenever the 'user' dependency reference changes.

The Cleanup Function: Preventing Memory Leaks

When an effect allocates system resources or registers event handlers, it must return a cleanup function (return () => {}). The cleanup executes in two situations: when the component unmounts, and immediately before the effect re-runs due to changed dependencies.

// 1. Cleaning up window resize listeners
useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener("resize", handleResize);

  return () => window.removeEventListener("resize", handleResize);
}, []);

// 2. Clearing active intervals
useEffect(() => {
  const timer = setInterval(() => console.log("Running heartbeat"), 1000);
  return () => clearInterval(timer);
}, []);

// 3. Disconnecting WebSocket channels
useEffect(() => {
  const socket = io("wss://api.example.com");
  return () => socket.disconnect();
}, []);

When a dependency changes (e.g. user changes from "Ashish" to "Rahul"), React executes the cleanup for "Ashish" before running the new effect for "Rahul".

7. Parent-Child Communication & Controlled Forms

Unidirectional Data Flow & Callback Props

Because props are read-only, child components cannot directly mutate parent state. Instead, the parent passes down a callback function as a prop:

// Parent Component
function Dashboard() {
  const [repairs, setRepairs] = useState([
    { id: 101, device: "MacBook Pro" },
    { id: 102, device: "iPhone 14" },
  ]);

  const deleteRepair = (id) => {
    setRepairs((prev) => prev.filter((r) => r.id !== id));
  };

  return <RepairCard repair={repairs[0]} onDelete={deleteRepair} />;
}

// Child Component
function RepairCard({ repair, onDelete }) {
  return (
    <div>
      <h4>{repair.device}</h4>
      <button onClick={() => onDelete(repair.id)}>Delete</button>
    </div>
  );
}

When the button is clicked, the child invokes onDelete(repair.id). This executes the parent's deleteRepair function, updating parent state and triggering a predictable top-down re-render.

Controlled vs Uncontrolled Components

Form handling in React follows two distinct patterns:

• Controlled Components: The input value is driven directly by React state (value={name} and onChange). React is the single source of truth, enabling real-time validation, disabled submit states, and clean API payload generation.
• Uncontrolled Components: The browser DOM manages its own internal state. Values are queried imperatively when needed using a ref (inputRef.current.value).

// Controlled Form Component
const [customerName, setCustomerName] = useState("");

<input
  value={customerName}
  onChange={(e) => setCustomerName(e.target.value)}
/>

// Uncontrolled Form Component
const inputRef = useRef();

<input ref={inputRef} />
// Accessed on submit via inputRef.current.value

8. useRef vs useState: Choosing the Right State Container

useRef returns a mutable object whose .current property persists across renders without triggering a re-render when mutated.

const inputRef = useRef(null);

const focusInput = () => {
  inputRef.current?.focus();
};

<input ref={inputRef} />

9. Advanced Architecture: Code Splitting, Custom Hooks & Rate Limiting

Code Splitting & Lazy Loading

To reduce initial bundle size and improve First Contentful Paint (FCP), divide application routes into smaller asynchronous bundles using React.lazy and Suspense:

import React, { Suspense } from 'react';

const AnalyticsDashboard = React.lazy(() => import('./AnalyticsDashboard'));

function App() {
  return (
    <Suspense fallback={<div className="spinner">Loading dashboard...</div>}>
      <AnalyticsDashboard />
    </Suspense>
  );
}

Custom Hooks: Extracting Headless Logic

When stateful lifecycle logic repeats across components, encapsulate it into a reusable custom hook:

• useAuth(): Manages authentication sessions, JWT renewals, and user roles.
• useFetch(url): Standardizes HTTP requests, loading flags, and error handling.
• useDebounce(value, delay): Delays search query triggers until typing pauses.

Lifting State Up

When multiple sibling components require access to the same data, lift state up to their closest common ancestor. The parent maintains the single source of truth and distributes data downward via props.

Debounce vs Throttle

• Debounce: Waits until the user stops triggering an event (e.g. pauses typing) before executing the action. Ideal for live search suggestion inputs.
• Throttle: Guarantees that a function executes at most once during a fixed time interval, regardless of trigger frequency. Ideal for scroll position and window resize handlers.

10. React Architecture & Mental Model Recap

The following recap table outlines the foundational concepts required to master React's internal architecture:

Summary & Final Takeaways

React's declarative paradigm is built on top of a carefully engineered runtime: an in-memory Virtual DOM, heuristic diffing, batched reconciliation, and a fine-grained hook lifecycle. When you write code with this mental model in mind, you build applications that are faster, cleaner, and engineered to scale effortlessly in production.