[GordonBeeming]

https://www.ssw.com.au/rules/use-optimistic-updates

Why: Showing a spinner and waiting for the API on every small change makes an app feel slow, even when almost every save succeeds. Updating the UI straight away and rolling back on failure makes it feel instant, and server-side concurrency control makes sure an optimistic save based on stale data is rejected instead of silently overwriting someone else's change.

Key points:

• Use optimistic updates for small, frequent changes (rename, toggle, reorder, assign), not long hand-typed forms, actions whose result the next step needs, or irreversible side effects
• With TanStack Query: cancel in-flight fetches and snapshot in onMutate, roll back in onError, replace with the saved item in onSuccess, and re-sync in onSettled
• Block dependent actions while an optimistic update is in flight
• Return a rowversion-based version/ETag with the data, have the client send it back in If-Match, and return 412 Precondition Failed (or 409 Conflict for a body version) on a mismatch
• Compare against the version the user saw, not the one just loaded, so a rowversion column alone isn't enough
• Treat a conflict as its own error on the client so the UI rolls back and shows the other person's change

Triggered by: A real project where the team switched from spinners to optimistic updates and needed the API to catch conflicting writes from concurrent users.

[github-actions]

🔍 Preview PR Changes

View updated pages in edit mode:

• Rules to Better React
• Rules to Better Web API
• Do you use optimistic updates so the UI feels instant?

Branch: tina/gb/use-optimistic-updates

[github-actions]

Hi @GordonBeeming,

Rule: ../../public/uploads/rules/use-optimistic-updates/rule.mdx

Issues Detected:

• must have required property 'seoDescription'
• must have required property 'authors'

Please fix the Frontmatter in your Markdown files.

[github-actions]

👋 Hi @GordonBeeming,

This PR is currently in Draft mode. To help it get reviewed and merged:

1. ✍️ Update PR title & add a description - Explain what changes you've made and why
2. ✅ Mark as ready for review - Click "Ready for review" when you're done
3. 👥 Add reviewers - Assign people to review your changes
4. 📣 Notify reviewers - Message or call them to let them know the PR is ready

Once you've completed these steps, your PR will be ready for approval!

This is an automated reminder to help reduce draft PRs without descriptions or reviewers.

[Copilot]

🟡 Changes recommended

Whole-list rollback and premature refetching can overwrite unrelated saved or pending renames, while the conflict message incorrectly presents stale data as current.

3 open issues

• Rollback overwrites unrelated successful rename · New
• Conflict message claims refresh completed before it does · New
• Early invalidation overwrites a pending optimistic rename · New

What changed in this PR

Adds an SSW rule explaining how to make UI updates feel instant while protecting saved data with server-side concurrency checks.

Changes:

• Explains when to use optimistic updates, with TanStack Query examples for rollback and re-sync.
• Demonstrates EF Core rowversion checks, If-Match headers, and client-side conflict handling.
• Adds the rule to the React and Web API category indexes.

File	Description
public/​uploads/​rules/​use-optimistic-updates/​rule.mdx	New guidance and examples for optimistic updates and concurrency control.
categories/​software-engineering/​rules-to-better-web-api.mdx	Adds the rule to the Web API category.
categories/​software-engineering/​rules-to-better-react.mdx	Adds the rule to the React category.

_{Review effort: Balanced}