## glossary
What is React?
React is a JavaScript library created by Facebook in 2013 for building user interfaces. Its central idea is describing the interface as a function of state: you declare what the screen should look like for each situation, and React takes care of updating the DOM when the data changes.
This replaces the imperative model, where the developer manipulated each element by hand. The difference shows up quickly: with ten interdependent elements, managing the updates manually becomes a constant source of bugs.
Components, props and state
A component is a function that receives data and returns what should appear on screen. Data coming from outside is props (immutable, parent to child); data the component controls internally is state.
function Contador({ titulo, passo = 1 }) { // props
const [valor, setValor] = useState(0); // state
return (
<section>
<h2>{titulo}</h2>
<p>Valor atual: {valor}</p>
<button onClick={() => setValor(valor + passo)}>
Somar {passo}
</button>
</section>
);
}
<Contador titulo="Cliques" passo={2} />The essential hooks
- useState — creates a piece of local state and the function that updates it.
- useEffect — runs side effects (fetching data, subscribing to events) after rendering.
- useContext — reads shared data without passing props through several levels.
- useMemo and useCallback — memoize values and functions to avoid expensive recalculations.
- useRef — holds a mutable value that does not trigger a re-render.
The rule that confuses beginners the most
State in React is immutable. You do not change the existing value — you create a new one and hand it to the setter. Mutating an array or object directly does not trigger a re-render, because React compares references, not contents.
// wrong: mutates the existing array, the screen does not update
tarefas.push(nova);
setTarefas(tarefas);
// right: creates a new array, React notices the change
setTarefas([...tarefas, nova]);
// right: when the new value depends on the previous one
setValor((anterior) => anterior + 1);The ecosystem around it
React solves the interface layer and leaves the rest to the community: Next.js for routing and server rendering, TanStack Query for remote data, Zustand or Redux for global state, React Hook Form for forms. That modularity is both a strength and a cost — it grants freedom, but demands decisions. To start from scratch, see Getting started with React.
## faq
Frequently asked questions
Is React a framework or a library?
Officially it is a library, because it covers only the interface layer — it ships no routing, HTTP requests or global state management. In practice, the set of tools used alongside it plays the role of a framework.
What is the difference between React and Next.js?
React is the interface library. Next.js is a framework built on top of React that adds file-based routing, server rendering, static generation, image optimization and API routes. Anyone using Next.js is using React under the hood.
Why does my useEffect run twice in development?
It is React 18’s StrictMode mounting and unmounting the component on purpose, to expose effects without proper cleanup. This happens only in development — in production it runs once. If the duplicated behavior breaks something, the effect probably needs a cleanup function.
## read next