From Imperative to Declarative: Simplifying JavaScript APIs with React.js

on YouTube ↗19m

" summary

Shows how to wrap the Google Maps JavaScript API in a declarative React component using the Google Maps loader and the Maps and Marker constructors, a custom useMap hook that returns a container ref and map ref, and small hooks (useCenter, useZoom, useIdle) that run imperative updates inside useEffect. Uses context to let child Marker components new up markers, keeps the map in a ref to avoid rerenders, and lets external state control center/zoom while encapsulating imperative logic.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 1:09Imperative vs declarative
3. 3:16Code examples comparison
4. 5:45Benefits of declarative code
5. 7:56Simplifying JavaScript APIs
6. 10:04Declarative Google Maps API
7. 13:58Handling map center prop
8. 15:44Adding zoom and idle hooks
9. 16:24Adding markers with context
10. 18:53Conclusion and benefits

" related talks

• 50mBuilding with Mapbox GL JS in ReactChris Wong · BUILD with Mapbox 2025
• 36mDeclarative APIs in an Imperative WorldTilde Ann Thurium · Strange Loop 2019
• 22mIntegrating React.js and ShinyAlan Dipert · rstudio::conf 2019
• 15mFrom Imperative to DeclarativeFeather Knee · Reactathon 2018
• 27mMixed Mode ReactKen Wheeler · React Amsterdam 2018
• 59mDeveloping React Applications with Functional ComponentsVenkat Subramaniam · Great International Developer Summit 2023
• 23mHow to Roll Your React Components Like a Good Inside-Out SushiAdir Kandel · ReactNext 2025
• 27mEric Bishard - State Management with React HooksEric Bishard · React Loop 2019