0Pricing
React Academy · Lesson

Distinguishing Server Data and Local UI State

Separate server data (fetched, cached, refreshed) from ephemeral UI state (open panels, inputs). Keep logic clear and updates predictable.

Distinguishing Server Data and Local UI State is a free React Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Two kinds of state

Goal: Don’t mix server data with local UI.

  • Server data: fetched, cached, refreshed
  • Local UI: view flags, inputs, filters
  • Separate concerns → simpler code

Rules of thumb

  • If data comes from an API and can be refetched, treat it as server state.
  • If it controls the view only, keep it local.
  • Keep fetch status (idle/loading/error) near the server data.

Demo: fetch + refresh (server state)

Fetch products as server data; include status, last updated, and a manual refresh.

<div id="root"></div>

Demo: local UI state (view only)

Local UI: purely view concerns (open/closed, input text). Do not send to server.

<div id="root"></div>

Demo: combine server data + local filter

Keep fetch logic separate, then apply a local filter without mutating the server cache.

<div id="root"></div>

Tips & pitfalls

  • Keep fetch logic + status with server data
  • Use local state for view-only flags and inputs
  • Do not mutate cached server data for UI tweaks—derive instead

State classification check

Which of the following is usually LOCAL UI state rather than server state?

Recap

Recap: Treat fetched, refreshable data as server state. Keep view concerns (toggles, inputs) as local UI. Combine by deriving UI from the cache without mutating it.

Frequently asked questions

Is the “Distinguishing Server Data and Local UI State” lesson free?

Yes — the full text of “Distinguishing Server Data and Local UI State” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Distinguishing Server Data and Local UI State”?

Separate server data (fetched, cached, refreshed) from ephemeral UI state (open panels, inputs). Keep logic clear and updates predictable. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Distinguishing Server Data and Local UI State” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Distinguishing Server Data and Local UI State
  2. Normalization & Optimistic Updates (Concepts)
  3. Sync Patterns Without Heavy Libs
← Back to React Academy