React

What React actually is, JSX, components and props, rendering lists and conditionals, and handling events.

1. 1What React Is (and Why)8 minWhy React exists, what "declarative UI" actually means compared to manually poking the DOM, and the component model that everything else in this course builds on.
2. 2JSX and Elements9 minHow JSX compiles to plain JavaScript function calls, the handful of rules that trip up newcomers, and what a React element actually is under the hood.
3. 3Components and Props9 minHow data flows into a component through props, why props are read-only, destructuring patterns, default values, and the special `children` prop.
4. 4Rendering Lists and Keys9 minTurning an array of data into an array of elements with map, why every item needs a key, and why the wrong choice of key causes subtle bugs rather than crashes.
5. 5Conditional Rendering8 minThe patterns for showing different UI based on data — the ternary, the &&; shortcut and its most infamous gotcha, early returns, and rendering nothing at all.
6. 6Handling Events8 minAttaching event handlers in JSX, the SyntheticEvent wrapper, passing arguments to a handler, and why event handling is a normal JavaScript function underneath.
7. 7The Virtual DOM and Reconciliation10 minWhat actually happens between a state change and a pixel changing on screen — the render phase, the diffing algorithm's real rules, and why they explain the key prop's behavior.

useState, controlled forms, lifting state up, useEffect and its dependency array, cleanup, data fetching, and useRef.

1. 8useState and State Updates10 minGiving a component its own memory with useState, why state updates trigger a re-render, the functional-update form, and why React batches multiple updates together.
2. 9Controlled Forms9 minMaking React state the single source of truth for an input's value, the controlled/uncontrolled distinction, handling many fields at once, and the case uncontrolled is required.
3. 10Lifting State Up7 minWhat to do when two sibling components need to share and stay in sync with the same piece of state — move it to their nearest common ancestor and pass it back down.
4. 11useEffect Basics9 minWhat an effect is for — synchronizing a component with something outside React — when it runs relative to rendering and painting, and why it's not just "code that runs after render."
5. 12The Dependency Array9 minHow useEffect's second argument controls when an effect re-runs, why every value the effect reads belongs in it, and the classic stale-closure bug that happens when one is missing.
6. 13Cleanup Functions in Effects8 minReturning a cleanup function from an effect to undo subscriptions, timers, and listeners — when React calls it, and why skipping it is a common source of memory leaks.
7. 14Fetching Data in an Effect9 minThe hand-rolled pattern for loading data on mount — loading/error/data state, the race-condition guard, and why real apps usually reach for a dedicated data-fetching library instead.
8. 15useRef for the DOM and Mutable Values9 minThe one hook that holds a mutable value across renders without causing a re-render when it changes — for reaching a real DOM node, and remembering things the screen shouldn't reflect.

Composing with children, context, useReducer, custom hooks, and knowing when context is the wrong fix for prop drilling.

1. 16Composition and Children8 minBuilding flexible components by passing other components in as children or props, rather than by trying to configure one giant component with an ever-growing list of options.
2. 17Context and useContext10 minSharing a value across many components without threading it through every layer of props — createContext, Provider, useContext, and the re-render cost that limits it.
3. 18useReducer for Complex State9 minWhen a handful of related setState calls stop being manageable, and a single dispatch-and-reducer pattern makes state transitions easier to read, test, and reason about.
4. 19Custom Hooks9 minExtracting reusable stateful logic into your own function starting with "use," the rules of hooks, and why two components sharing a custom hook still get independent state.
5. 20Prop Drilling and When Context Is the Wrong Fix8 minProp drilling isn't automatically a problem — when passing props down a couple of layers is genuinely fine, when it's painful enough to fix, and why context isn't always the right fix.

Why components re-render, React.memo, useMemo and useCallback, list reconciliation pitfalls, and stale closures.

1. 21Why Components Re-render8 minThe exact triggers that cause a component to render again, why a parent re-rendering renders its children by default regardless of props, and why render isn't the same as a DOM change.
2. 22React.memo8 minOpting a component out of the default "parent re-renders, so I re-render too" behavior — how the shallow prop comparison works, and how this optimization backfires when misapplied.
3. 23useMemo and useCallback10 minMemoizing an expensive calculation and memoizing a function's identity across renders — what each buys you, and why reaching for either without measuring is often premature.
4. 24Keys and List Reconciliation Pitfalls8 minA hands-on look at the exact failure mode index-based keys cause once a list becomes dynamic — state and focus attaching to the wrong row after an insertion, deletion, or reorder.
5. 25Stale Closures and Common Bugs9 minThe general shape of the stale-closure bug beyond useEffect's dependency array — setInterval capturing an old value, listeners that never see updated state, and the two reliable fixes.

Error boundaries, portals, forwardRef, Suspense for data fetching, testing components, and a capstone.

1. 26Error Boundaries8 minCatching a render error in a subtree before it takes down the whole app — why this specific job still requires a class component, and what error boundaries deliberately don't catch.
2. 27Portals8 minRendering a component's output into a different DOM node than where it lives in the tree — the classic fix for modals and tooltips escaping overflow and stacking-context traps.
3. 28forwardRef and Ref as a Prop9 minExposing a DOM node (or a custom API) from inside a component — the forwardRef wrapper, useImperativeHandle for controlling what's exposed, and React 19's simpler ref-as-a-prop model.
4. 29Suspense for Data Fetching9 minWhat Suspense is at a conceptual level, its long-stable original use with React.lazy, and why Suspense-based data fetching needs a Suspense-aware source, not any fetch call.
5. 30Testing React Components8 minThe behavior-first testing philosophy behind React Testing Library — render, query like a user would, interact, assert — and why testing internal state makes tests brittle.
6. 31Capstone: A Small, Real Component12 minBuilding a filterable, debounced task list — tying together state, effects, a custom hook, memoization, and stable keys into one small component built the way a real one would be.