React course
0 of 31 lessons done
+ 32 advanced lessons in S2 Pro - Your first componentFunctions that return markup
- Writing markup with JSXHTML-like syntax with three rules
- JavaScript in JSXCurly braces as a window to JS
- Passing propsConfigure components from outside
- Conditional renderingif, ternary and &&
- Rendering listsmap, filter and keys
- Keeping components pureSame inputs, same output
- Chapter review: Describing the UIA hard review of the whole chapter
- Responding to eventsonClick and friends
- State: a component's memoryuseState
- Render and commitHow an update reaches the screen
- State as a snapshotWhy setState does not change the variable
- Queueing updatesUpdater functions and batching
- Updating objects in stateTreat state as read-only
- Updating arrays in stateAvoid push, splice and sort in place
- Chapter review: Adding interactivityA hard review of the whole chapter
- Reacting to input with stateThink in visual states
- Choosing the state structureGroup, don't duplicate, flatten
- Sharing state between componentsLift state up
- Preserving and resetting statePosition, type and key
- Extracting state logic into a reduceruseReducer
- Passing data deeply with contextcreateContext and useContext
- Scaling up with reducer and contextState and dispatch in separate contexts
- Thinking in ReactA five-step process for any UI
- Chapter review: Managing stateA hard review of the whole chapter
- RefsValues that do not trigger renders
- Synchronizing with EffectsuseEffect
- You might not need an EffectDerive, reset with a key, use handlers
- Effect lifecycle and dependenciesYou don't choose the dependency list
- Custom hooksShare logic, not state
- Chapter review: Escape hatchesA hard review of the whole chapter
- Effect EventsS2 ProuseEffectEvent for non-reactive logic
- Removing dependenciesS2 ProFix the code, not the array
- Data fetching patternsS2 ProRaces, waterfalls and abort
- Strict ModeS2 ProDevelopment checks that find real bugs
- Chapter review: Effects masteryS2 ProA hard review of the whole chapter
- Why components re-renderS2 ProTriggers, children and state placement
- memo, useMemo, useCallbackS2 ProWhat actually helps
- React CompilerS2 ProAutomatic memoisation at build time
- Measure, split and virtualiseS2 ProProfiler, lazy loading, long lists
- Chapter review: PerformanceS2 ProA hard review of the whole chapter
- TransitionsS2 ProuseTransition and startTransition
- useDeferredValueS2 ProLet slow UI lag behind fast input
- SuspenseS2 ProLoading states as a boundary
- The use APIS2 ProRead promises and context in render
- Chapter review: Concurrent ReactS2 ProA hard review of the whole chapter
- Server and Client ComponentsS2 ProWhere code runs and what crosses the boundary
- Form actionsS2 Proaction, useActionState, useFormStatus
- Optimistic updatesS2 ProuseOptimistic
- Hydration and streamingS2 ProServer HTML meets client React
- Chapter review: Server, forms and actionsS2 ProA hard review of the whole chapter
- Where state belongsS2 ProServer state, UI state, URL and derived data
- External storesS2 ProuseSyncExternalStore
- Context performanceS2 ProWhy a provider can re-render everything
- Composition patternsS2 ProChildren, compound components, controlled APIs
- Designing custom hooksS2 ProAPIs that stay easy to use
- Chapter review: State architecture and designS2 ProA hard review of the whole chapter
- TypeScript with ReactS2 ProProps, events and discriminated unions
- Testing React componentsS2 ProTest behavior the way a user sees it
- AccessibilityS2 ProSemantics, labels, focus and live regions
- Error boundariesS2 ProContain failures and recover
- Refs in depthS2 Proref as a prop, imperative handles and flushSync
- Capstone: code reviewS2 ProSpot the problems seniors catch