Agent WranglersClient and server state
Keep server data in one cache, keep screen state in the address, and keep the rest local. Update the screen at once only when you can undo it.
- Required 5
- Recommended 2
Required
Keep server data in one cache
RequiredKeep data that comes from the server in one data-fetching cache, and read it from there on every screen. Never copy it into a global store or component state.
Key cached data by every input
RequiredBuild every cache key from all the inputs that change the answer, including the account, the signed-in user, the filters, the sort and the page.
Show the answer to the latest request only
RequiredWhen a new request replaces an older one, such as a new search term, abort the older request and never render its answer.
Refresh every view a change touches
RequiredAfter a successful change, update or refetch every cached query that shows the changed record, including lists, counts and totals.
Keep screen state in the address
RequiredPut every choice that changes what a screen shows in the address, such as filters, search, sort, page, tab and the open record. Reloading or sharing the link shows the same screen.
Recommended
Undo optimistic updates that fail
RecommendedWhen the screen changes before the server answers, keep a copy of the old data. If the request fails, put it back and say so in words. Refetch either way.
Compute values instead of storing them
RecommendedCompute totals, counts, filtered lists and labels from the source data when you render. Never keep them in their own state to update by hand.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/client-and-server-state.