React
A library for building user interfaces out of components.
React is a JavaScript library (not a full framework) for building UIs from small, reusable components. It introduced the component + one-way data flow model that most modern frontend tools have since adopted in some form, and its ecosystem — routing, state management, data fetching, meta-frameworks like Next.js — is the largest of any frontend tool today, which is itself a major reason teams choose it.
When to use it
- You want the largest hiring pool and ecosystem of any frontend option
- You're building a complex, interactive UI where component composition pays off
- You plan to use (or might later need) a meta-framework like Next.js for SSR/SSG
- Your team already knows React and switching cost outweighs any other framework's benefits
Considerations
- React itself is unopinionated — routing, state management, and styling are all separate decisions you have to make
- JSX and the hooks model have a real learning curve if you're coming from template-based frameworks
- Being 'just a library' means more setup decisions upfront compared to a batteries-included framework
Key concepts
Components
UI is broken into small, composable functions that return markup (JSX) based on props and state.
State & props
State is data a component owns and can change; props are data passed down from a parent. Data flows one way: down.
Hooks
Functions like useState and useEffect let function components manage state and side effects without classes.
Virtual DOM
React diffs an in-memory representation of the UI against the real DOM and applies only the minimal changes needed.
Getting started
npm create vite@latest my-app -- --template react-tsScaffold a new React + TypeScript app with Vite (the common modern starting point outside a meta-framework).
npm install && npm run devInstall dependencies and start the dev server.
Common mistakes
- Storing derived data in state instead of computing it during render — causes bugs when the copy and the source get out of sync. If a value can be calculated from existing state or props, compute it directly rather than duplicating it.
- Missing or incorrect dependency arrays in useEffect — either an effect that reruns too often, or one that captures a stale value from an earlier render.
- Mutating state directly instead of using the setter (e.g. array.push() into state) — React can't detect a plain mutation, so the component won't re-render.
Ecosystem
Related guides
Related tools
This guide states trade-offs, not a single "best" answer — the right choice depends on your team, constraints, and existing stack.