React (with Hooks, React 19 & Next.js basics)

React is a JavaScript library for building user interfaces from components, created at Facebook (Meta) by Jordan Walke and open-sourced in 2013. It is the most widely used frontend library.

Core ideas:

• Declarative UI — describe what the UI should look like for a given state; React updates the DOM.
• Components — functions returning JSX; compose them like building blocks.
• One-way data flow — data flows down via props; events flow up via callbacks.
• State + re-render — when state changes, React re-renders the component and reconciles the result against the previous render, updating only what changed in the DOM.
• Hooks (2019) — state and side effects in function components.
• "Learn once, write anywhere" — React DOM (web), React Native (mobile), React Server Components.

React is a library; for routing, data fetching, SSR and bundling you add tools or use a framework such as Next.js or React Router (framework mode, formerly Remix) — the React docs recommend starting new apps with a framework (or Vite for a pure client app). Create React App was deprecated in February 2025.

Ecosystem milestones: React Compiler 1.0 (Oct 2025 — automatic memoisation), React Native New Architecture default (0.76, 2024), React and React Native moved to the React Foundation under the Linux Foundation (announced Oct 2025). Next.js: 13 (App Router, 2022), 14, 15 (2024, React 19), 16 (2025, Turbopack default).

Component lifecycle (function components):

1. Mount — React calls the component function (render) → commits DOM → runs useLayoutEffect → browser paints → runs useEffect callbacks.
2. Update — triggered by a state change, new props from the parent re-rendering, or a context change → render again → React diffs the new element tree with the old one (reconciliation) → commits minimal DOM changes → runs effect cleanups for changed dependencies, then the new effects.
3. Unmount — effect cleanups run (unsubscribe, clear timers).

In development Strict Mode mounts components twice (mount → unmount → mount) to reveal missing cleanups.

Class component lifecycle (legacy): constructor → render → componentDidMount | updates: shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate | componentWillUnmount | errors: getDerivedStateFromError, componentDidCatch.

Render phases: render phase (pure — call components, compute the tree; can be paused/interrupted in concurrent mode) → commit phase (apply DOM mutations, run layout effects, then passive effects).