React

An input’s text can live in the browser or in your state. Learn both ways, what React does on each key, checkboxes, selects, number boxes, and the warnings you will meet.

What belongs in global state, and what doesn’t. Build a small store for the whole app with no library and no provider, save it, log it, and learn its costs.

Flags like isLoading and isError can both be true at once. Learn to list your states and events, draw them, and build a state machine with useReducer.

A component that reads one field of a context still renders when any other field changes. Learn why, and build a small store with selectors, so a store change renders only the components whose part changed.

A provider component shares a value, usually its own state, through context. Learn the reducer and context pattern, why only readers render, two contexts, useMemo for the value, and where providers go.

Context lets a component read a value from far above it, with no props in between. Learn how to give and read it, who re-renders, and the traps.

The React Compiler adds memoization to your components when you build the app. See the code it writes, what it skips, how to turn it on with Vite, and what you still do by hand.

useMemo keeps the answer of a calculation between renders, and useCallback keeps a function. Learn how they decide, the three real reasons to use them, and when to leave them out.

React.memo lets React skip a child when its props are the same as last time. See how it compares props, what breaks it, and when to use it.

Keep a slow part of the page from rendering on every key you type. Move state down, or pass the slow part in as children. We count every render.