Overview

React Fundamentals and Internal Working

React is a JavaScript library used to build interactive user interfaces by composing reusable components. Instead of manually updating the DOM after every change, you describe how the UI should look for a given state. React then handles efficient updates under the hood. This model improves maintainability in real projects because UI behavior stays predictable as applications grow.

Note

Think of React as a UI engine where $UI = f(state)$. When state changes, React recalculates what should appear on screen and updates only the necessary parts.

Core Ideas

Declarative UI

Describe the destination UI state, not every tiny DOM step.

Component Composition

Split screens into reusable, testable, independent building blocks.

Efficient Rendering

React computes minimal real DOM changes through reconciliation.

React Rendering Pipeline

graph TD A["State or Props Change"] --> B["Render Phase Create New Virtual Tree"] B --> C["Reconciliation Compare Old vs New"] C --> D["Commit Phase Apply Real DOM Updates"] D --> E["Browser Paint"]

DOM and Virtual DOM

The browser DOM is powerful but expensive to manipulate frequently at scale. React creates an in-memory representation called the Virtual DOM. On each update, React compares the previous virtual tree to the new one and computes a minimal patch. This comparison process is called reconciliation.

Why this matters

Efficient diffing helps maintain responsive interfaces during frequent updates such as typing, filtering, and live dashboards.

Reconciliation Rules

React follows practical heuristics while diffing trees. If element types differ, React replaces the subtree. If types match, React updates changed attributes and keeps existing nodes when possible. For lists, stable keys let React map old and new items correctly, reducing unnecessary re-renders and preserving component state.

Caution

Using array indexes as keys in dynamic lists can cause subtle UI bugs, especially when inserting, deleting, or reordering items.

JSX and Component Model

JSX in Simple Terms

JSX is syntax sugar that lets you write UI structures close to HTML while still using JavaScript expressions. It compiles into function calls that create element objects. JSX improves readability and intent, especially in nested UI trees.

JSX

const name = "Sahil";

const heading = <h1 className="title">Hello {name}</h1>;

Compiled JS

const name = "Sahil";

const heading = React.createElement("h1", { className: "title" }, "Hello ", name);

JSX Rules You Should Remember

• Return a single parent or fragment.
• Use className instead of class.
• Use {} for JavaScript expressions.
• Close all tags explicitly.

Component Types

Most modern projects use functional components with hooks. Class components still appear in legacy codebases and interviews, so understanding lifecycle methods remains useful.

Functional Component (Recommended)

function WelcomeCard({ name }) {
    return (
        <section>
            <h2>Welcome, {name}</h2>
            <p>React renders this based on current props.</p>
        </section>
    );
}

Class Component (Old Style)

class WelcomeCard extends React.Component {
    render() {
        return (
            <section>
                <h2>Welcome, {this.props.name}</h2>
                <p>Class components expose lifecycle methods.</p>
            </section>
        );
    }
}

Setting Up React with Vite

The Vite workflow is fast, minimal, and production-ready for React projects. Use the JavaScript template when you want simpler onboarding. Use the TypeScript template when you want static type safety and stronger tooling.

React + JavaScript

1. Create project.

   npm create vite@latest react-js-app -- --template react

2. Move into the folder and install dependencies.

   cd react-js-app
   npm install

3. Start development server.

   npm run dev

src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
);

src/App.jsx

import { useState } from "react";

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <main>
            <h1>React + Vite (JSX)</h1>
            <button onClick={() => setCount((c) => c + 1)}>Count: {count}</button>
        </main>
    );
}

React + TypeScript

1. Create project with TypeScript template.

   npm create vite@latest react-ts-app -- --template react-ts

2. Install dependencies.

   cd react-ts-app
   npm install

3. Run locally.

   npm run dev

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
);

src/App.tsx

import { useState } from "react";

export default function App() {
    const [count, setCount] = useState<number>(0);

    return (
        <main>
            <h1>React + Vite (TSX)</h1>
            <button onClick={() => setCount((c) => c + 1)}>Count: {count}</button>
        </main>
    );
}

Tip

Start with TypeScript if this is a long-term project. The extra type information usually pays off in medium and large codebases.

State, Props, and Data Flow

Props are external inputs passed from parent to child components. State is local, mutable data owned by a component. In React, data usually flows one way: parent to child. This one-way flow keeps behavior easier to reason about and debug.

Data Flow Diagram

graph LR P["Parent State"] -->|props| C1["Child A"] P -->|props| C2["Child B"] C1 -->|event callback| P C2 -->|event callback| P

State Update Behavior

State updates are batched and may run asynchronously. Because of this, use functional updates when the next state depends on the previous value.

setCount((prev) => prev + 1);

Danger

Never mutate state directly, such as count++ or state.user.name = "x". Mutation breaks predictable rendering and causes hard-to-track bugs.

Events, Conditional UI, and Lists

React events are declared directly on elements using props like onClick, onChange, and onSubmit. These handlers receive synthetic events that behave consistently across browsers. Conditional rendering lets you show loading states, empty states, success content, and error UI without writing separate pages. Lists connect data to UI and require stable key values so React can track identity correctly between renders.

Tip

Use meaningful identifiers (database IDs, UUIDs, slugs) as list keys. Stable keys preserve component state and reduce visual glitches during reorder operations.

Events + Conditional UI (JSX)

import { useState } from "react";

export default function SearchBox() {
    const [query, setQuery] = useState("");
    const [isLoading, setIsLoading] = useState(false);

    function handleSubmit(e) {
        e.preventDefault();
        setIsLoading(true);

        setTimeout(() => {
            setIsLoading(false);
            console.log("Searching for:", query);
        }, 800);
    }

    return (
        <form onSubmit={handleSubmit}>
            <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search topic" />
            <button type="submit" disabled={!query.trim() || isLoading}>
                {isLoading ? "Searching..." : "Search"}
            </button>

            {!query && <p>Type something to start.</p>}
            {query && !isLoading && <p>Ready to search for: {query}</p>}
        </form>
    );
}

List Rendering + Derived UI (TSX)

type Task = {
    id: string;
    title: string;
    done: boolean;
};

type TaskListProps = {
    tasks: Task[];
};

export function TaskList({ tasks }: TaskListProps) {
    const completed = tasks.filter((task) => task.done).length;

    return (
        <section>
            <p>
                Completed: {completed} / {tasks.length}
            </p>

            {tasks.length === 0 ? (
                <p>No tasks yet.</p>
            ) : (
                <ul>
                    {tasks.map((task) => (
                        <li key={task.id}>
                            <span>{task.done ? "✅" : "⬜"}</span> {task.title}
                        </li>
                    ))}
                </ul>
            )}
        </section>
    );
}

Event and List Flow

graph TD A["User Action"] --> B["Event Handler"] B --> C["State Update"] C --> D["Re-render"] D --> E["Conditional UI + Updated List"]

Forms and Controlled Components

A controlled component stores input value in React state and updates it through onChange. This approach centralizes form behavior, enabling validation, formatting, and conditional logic.

import { useState } from "react";

export default function NameForm() {
    const [name, setName] = useState("");

    return (
        <form>
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter your name" />
            <p>Preview: {name}</p>
        </form>
    );
}

Lifecycle Thinking in Modern React

Class components expose lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount. In function components, useEffect models setup and cleanup behavior.

graph TD M["Mount"] --> U["Update"] U --> U U --> X["Unmount"] M --> E1["Effect Setup"] U --> E2["Effect Re-run if deps changed"] X --> C["Cleanup"]

import { useEffect } from "react";

export default function ResizeLogger() {
    useEffect(() => {
        function onResize() {
            console.log("Window resized");
        }

        window.addEventListener("resize", onResize);

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

    return <p>Open console and resize window.</p>;
}

Advanced Building Blocks

Fragments

Fragments group elements without creating extra DOM nodes.

function UserHeader({ name, role }) {
    return (
        <>
            <h3>{name}</h3>
            <p>{role}</p>
        </>
    );
}

Portals

Portals render children into a different DOM subtree, commonly used for modals and overlays.

import { createPortal } from "react-dom";

function ConfirmModal({ open, onClose, onConfirm }) {
    if (!open) return null;

    return createPortal(
        <div className="overlay">
            <div className="modal">
                <h3>Delete item?</h3>
                <p>This action cannot be undone.</p>
                <button onClick={onClose}>Cancel</button>
                <button onClick={onConfirm}>Delete</button>
            </div>
        </div>,
        document.getElementById("modal-root"),
    );
}

Refs

Refs provide controlled direct access to DOM nodes or imperative APIs.

import { useRef } from "react";

export default function FocusInput() {
    const inputRef = useRef<HTMLInputElement | null>(null);

    function focusField() {
        inputRef.current?.focus();
    }

    return (
        <div>
            <input ref={inputRef} placeholder="Click button to focus" />
            <button onClick={focusField}>Focus Input</button>
        </div>
    );
}

Error Boundaries

Error boundaries catch rendering errors in part of the tree and show fallback UI instead of crashing the whole app.

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError() {
        return { hasError: true };
    }

    componentDidCatch(error, info) {
        console.error("UI error:", error, info);
    }

    render() {
        if (this.state.hasError) {
            return <p>Something went wrong. Please refresh.</p>;
        }

        return this.props.children;
    }
}

graph LR A["Child Component Throws Error"] --> B["Error Boundary Catches"] B --> C["Fallback UI Rendered"] C --> D["Rest of App Continues"]

Note

Error boundaries catch errors during rendering, lifecycle methods, and constructors of child components. They do not catch async errors in event handlers unless explicitly handled.

Performance and Architecture Concepts

React performance is mostly about reducing unnecessary work, not avoiding all re-renders. Memoization tools such as React.memo, useMemo, and useCallback should be used where profiling shows measurable benefit.

Fiber and Scheduling

React Fiber allows work to be split into units so rendering can be prioritized. High-priority interactions can be handled quickly, while non-critical updates can wait, improving perceived responsiveness.

graph TD A["Incoming Updates"] --> B["Scheduler"] B -->|High Priority| C["Urgent UI Work"] B -->|Normal Priority| D["Standard Updates"] B -->|Low Priority| E["Deferred Work"]

Caution

Premature optimization often adds complexity. Measure first, optimize second, and keep code readable.

Strict Mode, Synthetic Events, and Code Splitting

React.StrictMode helps detect side-effect-related issues during development and encourages safer patterns. React also normalizes browser events using synthetic events, giving a consistent event API across environments. For bundle performance, code splitting with React.lazy and Suspense loads feature code only when needed.

import { Suspense, lazy } from "react";

const ProfilePanel = lazy(() => import("./ProfilePanel"));

export default function App() {
    return (
        <Suspense fallback={<p>Loading...</p>}>
            <ProfilePanel />
        </Suspense>
    );
}

Common Mistakes and Safer Alternatives

Direct State Mutation

Create new objects and arrays instead of mutating existing state.

Unstable Keys

Use stable IDs for list keys so React can preserve identity correctly.

Heavy Parent Components

Split large components and memoize only where profiling justifies it.