React
A JavaScript library for building user interfaces using components. The most popular frontend framework. React uses a virtual DOM for efficient updates, JSX for writing HTML in JS, and hooks for state and effects. Made by Meta (Facebook). Powers Next.js, Remix, and many apps.
- Interactive web apps.
- Component-driven UIs.
- Full-stack apps with Next.js.
- Static content sites (use Astro/HTML).
- Apps needing zero JS (SSR-only frameworks).
Definition
React is a declarative, component-based UI library. Components are functions that return JSX (HTML-like syntax in JS). State (useState) and effects (useEffect) are hooks. The virtual DOM diffs changes and updates the real DOM efficiently. Unidirectional data flow.
Why it exists
To make building complex, interactive UIs manageable by composing reusable components with predictable state, replacing jQuery spaghetti and manual DOM manipulation.
How it works
Components are functions returning JSX. State hooks trigger re-renders when changed. React diffs the virtual DOM and applies minimal real DOM updates. Props pass data down; callbacks pass events up. useEffect handles side effects (fetching, subscriptions).
Scaling limits
Bundle size (mitigated by code splitting). Re-render performance in huge component trees (memoization helps). Learning curve for hooks and state management. SEO needs SSR (Next.js).
Cost shape
Free and open source.
Alternatives
- Vue — Simpler, gentler learning curve, smaller ecosystem.
- Svelte — Compiles away the framework, smaller bundle, smaller ecosystem.
Failure modes
- Excessive re-renders.
- useEffect dependency bugs.
- Prop drilling.
- State management complexity.