Frontend Architecture FE · 08 · 09

Putting it together: code reading

Read four real frontend snippets — global state placement, a fetch waterfall, a lazy import, a token reference — and pick the fix a senior makes first.

FE Senior ◷ 14 min

Level

FoundationsJuniorMiddleSenior

Architecture is read in code, not slides. Each snippet below is a layer of the track caught in the act of going wrong. Read the code, predict the cost, and pick the fix that targets the layer that actually owns the bug.

When you read each snippet, name the layer before you look at the choices — that is the exact reflex a senior applies in a real code review.

Goal

Practise the cross-track diagnosis loop: read a snippet, identify which layer it belongs to (state, fetch, splitting, tokens), and choose the highest-leverage fix instead of one that patches a symptom upward.

Snippet 1 — where the keystroke lives

// global store
const useStore = create((set) => ({
  search: "",
  setSearch: (v) => set({ search: v }),
}));

function SearchBox() {
  const setSearch = useStore((s) => s.setSearch);
  return <input onChange={(e) => setSearch(e.target.value)} />;
}

function Dashboard() {
  // Chart, Table, Filters, Sidebar all call useStore(...) somewhere
  return <><SearchBox /><Chart /><Table /><Sidebar /></>;
}

Quiz

Typing in the search box janks the whole dashboard. From this code, what is the cause and the fix?

Snippet 2 — the fetch graph

function ProductPage({ id }) {
  const product = useQuery(["product", id], () => fetchProduct(id));
  // these two do NOT depend on product, yet they wait for it:
  const reviews = useQuery(["reviews", id], () => fetchReviews(id), {
    enabled: !!product.data,
  });
  const related = useQuery(["related", id], () => fetchRelated(id), {
    enabled: !!product.data,
  });
  // ...renders after all three resolve
}

Quiz

Reviews and related products do not depend on the product payload, yet LCP is slow. What is the defect and the fix?

Snippet 3 — the lazy import

import { HeavyChart } from "./HeavyChart"; // pulls in a 400 KB charting lib

function Analytics() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Show charts</button>
      {open && <HeavyChart />}
    </>
  );
}

Quiz

The 400 KB charting library ships in the initial bundle even though most users never click 'Show charts'. Why, and what is the fix?

Snippet 4 — the token reference

/* Button.css */
.btn-danger {
  background: #d33; /* brand red, hardcoded */
  color: #fff;
}
/* repeated across ~40 components: #d33, #fff, #1a1a1a ... */

Quiz

Dark mode needs `.btn-danger` to read differently on a dark surface, and a rebrand will change the red. What does this CSS reveal, and what is the structural fix?

Recap

Four snippets, four layers, one habit: per-keystroke state belongs colocated, not in a global store; an enabled gate on an independent fetch is an artificial waterfall; a static import bundles eagerly while only a dynamic import() splits; and a hardcoded hex is a missing semantic token. In each case the highest-leverage fix lives at the layer that owns the bug — moving the state, removing the false dependency, splitting the chunk, adding the semantic layer — never a patch one layer up. Now when you open a new codebase, these four patterns are the first things you scan for — not the folder structure.

Something unclear?

Ask a question about this lesson. Questions are anonymous and go straight to the author to make the lesson better.