Essential concepts to know when learning Declarative UI
summary
Compares concrete implementations across Jetpack Compose, SwiftUI, React Native by walking through a timetable-item like button (mutableState, like/isLike and setIsLike), notification side effects (launchedEffect, disposableEffect vs useEffect dependency array), and local scopes (CompositionLocal / environment / context). Shows smart recomposition vs virtual DOM, explains memoization to avoid object churn, and presents server-state approaches (SWR and react-query): built-in caching, loading/error states, optimistic updates with rollback, and cache invalidation.
AI-written summary · about
chapters (17)
- 0:00Declarative UI intro
- 1:06Declarative vs imperative
- 3:56Common elements in frameworks
- 5:42Cross-platform UI components
- 8:30Essential UI concepts
- 9:54State in declarative UI
- 13:14How rendering works
- 15:44Side effects in UI
- 19:15Side effects in Jetpack Compose
- 21:44State challenges in apps
- 23:55Sharing data across components
- 26:10Composition locals for data
- 29:03State management evolution
- 30:49MVI and TCA architectures
- 32:39Async state with SWR
- 34:26React Query for async state
- 36:12Key takeaways
related talks
40mRethinking UI: Imperative to Declarative
01h 10mThe Evolution of Declarative UI Frameworks: From Dinosaurs to Jetpack Compose
39mRe-Compose your UI: building an atomic design library
49mBuilding an Android UI using declarative programming in Jetpack Compose
45mCompose vs SwiftUI: Spot 10 Differences
35mDeclarative UI patterns
42mJetpack Compose: Art of the State
44mState in Jetpack Compose