React

Modern Component Architecture

React builds user interfaces from isolated, composable components. Modern React uses functional components with Hooks and Server Components.

Modern Mounting: createRoot()

In React 18+, ReactDOM.render() was deprecated and removed in favor of Concurrent Root:

import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Key Hooks in Modern React

Hook	Primary Use Case
useState(init)	Manage local interactive component state. Triggers re-render on change.
useReducer(reducer, init)	State management for complex transitions or state logic.
useEffect(fn, deps)	Synchronize with external systems (DOM, timers, network subscriptions).
useRef(init)	Mutable reference container that persists across renders without triggering a re-render.
useMemo(fn, deps)	Cache calculated values between renders.
useCallback(fn, deps)	Cache function definitions between renders.
useContext(Context)	Read and subscribe to context values from ancestors.

React 19 New Hooks & Enhancements

• use(Promise | Context): Read the value of a resource like a Promise or Context conditionally inside render or loops (unlike standard Hooks).
• useActionState: Manages pending states and return values for async form actions.
• useOptimistic: Instantly shows optimistic UI updates before an async mutation finishes on the server.
• ref as a standard prop: React 19 allows passing ref directly as a component prop without wrapping functions in forwardRef().
• Document Metadata: React 19 natively hoists <title>, <meta>, and <link> elements placed within components to <head> automatically.

useState vs useRef

Feature	useState	useRef
Re-render trigger	Yes (triggers reconciliation)	No (does not trigger re-render)
Read/Write timing	State update is scheduled asynchronously	Mutable .current updates synchronously
Primary usage	Data directly driving JSX display	DOM node references, timers, previous values

Suspense & Concurrent Features

Suspense lets components wait for code, data, or media to load before rendering, displaying a fallback UI in the interim:

import { Suspense } from 'react';

<Suspense fallback={<LoadingSpinner />}>
  <UserProfile userId={id} />
</Suspense>

State Management in Modern React

• Local / Sibling state: Built-in useState, useReducer, or lifting state to common ancestor.
• Global application state: React Context API for low-frequency global settings (e.g., theme, authentication).
• Server Cache / Remote Data: TanStack Query (React Query) or SWR for client-side data fetching, caching, deduplication, and refetching.
• Global stores: Zustand or Redux Toolkit for complex, high-frequency client state.

Routing (React Router v6+)

Modern React Router v6/v7 utilizes object-based routing and hooks:

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

function UserProfile() {
  const { id } = useParams();
  const navigate = useNavigate();

  return (
    <div>
      <h2>User ID: {id}</h2>
      <button onClick={() => navigate('/dashboard')}>Back</button>
    </div>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}