React

1. React Basics & Philosophy

Imagine you are building a custom workstation. You could buy a pre-configured office desk with drawers, cable holes, and stands built-in (that is Angular). Or, you could buy raw IKEA table tops, legs, brackets, and drawers (that is React). With React, you build exactly what you want, but you are responsible for choosing and assembling all the pieces (routing, state management, validation).

React is a declarative, component-based JavaScript library for building user interfaces, developed and maintained by Meta (Facebook) and a community of developers. Unlike Angular, React is opinionatedly thin — it focuses strictly on the View layer of the application. For routing, state management, and HTTP requests, developers rely on the rich React ecosystem (e.g., React Router, Redux, Zustand, Axios).

Imperative (Step-by-step instructions):
"Go down to the lobby, walk out the front door, turn right, walk 3 blocks, and stop."

Declarative (Result-oriented description):
"I want to be at the coffee shop at 3rd Avenue."

React is declarative. You describe what the UI should look like for a given state, and React handles the updates to make the browser match that description. You don't write manual DOM selectors (document.getElementById) or append elements yourself.

Library vs. Framework Comparison

2. Virtual DOM & Reconciliation

Directly manipulating the browser's Real DOM is slow and expensive. When you change an element's text using the Real DOM, the browser has to recalculate the page layout and repaint the screen (a process called reflow and repaint). Doing this hundreds of times a second freezes the browser.

To solve this, React uses a Virtual DOM — a lightweight, in-memory copy of the Real DOM made of plain JavaScript objects.

The Reconciliation Process (Diffing)

When a component's state or props change:

1. Render: React generates a new Virtual DOM tree representing the updated UI.
2. Diffing: React compares this new Virtual DOM tree with the previous Virtual DOM tree using a highly optimized comparison algorithm.
3. Reconciliation: React calculates the minimum number of changes required and updates only those specific modified nodes in the browser's Real DOM.

State Change 
   |
   v
Render New Virtual DOM Tree
   |
   v
Diff with Old Virtual DOM Tree  <--- (React's O(n) heuristic algorithm)
   |
   v
Reconcile (Batch update only modified nodes in Real DOM)

3. JSX (JavaScript XML)

JSX is a syntax extension for JavaScript that allows you to write HTML-like markup directly inside JavaScript files. It combines UI structure and component logic in one place.

Browsers do not understand JSX. A compiler (like Babel or SWC) compiles JSX code into standard JavaScript calls (React.createElement or the modern jsx() runtime function) before rendering.

Compilation Example

// What you write (JSX)
const element = <h1 className="title">Hello World</h1>;

// What it compiles to (Plain JavaScript)
const element = React.createElement('h1', { className: 'title' }, 'Hello World');

The Rules of JSX

To write valid JSX, you must follow three strict rules:

1. Return a Single Root Element: You cannot return multiple sibling HTML tags. They must be wrapped in a single parent tag (like <div> or a React Fragment <></>). Fragments allow you to group elements without adding extra wrapper nodes to the DOM.
2. Close All Tags: Every tag must be explicitly closed, including self-closing elements (e.g., <img />, <input />, <br />).
3. Use camelCase Attributes: Because JSX compiles into JavaScript, attributes are mapped to JS properties. HTML attributes become camelCase (e.g., class becomes className, onclick becomes onClick, and for becomes htmlFor).

// Valid JSX using a Fragment, self-closing tag, and camelCase properties
function ProfileCard({ name, avatarUrl }) {
  return (
    <>
      <h2 className="profile-name">{name}</h2>
      <img src={avatarUrl} alt={name} className="avatar-img" />
      <hr />
    </>
  );
}

4. Components & Props

Components are the independent, reusable building blocks of a React user interface.

• Functional Components (Modern): Simple JavaScript functions that accept props and return JSX. They use Hooks to manage state and lifecycles.
• Class Components (Legacy): ES6 classes extending React.Component. They use this.state and lifecycle methods (like componentDidMount). They are considered legacy and should not be used in new code.

Props (Properties)

Props are read-only, immutable values passed from a parent component to a child component, behaving exactly like arguments passed to a function.

// Child Component: Receives props, destructures name and role
function UserCard({ name, role = 'Guest' }) {
  return (
    <div className="user-card">
      <h3>{name}</h3>
      <p>Role: {role}</p>
    </div>
  );
}

// Parent Component: Passes data down as attributes
function App() {
  return (
    <div className="app-container">
      <UserCard name="Alice" role="Admin" />
      <UserCard name="Bob" /> {/* role defaults to 'Guest' */}
    </div>
  );
}

The children Prop

Every component receives a special prop called children. It contains whatever content is nested between the opening and closing tags of the component.

// Layout Component
function Box({ children }) {
  return <div style={{ border: '2px solid black', padding: '10px' }}>{children}</div>;
}

// Usage
function App() {
  return (
    <Box>
      <h2>Inside the Box</h2>
      <p>This is rendered via props.children.</p>
    </Box>
  );
}

5. State Management (useState)

State represents a component's memory — data that changes over time in response to user input, network calls, or timers. When a component's state changes, React schedules a re-render of that component and its children.

useState Hook Syntax

import { useState } from 'react';

const [count, setCount] = useState(0); 
// [currentValue, setterFunction] = useState(initialValue)

State as a Snapshot

React state updates are not executed immediately; they are scheduled for the next render. Think of state like a snapshot of the UI at a specific point in time.

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // Output: 0! Not 1.
  };
}

Because count is a snapshot variable, its value remains 0 throughout the execution of handleClick. The updated value of 1 is only available during the next render cycle.

Functional Updates (Batching & Consecutive Updates)

React batches multiple state updates inside event handlers to prevent unnecessary re-renders. If you need to update a state variable multiple times in a row based on its previous value, pass an updater function to the setter:

const handleIncrement = () => {
  // Correct way to queue consecutive state changes
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
  // The count will increment by 3, not 1.
};

// WRONG: state.push(newItem);
// RIGHT:
setItems([...items, newItem]); // Array spreading
setProfile({ ...profile, name: 'Alice' }); // Object spreading

6. Component Lifecycle & Effects (useEffect)

The useEffect hook allows functional components to perform side effects (such as data fetching, manual DOM manipulation, setting up event listeners, or connecting to web sockets).

The Synchronization Mental Model

Do not think of useEffect in terms of class lifecycle hooks (componentDidMount, componentDidUpdate, componentWillUnmount). Instead, think of it as a way to synchronize your component with an external system based on state and props.

The Dependency Array

The behavior of useEffect is controlled by its second argument, the dependency array:

The Cleanup Function

If your effect sets up an ongoing task (like a timer, a document event listener, or a web socket connection), you must return a cleanup function from the effect. React will execute this cleanup function before the component unmounts or before the effect runs again.

import { useState, useEffect } from 'react';

function MouseTracker() {
  const [coords, setCoords] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (e) => {
      setCoords({ x: e.clientX, y: e.clientY });
    };

    // 1. Setup side-effect
    window.addEventListener('mousemove', handleMouseMove);

    // 2. Return cleanup function to prevent memory leaks
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []); // Runs once on mount, cleans up on unmount

  return <p>Mouse: {coords.x}, {coords.y}</p>;
}

7. Ref Management (useRef)

useRef is a hook that provides a way to persist mutable values across renders without triggering a new render when the value changes. It is also used to reference DOM nodes directly.

useRef returns a mutable object with a single property: .current.

import { useRef } from 'react';

const myRef = useRef(initialValue); // Returns { current: initialValue }

Common Use Cases

1. Accessing DOM Elements Directly (e.g., focusing an input):

import { useRef } from 'react';

function AutoFocusInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    // Accesses the real DOM node and calls focus()
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </>
  );
}

2. Storing Mutable Values without Re-rendering (e.g., tracking a timer ID):

import { useState, useRef } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const timerId = useRef(null); // Holds the interval ID

  const startTimer = () => {
    if (timerId.current !== null) return;
    timerId.current = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(timerId.current);
    timerId.current = null; // Does NOT trigger a re-render
  };
}

8. Performance Optimization Hooks

By default, when a parent component renders, all of its child components render recursively, regardless of whether their props changed. React offers optimization hooks to prevent unnecessary work.

React.memo

React.memo is a higher-order component that wraps a functional component. It performs a shallow comparison of the component's props and prevents a re-render if the props have not changed.

import React from 'react';

const ChildComponent = React.memo(({ name }) => {
  console.log('Child rendered!');
  return <p>{name}</p>;
});

useMemo

useMemo caches (memoizes) the result of an expensive calculation so that it doesn't have to be recalculated on every render unless its dependencies change.

import { useMemo } from 'react';

const expensiveResult = useMemo(() => {
  return runHeavyCalculation(data);
}, [data]); // Recalculates only when 'data' changes

useCallback

useCallback caches a function definition itself between renders.

When you pass a function to a memoized child component, the parent creates a new function instance on every render, which breaks the child's React.memo optimization. Wrapping the parent function in useCallback keeps the function reference identical.

import { useCallback } from 'react';

const handleAction = useCallback(() => {
  doSomething(id);
}, [id]); // Returns the same function reference unless 'id' changes

9. Advanced State & Context

As your application grows, passing props down through multiple layers of components (called Prop Drilling) becomes difficult to manage.

Context API (useContext)

Context allows you to share global data (like themes, user info, or languages) across the entire component tree without passing props manually at every level.

Prop Drilling: Parent -> Child -> SubChild -> Target (Props passed through all)
Context API:   Parent [Context Provider] -------------> Target [useContext]

Context API Example

import { createContext, useContext, useState } from 'react';

// 1. Create the Context
const ThemeContext = createContext(null);

// 2. Provider Component wrapping the tree
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('dark');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 3. Child Component consuming context directly
function ThemeButton() {
  const { theme, setTheme } = useContext(ThemeContext);
  
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Current Theme: {theme}
    </button>
  );
}

useReducer

For components with complex state logic (e.g., state with multiple sub-values or state transitions dependent on previous actions), useReducer is preferred over useState.

import { useReducer } from 'react';

// 1. Define reducer function containing state transition rules
function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: throw new Error();
  }
}

// 2. Usage inside component
function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

10. Lists & Keys

When rendering lists of components from an array, you must assign a unique key prop to each item.

const tasks = [
  { id: 't1', text: 'Learn React' },
  { id: 't2', text: 'Build a project' }
];

function TaskList() {
  return (
    <ul>
      {tasks.map(task => (
        // Key prop is required here
        <li key={task.id}>{task.text}</li>
      ))}
    </ul>
  );
}

Why are Keys important?

Keys act as identifiers for elements in a list. They help React identify which items have changed, been added, or been removed in the array. This allows React to move DOM nodes instead of destroying and re-creating them from scratch during reconciliation.

11. Forms: Controlled vs. Uncontrolled

Forms in React handle input elements in one of two ways:

1. Controlled Components: The input's current value is driven by React State. The state is the single source of truth for the input.
2. Uncontrolled Components: The input's value is handled by the browser DOM itself. React accesses the input's current value on-demand using a ref.

Controlled vs Uncontrolled Examples

// 1. Controlled Component (State-driven)
function ControlledForm() {
  const [name, setName] = useState('');

  return (
    <input 
      value={name} 
      onChange={(e) => setName(e.target.value)} 
    />
  );
}

// 2. Uncontrolled Component (DOM-driven)
import { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Submitted value: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} type="text" />
      <button type="submit">Submit</button>
    </form>
  );
}

12. Routing (React Router)

React Router is the standard library used to handle client-side routing in React SPAs, allowing navigation without page reloads.

Routing Configuration Example

import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

function UserProfile() {
  // Accessing route parameters (e.g., /user/42 -> userId = 42)
  const { userId } = useParams();
  return <h2>Profile of User: {userId}</h2>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/user/123">My Profile</Link>
      </nav>

      <Routes>
        <Route path="/" element={<h1>Home Page</h1>} />
        <Route path="/user/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

Lazy Loading Routes

To optimize initial page load times, you can split your Javascript bundle by lazy-loading route components using React.lazy and wrapping the routes in a <Suspense> boundary.

import React, { Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Lazy load the component
const HeavyDashboard = React.lazy(() => import('./HeavyDashboard'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading Page...</div>}>
        <Routes>
          <Route path="/dashboard" element={<HeavyDashboard />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

13. Rules of Hooks & Common Gotchas

Hooks are JavaScript functions, but they enforce two strict rules that must be followed for React to execute them correctly:

1. Only Call Hooks at the Top Level: Do not call hooks inside loops, conditional statements (if), or nested functions. Hooks must be called in the exact same order on every render.
2. Only Call Hooks from React Functions: Call hooks only from React functional components or custom hooks. Do not call them from plain JavaScript functions.

Common Gotchas to Avoid

useEffect(() => {
  setCount(count + 1); // Triggers re-render, running the effect again -> Infinite Loop!
}, [count]);