React rests on one idea: the screen is a function of state, and you never write to the screen yourself. You describe what should be there; React works out the difference. Almost every beginner confusion comes from forgetting that indirection — expecting a setter to assign, a re-render to mean a repaint, an Effect to be a lifecycle hook. This guide gives the shape of the system rather than a tour of its functions: what runs when, what React compares, where identity comes from, and which escape hatches exist. Every behaviour below was executed against React 19 first.
Each chapter opens with the short version. Tap one to read the detail.
Components, markup, and props
~2 min
A component is a function returning markup, and that markup is an ordinary value rather than a template read later. Props travel one way and are read-only: a child can never write to them, and re-rendering a parent re-renders its children.
State is a snapshot, which is why setters look asynchronous
~2 min
A setter does not assign; it requests another render. Inside the render already running the variable keeps its old value, which is why setAge(age + 1) three times adds one, not three. Use an updater to compose, and never mutate state in place.
Identity across renders: keys, Hook order, and refs
~3 min
React commits only differences, so a re-render is not a repaint. What it matches to what is positional: a component's identity is its type and slot, overridden by key; a Hook's is its position in the call order. Refs are the box that survives renders without causing one.
Where state lives, and three ways to share it
~2 min
Most state bugs are structure bugs. Anything computable during render should not be stored, and two booleans that can contradict each other should be one status string. Lift what is shared to the closest common ancestor, and remember that context re-renders every consumer.
Effects synchronize with the outside world, and most of yours should not exist
~2 min
An Effect connects a component to something outside React and needs a cleanup that undoes it. Development deliberately runs setup, cleanup, setup so a missing cleanup shows itself at once. Deriving data, handling a click and resetting state on a prop change are not Effects.
Speed: memoization, the Compiler, and non-urgent updates
~2 min
memo compares props with Object.is, so one inline object or arrow makes it do nothing at all, and it never blocks a context update. The React Compiler writes that memoization for you. Transitions solve a different problem: responsiveness rather than fewer renders.
The browser layer: events, forms and accessible markup
~2 min
React normalizes events and attaches the real listener at the root, so stopPropagation stops the walk up the React tree. A form given an action function hands you its FormData and needs no state per input. Attribute spelling is camelCase with exactly two exceptions.
Where React runs: roots, hydration, and Server Components
~3 min
createRoot clears the container it mounts into, so server-produced markup needs hydrateRoot and a first client render that matches. Server Components go further: they run before bundling and never ship. Suspense is the pending primitive, and it ignores a fetch inside an Effect.
When rendering throws: error boundaries
~2 min
An error boundary is the one thing React still needs a class for, and it catches only errors thrown while rendering its children. Event handlers, asynchronous callbacks, server rendering and the boundary's own code all fall outside its reach.
Typing a React app
~2 min
Props are one object type on the parameter, which replaces runtime prop checking entirely. Two decisions carry most of the value: ReactNode for children, and an explicit type parameter on useState when the initial value is narrower than the real set.
Written by Keentune. We are not affiliated with or endorsed by the organizations whose documentation informs this guide, and any linked sources belong to their respective owners.
All exam, test, and product names and trademarks are the property of their respective owners and are used here for identification and reference only. Keentune is independent study practice — not affiliated with, authorized, or endorsed by any of these organizations.