React & Redux

A controlled input has its value driven by React state via a value prop and an onChange handler — state is the single source of truth and the DOM only reflects it. An uncontrolled input keeps its value in the DOM with no value prop; you read it via a ref.

useState adds local state to a function component, returning the current value and a setter that re-renders on change. useEffect runs side effects (subscriptions, fetches, DOM work) after render, with a dependency array controlling when it re-runs and an optional cleanup. useContext reads the nearest provider's value for a given context, re-rendering when it changes.

Props are inputs passed down from a parent — read-only inside the receiving component, which must never mutate them. State is data a component owns and manages internally; updating it (via setState or a useState setter) schedules a re-render. Props flow one way (parent to child); state is local. Changing either triggers a re-render of the component.

A key is the identity React uses to decide whether an element across two renders is the same instance. If the key stays the same, React updates the existing instance and keeps its state; if the key changes, React unmounts the old instance and mounts a fresh one, discarding state.

A class component has three phases. Mounting runs constructor, getDerivedStateFromProps, render, then componentDidMount. Updating runs shouldComponentUpdate, render, getSnapshotBeforeUpdate, then componentDidUpdate. Unmounting runs componentWillUnmount.

The first argument is either an object merged into state, or an updater function (prevState, props) => partialState — use the function form when the next state depends on the previous to avoid stale-state bugs. Reading this.state right after the call still shows the old value.

The virtual DOM is a lightweight in-memory tree describing the UI. On each render React diffs the new tree against the previous one (reconciliation) and applies the minimal real-DOM mutations: different element types replace the subtree, same types patch props. A key gives each list child a stable identity so React matches elements across renders instead of recreating them, preserving state and avoiding wrong reuse.

useEffect runs side effects after render — subscriptions, fetches, DOM work — with cleanup on deps change or unmount. useMemo memoizes an expensive computed value across renders, keyed by its dependencies. useCallback memoizes a function reference (a special case of useMemo) so it stays stable for memoized children or effect deps. Overusing them on cheap values costs more than it saves.

For performance, React defers applying setState rather than mutating state and re-rendering on the spot. It collects several updates triggered in the same tick and flushes them as a single re-render — this is batching. React 18 auto-batches across promises and timers too.

A presentational (dumb) component is concerned only with how things look — it takes props and renders markup, holding little state and no data logic. A container (smart) component is concerned with how things work — it fetches data, reads the store, handles events, and feeds children.

Use componentDidMount. It runs after the first render commits, so a setState with the fetched data triggers a second render that paints the result. componentWillMount runs before the first render, where a setState does not schedule a re-render, and it is deprecated.

Every render produces a new random key, so React sees a different identity each time and unmounts the old instance to mount a fresh one. The component loses all state, re-runs mount/unmount effects, loses focus and scroll, and pays the full remount cost.

Main bug: useEffect has no dependency array, so it refetches every render — and each setLocation triggers another render, an effective loop; give it [props.locationId]. spotTimes is an ARRAY of single-key objects but is read as spotTimes[s.id] — wrong shape; build one object or a Map keyed by id. The mapped <div> has no key, breaking reconciliation. Minor: use ===, and render a loading state for location.

Both have the same signature and dependency-array semantics, but they run at different times. useEffect runs asynchronously after the browser has painted, so it never blocks visual updates — the default for most side effects.

React stores a component's hooks as an ordered list (a linked list of hook records) on its fiber. On each render it walks that list in call order, matching the Nth hook call to the Nth stored record to recover its state. There are no names — position is the only identity.