Manipulating the document by hand holds up while the screen stays simple. Past a few dozen elements that depend on one another, nobody can say which piece of code changed which box.
React turns the problem around: instead of describing the changes to apply, you describe what the screen should show.
Definition
React is a JavaScript library for building interfaces out of components. A component is a function that receives properties and returns a description of the display. React compares that description with the previous one and applies only the difference to the document.
import { useState } from "react";
function Counter({ start = 0 }) {
const [value, setValue] = useState(start);
return (
<button onClick={() => setValue(value + 1)}>
Clicked {value} times
</button>
);
}Nothing in this code reaches for the button to change its text. The component is simply called again after every state change, and React takes care of bringing the screen in line with what it returned.
State, and the rule that governs it
An ordinary variable changes without anyone knowing. A state value goes through its setter function, which triggers a fresh render. The rule that follows is Immutability: the old value is not modified, a new one is supplied.
const [cart, setCart] = useState([]);
// no: the reference does not change, nothing re-renders
cart.push(item);
// yes: a new array, therefore a new render
setCart([...cart, item]);The Spread (...) is what copies the old content into a fresh array. It is the single most frequent gesture in React code, and the number one source of mistakes in the first few weeks.
The everyday hooks
| Hook | What it provides |
|---|---|
| useState | A value that triggers a render when it changes |
| useEffect | An Side effect after render, often a network call |
| useMemo | An expensive calculation kept between two renders |
| useRef | A value that survives renders without causing one |
| useContext | Shared data without passing it down step by step |
Hooks are called only at the top level of a component, never inside an if or a nested function. React identifies them by call order, which therefore has to stay the same on every render.
Frequently asked questions
Is React a framework?
No, and the distinction has practical consequences. React handles display and nothing else: no routing, no network layer, no imposed project structure. Those pieces come from separately chosen libraries, or from a framework such as Next.js that assembles them in advance.
Why does every list item need a key?
Because React needs to recognize an element from one render to the next, to know whether it moved, appeared or was removed. A stable key drawn from an identifier gives it that information. A positional index works while the list stays put, and produces visual bugs as soon as sorting or deletion enters the picture.
Is solid JavaScript required before starting?
A good share of the difficulties blamed on React are in fact JavaScript gaps: Destructuring, Array.map(), Arrow function, Spread (...). Those four show up in every single component. That is why our React course lays them down properly before the first component.