FrontendLesson 1 of 48 min
Where state lives
Four homes for data in a frontend, and the mistake of treating them as one.
State is just data that can change. The important question is never "what is the state" but "where is the authoritative copy", because everything else is a copy that can be wrong.
- The server
The truth. Everything else is cached from here. - The URL
Which page, which filters, which tab. Shareable and survives refresh. - Component memory
Is this dropdown open. Dies on refresh, and should. - The browser store
Preferences, drafts. Survives refresh, invisible to the server.
The category people get wrong is server state. Data fetched from an API is not really your app’s state. It is a cache of someone else’s state, and it goes stale the instant somebody else changes it. Treating it like local state is what produces the classic "I updated it but the list still shows the old value" bug.
What to remember
- Identify the authoritative copy first; everything else is a cache.
- Filters, tabs, and search terms belong in the URL.
- Server data is a cache with an expiry you did not choose.
Terms in this lesson
Show field notes toggles a search param the loader reads. With it off, the slow promise is never created, so nothing streams.