Reusable Alpine

Initialize, watch, and clean up

Use init and watchers for boundary synchronization without creating loops or forgotten external resources.

9 minute lesson

~~~

The filter initializes from the URL and writes deliberate changes back without watching a second copy of the same state. That contrast gives us something useful to test instead of a rule to memorize.

Initialization and watchers are appropriate for URL, storage, or third-party synchronization, but derived UI state should remain derived. The useful target is not encyclopedic coverage. Make one deliberate choice, observe its consequences, and know which requirement would make you revise it.

The happy path can hide a bad design: you can watch values that update each other and leak listeners or timers across component lifecycles and still get one successful demo. Push past the demo. keep watchers one-directional, avoid redundant state, and return or invoke cleanup for external resources, then test the condition most likely to prove the choice wrong.

The module is moving toward one outcome: Extract reuse only where it clarifies the board, keeping local components local and global state rare. Save the before-and-after evidence now; it will make the final project review much more honest.

Create a URL-sync watcher, navigate backward, and verify there is no update loop or duplicate listener. Save the evidence, then explain which requirement would force you to choose a different design.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →