What Is React & Why Use It
React is a JavaScript library for building user interfaces — not a framework, and not a full application solution. This distinction matters. A framework like Angular ships with routing, HTTP clients, dependency injection, forms, and testing utilities all in one opinionated package. React ships with exactly one thing: a way to declare, compose, and update UI components.
Everything else — routing, data fetching, state management, testing — you assemble yourself from the ecosystem. This gives you enormous flexibility. It also means you make more architectural decisions. For most teams, that tradeoff is worth it.
The Problem React Solves
To understand React's value, look at what UI code looks like without it. Suppose you have a counter that displays a number and two buttons:
<!-- Vanilla JS approach -->
<div>
<button id="dec">-</button>
<span id="count">0</span>
<button id="inc">+</button>
</div>
<script>
let count = 0
const countEl = document.getElementById('count')
document.getElementById('inc').addEventListener('click', () => {
count++
countEl.textContent = count // manually sync DOM to state
})
document.getElementById('dec').addEventListener('click', () => {
count--
countEl.textContent = count // manually sync DOM to state
})
</script>This works fine for a trivial counter. But notice the pattern: you must manually keep the DOM in sync with your JavaScript state by calling countEl.textContent = count every time the state changes. In a real application, you might have dozens of pieces of state, each affecting multiple DOM nodes. Tracking all these updates by hand becomes error-prone and hard to maintain.
Here is the same counter in React:
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<button onClick={() => setCount(count - 1)}>-</button>
<span>{count}</span>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
)
}You declare what the UI looks like given the current count value. When setCount is called, React re-evaluates the component and updates only the DOM nodes that changed. You never touch the DOM directly.
The Virtual DOM
React maintains a Virtual DOM — a lightweight JavaScript object tree that mirrors the real browser DOM. When your component's state or props change, React:
Creates a new Virtual DOM tree representing the updated UI
Diffs the new tree against the previous one (reconciliation)
Calculates the minimum set of real DOM operations needed
Applies only those changes to the browser DOM in a single batch
Direct DOM manipulation is expensive because browsers must recalculate layout, reflow elements, and repaint the screen for every change. Batching many small changes into a single real DOM update is significantly faster — and that is exactly what the Virtual DOM enables.
Reconciliation: How the Diff Works
React's reconciliation algorithm makes two key assumptions to achieve O(n) tree diffing (rather than the O(n³) general case):
Different element types produce different trees. If a
<div>becomes a<section>, React tears down the whole subtree and builds a fresh one. It does not try to reuse children.The
keyprop allows stable identity across renders. When rendering lists, React useskeyto match elements between renders. Without keys, React must guess, which causes subtle bugs when list order changes.
One-Way Data Flow
React enforces unidirectional data flow: data flows down from parent to child components through props, and events flow back up through callback functions. This is the opposite of two-way data binding (as seen in older Angular or Vue without explicit control).
// Data flows DOWN through props
function Parent() {
const [name, setName] = useState('Alice')
return (
// name prop flows down to Child
// onChangeName callback flows down to Child
<Child name={name} onChangeName={setName} />
)
}
function Child({ name, onChangeName }) {
return (
<div>
<p>Hello, {name}</p>
{/* event flows UP via the callback */}
<button onClick={() => onChangeName('Bob')}>
Change to Bob
</button>
</div>
)
}One-way data flow makes application state predictable and easy to debug. When something goes wrong, you trace the flow upward to find the source of truth. There is always exactly one owner of each piece of state.
Concrete Reasons to Use React
Reusability — build a
<Button>component once with your exact styles and behavior, then use it across the entire app. Changes to that component propagate everywhere automatically.Massive ecosystem — libraries for virtually every use case: React Router, TanStack Query, React Hook Form, Radix UI, Framer Motion, and thousands more.
Thriving community — the largest frontend community on the internet. Answers to almost any React question already exist on Stack Overflow, GitHub, or countless blog posts.
Job market — React is the most-requested frontend skill in job postings globally. Knowing React deeply opens doors at startups and large enterprises alike.
React Native — share business logic, hooks, and component patterns between a web app and native iOS/Android apps.
Meta's investment — React is used at Facebook's scale (billions of users, millions of components). It gets real production testing that few open-source projects match.
Incremental adoption — you can add React to a single widget on an existing page. You do not have to rewrite your entire site.
Quick Start with Vite
The fastest way to start a new React project is with Vite, a modern build tool with instant hot module replacement:
npm create vite@latest my-app -- --template react cd my-app npm install npm run dev
Your app will be live at http://localhost:5173. Edit src/App.jsx and the browser updates instantly without a full reload.
For TypeScript (strongly recommended for new projects):
npm create vite@latest my-app -- --template react-ts cd my-app npm install npm run dev
When NOT to Use React
React is not the right tool for every situation:
Simple static sites — a marketing page with no interactivity does not need React. Plain HTML/CSS is faster to build and has better initial performance.
Performance-critical animations — for games or highly complex canvas work, direct DOM/Canvas manipulation is faster than going through React's rendering cycle.
Tiny projects — adding a build pipeline, npm, and a bundler for a 50-line script is overkill. Vanilla JavaScript is fine.