Keeping the screen in sync: Full-Stack Development (Intermediate)

The screen can go out of date

The notes list in React state is a copy of what the server has. When the user creates, edits or deletes a note, the server changes, but the copy does not change by itself. You have three ways to bring them back in line.

Way	How	Good	Not so good
Refetch	After the change, GET /api/notes again	Simple and always correct	One more request; a short wait
Update from the answer	Put the note the server returned into the local list	No extra request	You must write the add, edit and delete logic
Optimistic update	Change the screen first, then send the request; undo if it fails	Feels instant, even on slow networks	Needs rollback code; wrong for risky actions

javascript

// after POST answered 201 with the new note
setNotes((list) => [created, ...list]);
// after PATCH answered 200 with the updated note
setNotes((list) => list.map((n) => (n.id === updated.id ? updated : n)));
// after DELETE answered 204
setNotes((list) => list.filter((n) => n.id !== id));

Updating the local list from the server's answer. Each line makes a NEW array; React re-renders only when state is replaced, not changed in place.

Optimistic updates

An optimistic update assumes the request will work. When the user taps the pin icon, the note moves to the top at once; the PATCH request goes in the background. If the server fails, you roll back: put the old list back and show a short message.

Think of it like this: At a busy kirana shop, the shopkeeper hands you the packet of biscuits while your UPI payment is still processing. Nearly every payment succeeds, so nobody waits. If the payment fails, you hand the packet back. That is an optimistic update with a rollback.

javascript

async function togglePin(id) {
  const before = notes; // keep the old list for rollback
  const target = notes.find((n) => n.id === id);
  setNotes(notes.map((n) => (n.id === id ? { ...n, pinned: !n.pinned } : n)));
  try {
    await api('/notes/' + id, { method: 'PATCH', body: { pinned: !target.pinned } });
  } catch (err) {
    setNotes(before); // roll back
    showToast('Could not pin the note. Please try again.');
  }
}

Optimistic pin with rollback. The screen changes before the server answers.

Careful: Use optimistic updates only for small actions that almost always work and are easy to undo: pin, like, mark as done. Never show a payment, an order or a signup as successful before the server confirms it, and always tell the user when you roll back.

Server-state libraries

Server state is data that really lives on the server, which the screen only shows a copy of. Libraries such as TanStack Query (also called React Query) and SWR manage that copy for you: they cache answers by a key like ["notes"], show cached data at once while fetching fresh data in the background, refetch when you come back to the tab, retry failed reads, and let you invalidate (mark as old) a key after a change so it is fetched again.

javascript

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function NotesPage() {
  const queryClient = useQueryClient();
  const { data, isPending, error } = useQuery({
    queryKey: ['notes'],
    queryFn: () => api('/notes'),
  });
  const createNote = useMutation({
    mutationFn: (input) => api('/notes', { method: 'POST', body: input }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['notes'] }),
  });
  // createNote.mutate({ title: 'New idea' })
}

TanStack Query: loading, error, caching and refetch after a change, in a few lines. It still uses your api() client inside.

Race conditions in search

A race condition is a bug where the result depends on which of two things finishes first. The user types "ph", then "phy". Two searches go out. If the "ph" answer is slower and arrives last, the screen shows results for "ph" while the box says "phy". The fix: give each request a number and ignore any answer that is not from the latest one, or cancel the older request with an AbortController.

javascript

let latest = 0;
async function search(text) {
  const id = ++latest; // this request's number
  const data = await api('/notes?q=' + encodeURIComponent(text));
  if (id !== latest) return; // a newer search started: ignore this old answer
  setNotes(data.notes);
}

A latest-request guard. encodeURIComponent makes spaces and symbols safe inside a URL.

Debounce typing

Typing "physics" is seven key presses. Sending seven searches wastes data and server time. Debounce means waiting until the user stops typing for a short pause, about 300 ms, and only then sending one request.

javascript

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer); // a new key press cancels the waiting call
    timer = setTimeout(() => fn(...args), ms);
  };
}

const debouncedSearch = debounce(search, 300);
// <input onChange={(e) => debouncedSearch(e.target.value)} />

Each key press restarts the 300 ms timer, so only the last one sends a request.

Tip: Use both: debounce cuts the number of requests, and the latest-request guard keeps the answers in the right order. TanStack Query also avoids the race, because each search text is its own query key.

Keeping the screen in sync

Explanation

The screen can go out of date

Optimistic updates

Server-state libraries

Race conditions in search

Debounce typing

Watch the lesson

In real life: Liking a post in a social app

Practice (0/3 done)

Quick quiz

Read more (free)