Advanced React & Redux

The store holds the whole application state as one read-only object tree. An action is a plain object describing what happened, with a type field. A reducer is a pure function (state, action) => newState that returns the next state without mutating the old one.

Component always re-renders when its parent does. PureComponent implements shouldComponentUpdate with a shallow compare of props and state, skipping the render when nothing at the top level changed. A mutated nested object or a new inline prop defeats all three.

Context lets a value reach deeply nested components without passing it as a prop through every level — it removes prop drilling. A provider sets a value high in the tree, and any descendant reads it directly with useContext, however many layers sit between.

A ref is an escape hatch that gives imperative access to a value that survives re-renders without triggering one. Attached to a host element it holds the underlying DOM node — used to focus an input, measure layout, or play media; attached to a class component it holds the instance.

Both share cross-cutting logic. A higher-order component is a function taking a component and returning a wrapped one with extra props/behavior (e.g. connect), which deepens the tree and can collide on prop names. Render props pass a function as a prop that the component calls to render, making data flow explicit and slot-like but causing wrapper nesting. Custom hooks largely supersede both for logic reuse today.

Data flows one way. The UI calls store.dispatch(action). The store runs the reducers, pure functions that take the current state and the action and return either the same state or a new state immutably — never mutating the old one. The store saves the returned state and notifies subscribers, which re-read it and re-render. State is read-only; the only way to change it is by dispatching an action.

Middleware is a layer that intercepts every dispatched action after dispatch but before it reaches the reducers. It is where side effects live: logging, async calls, analytics, crash reporting. Each middleware can inspect the action, transform it, delay it, dispatch others, or stop it.

Normalization flattens nested data into a database-like shape: each entity type lives in a lookup object keyed by id, and relationships are stored as arrays of ids, not embedded copies. This removes duplication and makes updates cheap, local, and O(1) to look up.

A component re-renders when its own state changes, when its parent re-renders, or when a context it consumes changes. React does NOT deep-compare props by default — a parent render re-renders all children regardless of whether their props changed. React.memo (and PureComponent/shouldComponentUpdate for classes) wraps a component to bail out of re-render when a shallow prop comparison shows no change.

Both are middleware for handling async work and side effects, since reducers must stay pure. redux-thunk lets an action creator return a function that receives dispatch/getState — minimal, easy to learn, ideal for simple async flows.

Use context for genuinely global, low-frequency data many components read — user, theme, locale. Avoid it for data that changes often or that only a few nearby components need: every consumer re-renders when the provider value identity changes.

reselect creates memoized selectors that compute derived data from the Redux store. A selector caches its result and recomputes only when its specific input slices change (compared by reference), so expensive transforms (filtering, sorting, aggregating) run once instead of on every render.