React is small at its core. Most of the difficulty people experience comes from learning the ecosystem around it — routers, state libraries, build tools — before understanding the handful of ideas the library itself is built on.
There are really five: components, props, state, the render cycle, and effects. Everything else is a consequence of those. This guide covers each one, the mental model that makes them click, and the mistakes that follow from misunderstanding them.
Components: UI as Functions
A React component is a function that takes data and returns a description of what should appear. It does not touch the DOM; it describes the result and lets React work out what to change.
That inversion is the central idea. In traditional DOM programming you say “find this element and change its text”. In React you say “given this data, the interface looks like this” — and React compares the new description with the previous one and applies the minimal set of changes.
The practical consequence is that an entire class of bug disappears: the interface can no longer drift out of sync with the data, because it is derived from it on every render.
Props: Data Flows Down
Props are the arguments passed into a component. They are read-only — a component may use them but never modify them.
Data flows in one direction: from parent to child. When a child needs to cause a change, the parent passes down a function for the child to call. The parent still owns the data; the child only signals intent.
This one-way flow is what makes React applications traceable. When a value is wrong you can follow it upward to the component that owns it, rather than searching for whatever code mutated it last.
State: Data That Changes Over Time
State is data a component owns and can change. Updating it tells React the component needs to be rendered again.
The Render Cycle and Reconciliation
When state or props change, React re-runs the component function to produce a new description of the interface, compares it against the previous one, and updates only the parts of the real DOM that actually differ.
Two implications matter in practice:
- Render functions must be pure. Given the same props and state they should produce the same output and cause no side effects. React may call them more than you expect.
- Keys identify list items. When rendering a list, a stable key tells React which item is which between renders. Using an array index as the key causes wrong behaviour when items are inserted, removed, or reordered — a classic source of inputs showing the wrong values.
Effects: Talking to the Outside World
Rendering is pure, but applications must do impure things: fetch data, set timers, subscribe to events. Effects are where that belongs — code that runs after render, deliberately separated from it.
Three rules prevent most effect-related bugs:
- Declare dependencies honestly. Every value the effect reads belongs in its dependency list. Omitting one produces stale data that is painful to diagnose.
- Clean up what you start. Timers, subscriptions, and in-flight requests must be cancelled when the component unmounts or dependencies change, or you get memory leaks and updates to components that no longer exist.
- Do not use effects to transform data. If a value can be derived from props and state, compute it during render. Using an effect to copy state into other state is the most common unnecessary-effect pattern.
If you are reaching for an effect, first check whether the value can simply be calculated during render.
Habits That Keep React Codebases Sane
For where React sits within a wider application stack, see why the MERN stack became so popular.
Frequently Asked Questions
Conclusion
React rests on five ideas: components describe the interface as a function of data, props flow down, state triggers re-renders, reconciliation applies the minimum change, and effects handle everything outside that pure model.
Almost every React bug traces back to one of them being misunderstood — mutated state, missing dependencies, index keys, or effects doing work that belonged in render. Learn the five properly and the ecosystem around them becomes much easier to evaluate.