Full-Stack on David Lang

Context Window Strategies: Making the Most of Long-Context LLMs

Fri, 10 Apr 2026 00:00:00 +0000

Million-token context windows tempt teams to dump entire repos into prompts. That is expensive, slow, and often less accurate than targeted retrieval.

When Full Context Helps

Single-file refactors, analyzing one large document, comparing a few long contracts.

When Retrieval Wins

Whole codebases, ticket backlogs, and wiki sites-embed, filter, rerank, then pass top-k chunks.

Compression Techniques

Summarize conversation history. Use hierarchical memory (session summary + recent turns). Strip comments and generated noise from code context.

Building Reliable AI Agents: Lessons from Production

Sat, 28 Feb 2026 00:00:00 +0000

Production agents fail in boring ways: timeouts, tool errors, runaway loops, and silent wrong answers. Reliability engineering applies to agents too.

Hardening Checklist

Max steps and token budgets per session
Idempotent tools with clear error messages
Checkpoint state for long workflows
Circuit breakers when external APIs fail
Structured logging of every tool call

Graceful Degradation

When the agent fails, fall back to search-only RAG or human handoff-never an empty error.

The State of AI Coding Assistants in 2026

Thu, 15 Jan 2026 00:00:00 +0000

By 2026, AI coding assistants are standard in professional workflows-not experiments. The landscape consolidated around a few patterns: inline completion, IDE agents, and terminal agents.

Market Snapshot

Cursor leads among developers who want an AI-native editor with codebase-wide context. GitHub Copilot remains the enterprise default tied to GitHub and Microsoft ecosystems. Claude Code and similar terminal agents dominate backend and automation workflows. Windsurf, Cody, and others compete on price and niche features.

From RAG to Agentic AI: What's Next for LLM-Powered Apps

Mon, 01 Dec 2025 00:00:00 +0000

The industry moved from chatbots → RAG → agents. Understanding the progression helps you invest in the right layer for your product maturity.

RAG Era

Ground models in private data. Mature patterns: chunking, hybrid search, citations. Still the right default for Q&A and search.

Agent Era

Models call tools, plan multi-step workflows, and maintain state. Higher capability, higher risk.

What’s Next

Evals-as-code in every pipeline
Smaller specialist models routed by orchestrators
On-device for privacy-sensitive steps
Human-agent collaboration UIs, not just chat

Migration Path

Master RAG and evals first. Add one well-scoped agent tool. Measure task completion before expanding autonomy.

AI-First Development: Rethinking Your Engineering Workflow

Tue, 22 Jul 2025 00:00:00 +0000

AI-first development means designing processes assuming LLMs and agents participate in design, implementation, and review-not bolting a chatbot onto waterfall.

Shifts in Practice

Specs - Write acceptance criteria LLMs can verify (tests, schemas).

Architecture - Smaller modules with clear boundaries agents can reason about.

Reviews - AI first pass, human mandatory for security and product judgment.

Documentation - Keep AGENTS.md or rules files current so tools understand conventions.

Team Rituals

Start stories with a prompt draft. Pair with AI for spikes; human pair for production-critical paths. Track AI-assisted PR defect rates.

MCP (Model Context Protocol): The Future of AI Tool Integration

Tue, 08 Apr 2025 00:00:00 +0000

Model Context Protocol (MCP) standardizes how AI applications connect to data sources and tools-filesystems, databases, APIs, and IDEs speak a common protocol.

Why MCP Matters

Before MCP, every agent framework invented its own plugin format. MCP provides discoverable tools and resources with typed schemas-like LSP for AI tools.

Architecture

Host - Cursor, Claude Desktop, custom agent
MCP Server - Exposes tools (query_db, read_file) and resources
Transport - stdio or SSE

Developers implement servers once; any MCP-compatible host can use them.

Improving LLM Accuracy: Techniques Beyond Prompt Engineering

Tue, 25 Mar 2025 00:00:00 +0000

When prompts plateau, these engineering levers move accuracy more than another adjective in the system message.

Better Retrieval

Hybrid search (BM25 + vectors), rerankers (Cohere, cross-encoders), and metadata filters reduce wrong context reaching the model.

Structured Outputs

Force JSON with schemas (Zod, Pydantic, OpenAI structured outputs). Parse failures trigger retry with repair prompts.

Model Routing

Small models classify intent; large models answer hard questions. Cuts cost and reduces overconfident rambling on simple queries.

How to Validate and Measure LLM Accuracy in Production

Tue, 18 Feb 2025 00:00:00 +0000

Shipping an LLM feature without measurement is shipping a bug generator. Production validation combines automated metrics, human review, and business KPIs.

Levels of Evaluation

Unit-level - Schema validation, regex checks, refusal detection
Golden set - Curated Q&A pairs scored automatically
Online - User thumbs, task completion, support escalations
Human - Expert rubrics on sampled traffic

Metrics That Matter

Faithfulness - Answer grounded in retrieved context (RAG)
Relevance - Addresses the user question
Toxicity / PII - Safety filters
Latency and cost - p95 tokens and dollars per session

Implementation Sketch

def validate_response(answer: str, context: str) -> dict:
    return {
        "has_citation": "[source:" in answer,
        "length_ok": 50 < len(answer) < 4000,
        "grounded": entailment_score(context, answer) > 0.7,
    }

Log scores to your observability stack (Datadog, LangSmith, Phoenix).

Multi-Modal AI: Working with Images and Text

Tue, 05 Nov 2024 00:00:00 +0000

Multi-modal models accept images and text in one request-enabling document OCR, UI screenshot analysis, and visual Q&A.

Vision API Example

const response = await openai.chat.completions.create({
  model: 'gpt-4o',
  messages: [
    {
      role: 'user',
      content: [
        { type: 'text', text: 'What error is shown in this screenshot?' },
        { type: 'image_url', image_url: { url: imageDataUrl } },
      ],
    },
  ],
});

Use Cases

Receipt parsing, diagram explanation, accessibility alt-text generation, and visual regression triage.

AI-Powered Code Review: Integrating LLMs into Dev Workflows

Sun, 22 Sep 2024 00:00:00 +0000

LLMs can summarize diffs, flag security smells, and suggest tests-but they should augment human review, not replace it.

CI Integration

Post PR diffs to an LLM with a structured prompt. Output JSON findings consumed by GitHub Actions or GitLab CI. Fail builds only on high-severity, high-confidence issues to reduce noise.

Prompt Design for Reviews

Include: changed files, diff hunks, coding standards doc, and explicit instruction to cite line numbers and avoid nits.

Building AI Agents with LangChain and OpenAI

Sun, 28 Jul 2024 00:00:00 +0000

AI agents loop: observe, plan, act with tools, observe again. They handle multi-step tasks like research, booking, or code changes.

Tool Definition

from langchain.tools import tool

@tool
def search_docs(query: str) -> str:
    '''Search internal documentation.'''
    return vector_store.similarity_search(query, k=5)

Bind tools to the model; the model returns tool calls you execute and feed back as observations.

Control and Safety

Set max iterations. Require human approval for destructive tools. Log every step for audit.

Conclusion

Agents are powerful and unpredictable. Start with a fixed workflow (chain); graduate to agents when the task path genuinely varies per request.

Next.js App Router: Complete Migration Guide

Mon, 10 Jun 2024 00:00:00 +0000

Migrating from Pages Router to App Router unlocks RSC, layouts, and improved data fetching-but requires deliberate planning.

Folder Structure

app/
  layout.tsx      # Root layout
  page.tsx        # /
  blog/
    [slug]/
      page.tsx    # /blog/:slug
  api/
    hello/
      route.ts    # Route Handlers

Data Fetching

Replace getServerSideProps with async Server Components. Replace getStaticProps with fetch and revalidate options. Client data still uses SWR or React Query in Client Components.

Vector Databases: Pinecone, Weaviate, and Chroma Compared

Mon, 22 Apr 2024 00:00:00 +0000

Vector databases store embeddings and perform similarity search-the retrieval layer in RAG and recommendation systems.

Comparison

	Pinecone	Weaviate	Chroma
Hosting	Managed cloud	Self-host or cloud	Embedded / local
Best for	Production scale	Hybrid search + GraphQL	Prototyping
Ops burden	Low	Medium	Low

pgvector Alternative

PostgreSQL with pgvector keeps vectors beside relational data-excellent when you already run Postgres and need ACID transactions.

Selection Criteria

Consider QPS, filtering (metadata predicates), hybrid keyword + vector search, cost, and data residency. Prototype on Chroma or pgvector; migrate to Pinecone or Weaviate at scale.

Streaming AI Responses with OpenAI API in Next.js

Sat, 30 Mar 2024 00:00:00 +0000

Streaming improves chat UX by showing tokens as they are generated. Next.js Route Handlers make it straightforward to proxy streams securely.

Route Handler

// app/api/chat/route.ts
import OpenAI from 'openai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const openai = new OpenAI();

  const stream = await openai.chat.completions.create({
    model: 'gpt-4',
    messages,
    stream: true,
  });

  const encoder = new TextEncoder();
  const readable = new ReadableStream({
    async start(controller) {
      for await (const chunk of stream) {
        const text = chunk.choices[0]?.delta?.content || '';
        if (text) controller.enqueue(encoder.encode(text));
      }
      controller.close();
    },
  });

  return new Response(readable, {
    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
  });
}

Client Consumption

Use fetch with a reader loop or libraries like Vercel AI SDK’s useChat for React state management.

Building RAG Systems: Retrieval-Augmented Generation Explained

Thu, 18 Jan 2024 00:00:00 +0000

RAG grounds LLM responses in your private data by retrieving relevant documents before generation. It reduces hallucinations and keeps answers current without retraining models.

Pipeline Overview

Ingest - Load PDFs, wikis, tickets into chunks (500–1000 tokens).
Embed - Convert chunks to vectors with an embedding model.
Store - Save vectors in Pinecone, pgvector, or Chroma.
Retrieve - On query, embed the question and find top-k similar chunks.
Generate - Pass chunks as context to the LLM.

context = "

".join(retrieved_chunks)
prompt = f"Use only this context:
{context}

Question: {user_query}"

Chunking Strategy

Overlap chunks by 10–20% to avoid cutting sentences. Metadata (source, page) helps citations and debugging.

Prompt Engineering Fundamentals for Developers

Sat, 14 Oct 2023 00:00:00 +0000

Prompt engineering is the practice of designing inputs so LLMs produce reliable, useful outputs. Developers who treat prompts as code ship better AI features.

Structure Your Prompts

Use clear sections: role, context, task, format, and constraints.

You are a code reviewer for a TypeScript React codebase.
Context: PR diff below.
Task: List bugs, security issues, and style problems.
Format: JSON array of { severity, file, message }.
Constraints: Max 10 items. No speculation beyond the diff.

Few-Shot Examples

Include 2–3 input/output pairs for classification or extraction tasks. Examples beat lengthy instructions for format adherence.

React Server Components: The Future of Data Fetching

Sun, 20 Aug 2023 00:00:00 +0000

React Server Components (RSC) run on the server only-they never ship component logic to the client. That enables direct database access and smaller JavaScript bundles.

Server vs Client Components

// app/page.js - Server Component (default in App Router)
async function ProductList() {
  const products = await db.products.findMany();
  return (
    <ul>
      {products.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Add 'use client' only when you need hooks, event handlers, or browser APIs.

Getting Started with the OpenAI API in Node.js

Thu, 12 Jan 2023 00:00:00 +0000

The OpenAI API brought large language models to application developers through a simple HTTP interface. Node.js remains a natural fit for BFF layers that call LLMs.

Installation and First Request

npm install openai

import OpenAI from 'openai';

const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

const completion = await client.chat.completions.create({
  model: 'gpt-4',
  messages: [
    { role: 'system', content: 'You are a helpful coding assistant.' },
    { role: 'user', content: 'Explain async/await in JavaScript.' },
  ],
});

console.log(completion.choices[0].message.content);

Production Considerations

Never expose API keys in frontend bundles. Proxy requests through your backend. Set max_tokens, timeouts, and retry policies. Log token usage for cost control.

Serverless Architecture with AWS Lambda

Tue, 03 May 2022 00:00:00 +0000

Serverless lets you run code without provisioning servers. AWS Lambda executes functions in response to HTTP, queue, or schedule events-you pay per invocation.

Handler Example

exports.handler = async (event) => {
  const body = JSON.parse(event.body || '{}');
  const result = await processOrder(body);
  return {
    statusCode: 200,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(result),
  };
};

Architecture Patterns

API Gateway + Lambda for REST endpoints. S3 triggers for image processing. EventBridge for scheduled jobs. Keep functions small and cold-start aware-choose appropriate memory and runtime (Node 20).

React 18: Concurrent Features and the New Root API

Sat, 15 Jan 2022 00:00:00 +0000

React 18 introduced concurrent rendering, automatic batching, and a new root API. These changes improve perceived performance without rewriting your entire app.

createRoot

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

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

The legacy ReactDOM.render is deprecated. createRoot enables concurrent features.

Suspense and Transitions

useTransition marks updates as non-urgent-keeping the UI responsive during heavy re-renders:

const [isPending, startTransition] = useTransition();

function handleTab(tab) {
  startTransition(() => setActiveTab(tab));
}

Strict Mode Changes

Strict Mode double-invokes effects in development to surface side-effect bugs. Audit useEffect cleanup functions before upgrading.

Prisma ORM: Modern Database Access in Node.js

Tue, 07 Dec 2021 00:00:00 +0000

Prisma provides type-safe database access, migrations, and a visual data browser-popular in TypeScript full stack projects.

Schema Definition

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  posts     Post[]
  createdAt DateTime @default(now())
}

model Post {
  id       String @id @default(cuid())
  title    String
  author   User   @relation(fields: [authorId], references: [id])
  authorId String
}

Queries

const users = await prisma.user.findMany({
  include: { posts: true },
  where: { email: { contains: '@company.com' } },
});

Migrations

npx prisma migrate dev applies schema changes in development. Use prisma generate after schema edits to refresh the client.

MongoDB Best Practices: Schema Design and Indexing

Mon, 25 Oct 2021 00:00:00 +0000

MongoDB’s flexible documents are powerful-but schema design still matters for performance and maintainability.

Embedding vs Referencing

Embed when data is read together and has a one-to-few relationship (user preferences inside a user doc). Reference when data grows unbounded or is shared (comments on posts).

Indexing

db.orders.createIndex({ customerId: 1, createdAt: -1 });

Compound indexes support queries that filter and sort on the same fields. Use .explain() to verify index usage.

Validation and Migrations

Use JSON Schema validation at the collection level. Version documents with a schemaVersion field for gradual migrations.

AWS for Full Stack Developers: Core Services

Fri, 10 Sep 2021 00:00:00 +0000

Amazon Web Services powers a large share of production full stack apps. Knowing a focused subset of services beats memorizing the entire catalog.

Essential Services

Service	Use case
EC2 / ECS / Lambda	Compute
S3	Static assets, uploads
RDS / DynamoDB	Databases
CloudFront	CDN
IAM	Permissions
Route 53	DNS

A Typical Architecture

React on S3 + CloudFront, API on ECS Fargate or Lambda behind API Gateway, PostgreSQL on RDS, secrets in Secrets Manager, logs in CloudWatch.

Advanced TypeScript: Generics and Utility Types

Sat, 28 Aug 2021 00:00:00 +0000

Generics make functions and types reusable without sacrificing type safety. Utility types transform existing types-essential for API layers and form handling.

Generic Functions

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

const n = first([1, 2, 3]);      // number | undefined
const s = first(['a', 'b']);     // string | undefined

Constrained Generics

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

Utility Types

Partial<T> - all properties optional
Pick<T, K> - subset of keys
Omit<T, K> - exclude keys
Record<K, V> - keyed object type

type UpdateUserDto = Partial<Pick<User, 'name' | 'email'>>;

Conclusion

Master generics and utilities before reaching for complex conditional types. They keep DTOs, reducers, and hook return types DRY and accurate.

Testing React Components with Jest and RTL

Thu, 15 Jul 2021 00:00:00 +0000

React Testing Library (RTL) encourages tests that resemble how users interact with your UI-queries by role, label, and text instead of implementation details.

A Simple Component Test

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments count on click', () => {
  render(<Counter />);
  fireEvent.click(screen.getByRole('button', { name: /increment/i }));
  expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
});

What to Test

Focus on user-visible behavior: forms submit, errors display, loading states appear. Mock network with MSW (Mock Service Worker) instead of mocking fetch in every test.

WebSockets with Node.js: Real-Time Applications

Wed, 30 Jun 2021 00:00:00 +0000

WebSockets provide full-duplex communication over a single TCP connection-ideal for chat, live dashboards, and collaborative editing.

Socket.io Setup

const { Server } = require('socket.io');
const io = new Server(httpServer, { cors: { origin: process.env.CLIENT_URL } });

io.on('connection', (socket) => {
  socket.on('join-room', (roomId) => socket.join(roomId));

  socket.on('message', (payload) => {
    io.to(payload.roomId).emit('message', payload);
  });
});

Scaling Considerations

Use Redis adapter for Socket.io when running multiple server instances. Sticky sessions or shared pub/sub keep room state consistent.

Building Microservices with Node.js

Sat, 22 May 2021 00:00:00 +0000

Microservices split a system into independently deployable services. Node.js is a common choice for I/O-bound services, BFF layers, and event-driven workers.

Service Boundaries

Split by business capability-not by technical layer. A orders service owns order data; a notifications service sends email. Communicate via REST, gRPC, or message queues (RabbitMQ, Kafka).

Resilience Patterns

Implement timeouts, retries with exponential backoff, and circuit breakers. Use correlation IDs across services for distributed tracing (OpenTelemetry).

Kubernetes Fundamentals for Developers

Sun, 18 Apr 2021 00:00:00 +0000

Kubernetes orchestrates containers at scale. Full stack developers do not need to be cluster admins, but understanding Pods, Deployments, and Services helps you debug production issues.

Core Objects

Pod: One or more containers that share networking and storage.
Deployment: Declarative updates for Pods (replicas, rolling updates).
Service: Stable network endpoint to reach Pods (ClusterIP, LoadBalancer).

A Minimal Deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: api
spec:
  replicas: 3
  selector:
    matchLabels:
      app: api
  template:
    metadata:
      labels:
        app: api
    spec:
      containers:
        - name: api
          image: myregistry/api:1.2.0
          ports:
            - containerPort: 3000

Local Development

Use minikube or kind to run clusters locally. Skaffold and Tilt sync code into running Pods for faster iteration.

Next.js: The Ultimate Guide to Server-Side Rendering

Wed, 20 Jan 2021 00:00:00 +0000

Next.js extends React with file-based routing, SSR, SSG, and API routes. Understanding when each rendering mode applies is essential for performance and SEO.

Rendering Modes

Static Generation (SSG) pre-renders at build time-ideal for marketing pages and blogs. Server-Side Rendering (SSR) renders on each request-best for personalized or frequently changing data. Client-Side Rendering (CSR) hydrates in the browser for highly interactive dashboards.

getServerSideProps Example

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  return { props: { post } };
}

App Router (Preview)

Next.js 13+ introduces the App Router with React Server Components. Pages Router patterns remain widely used-know both as you maintain legacy and greenfield apps.

Setting Up CI/CD Pipelines with GitHub Actions

Mon, 19 Oct 2020 00:00:00 +0000

GitHub Actions integrates CI/CD directly into your repository. For full stack teams, automating test, build, and deploy on every pull request catches regressions early.

A Basic Node.js Workflow

name: CI
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test
      - run: npm run build

Deploying to Production

Add a deploy job that runs only on main after tests pass. Use environment secrets for API keys. Deploy to Vercel, AWS, or Docker registries with official actions.

PostgreSQL vs MySQL: Choosing the Right Database

Mon, 10 Aug 2020 00:00:00 +0000

Relational databases remain the backbone of most full stack applications. PostgreSQL and MySQL are the two most common choices-each excels in different scenarios.

PostgreSQL Strengths

PostgreSQL offers advanced types (JSONB, arrays), full-text search, robust concurrency (MVCC), and extensions like PostGIS. It is the default choice for complex queries, analytics-heavy apps, and strict data integrity.

MySQL Strengths

MySQL (and MariaDB) are widely hosted, familiar to many teams, and perform well for read-heavy web workloads. Managed offerings are plentiful and often slightly cheaper at small scale.

Introduction to GraphQL: Why It Matters

Sat, 25 Jul 2020 00:00:00 +0000

GraphQL is a query language for APIs that lets clients request exactly the fields they need. Unlike REST, you avoid over-fetching and under-fetching by design.

Schema-First Design

type Query {
  user(id: ID!): User
  posts(limit: Int = 10): [Post!]!
}

type User {
  id: ID!
  name: String!
  posts: [Post!]!
}

Clients send queries that mirror the shape of the response:

query {
  user(id: "1") {
    name
    posts(limit: 5) { title createdAt }
  }
}

Server Implementation

Apollo Server and GraphQL Yoga are popular in Node.js. Resolvers map fields to databases or microservices. Use DataLoader to batch N+1 queries.

Docker for Developers: Containerizing Your Node.js App

Sat, 30 May 2020 00:00:00 +0000

Docker packages your application and its dependencies into a portable image. For Node.js APIs and React frontends, containers ensure dev, CI, and production environments behave the same way.

A Production-Ready Dockerfile

Multi-stage builds keep images small:

FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine
WORKDIR /app
COPY --from=build /app/dist ./dist
COPY --from=build /app/node_modules ./node_modules
ENV NODE_ENV=production
EXPOSE 3000
CMD ["node", "dist/server.js"]

docker-compose for Local Dev

Pair your API with PostgreSQL or Redis:

TypeScript for JavaScript Developers: Getting Started

Sat, 18 Apr 2020 00:00:00 +0000

TypeScript adds static types to JavaScript, catching bugs at compile time and improving editor autocomplete. For full stack developers moving between frontend and backend, it is one of the highest-leverage skills to adopt.

Installing and Configuring

npm install -D typescript @types/node
npx tsc --init

A sensible tsconfig.json for Node or React projects enables strict, esModuleInterop, and skipLibCheck.

Core Concepts

Interfaces describe object shapes. Generics make reusable components type-safe. Union types (string | number) model values that can be one of several types.

Building REST APIs with Node.js and Express

Sun, 22 Mar 2020 00:00:00 +0000

Express remains the most popular framework for building REST APIs in Node.js. It is minimal, unopinionated, and pairs well with middleware for auth, validation, and logging.

Project Setup

Initialize a project and install Express:

npm init -y
npm install express

Create a basic server with JSON body parsing:

const express = require('express');
const app = express();
app.use(express.json());

const items = [];

app.get('/api/items', (req, res) => res.json(items));

app.post('/api/items', (req, res) => {
  const item = { id: Date.now(), ...req.body };
  items.push(item);
  res.status(201).json(item);
});

app.listen(3000, () => console.log('API running on :3000'));

Structure for Production

Organize routes by resource (/users, /orders), use a router per domain, and separate controllers from route definitions. Add helmet for security headers, cors for cross-origin access, and a centralized error handler that returns consistent JSON error shapes.

Getting Started with React Hooks: A Complete Guide

Sat, 15 Feb 2020 00:00:00 +0000

React Hooks arrived in React 16.8 and changed how we write components. Instead of class components for state and lifecycle logic, you can use functions with useState, useEffect, and more.

Why Hooks Matter

Hooks let you reuse stateful logic without higher-order components or render props. They keep related logic together-fetching data, subscribing to events, and updating the DOM live in one place instead of spread across lifecycle methods.

useState and useEffect

useState declares local state in a function component. useEffect runs side effects after render-API calls, subscriptions, or DOM updates.