JSX describes UI. Toggle pieces and watch one tree update — that is declarative markup, not manual DOM edits.

return (
  <>
    <h2 className="card">Ticket</h2>
    <p>Open</p>
  </>
);

Inside JSX, { expression } runs JavaScript. Quotes make a literal string.

return <p>Hello, {name} — double is {count * 2}</p>;

function Hello({ name }) {
  return <h1>Hello, {name}</h1>;
}

Parent imports TicketRow and composes it — same idea as import { TicketRow } from "./TicketRow".

import { TicketRow } from "./TicketRow";

function TicketList() {
  return (
    <ul>
      <TicketRow title="Fix cookie auth" />
    </ul>
  );
}

{loggedIn ? <Welcome /> : <Login />}

• Auth cookie (open)
• Query keys (done)
• Layouts (open)

Pure render: same props/state → same UI. Derive values; do not fetch or setState while rendering.

// Right — derive during render
const label = n > 10 ? "big" : n;
return <p>{label}</p>;

// Wrong — setState during render (loop risk)
// if (n > 10) setFlag(true);

Try tab away (blur), type, Escape, submit, and click.

Simulated react-router-dom: public /login vs private /course/* (ProtectedRoute).

Requested: /login → rendering /login

<Route element={<ProtectedRoute />}>
  <Route path="/course/frontend" element={<FrontendRoadmap />} />
</Route>
// Product app here: Next App Router, not react-router-dom

const [count, setCount] = useState(0);
setCount(c => c + 1);

setState schedules a render, then React commits DOM updates. The preview updates after the click handler finishes.

setOpen(true);
// 1) render calculates new tree
// 2) commit applies DOM changes

Three setN(n + 1) with the same snapshot add 1. Functional updaters add 3.

setN(n + 1); setN(n + 1); setN(n + 1); // +1
setN(n => n + 1); // ×3 → +3

State is a snapshot. Logging right after setState still sees the old value.

setCount(count + 1);
console.log(count); // previous snapshot

setPerson({ ...person, name }); // new object

• Auth
• Query

Lifted state — both panels read the same index.

Active panel: A

Prefer deriving openCount — mirrored state can drift.

Derived open count: 2

In sync for now

Changing key remounts the editor — local draft resets without manual clear.

<TicketEditor key={ticket.id} ticketId={ticket.id} />

count = 0

dispatch({ type: "inc" })

Deep child reads theme = light (no prop drilling)

ref.current = 0 · renders = 0

const clicks = useRef(0);

inputRef.current?.focus()

Seconds: 0

Cleanup clears the interval when stopped/unmounted.

tick = 0

Derived during render — no Effect mirroring props into state.

fullName = Ada Lovelace

• Auth cookie
• Layouts
• Query keys
• Pulse draft

const fullName = first + " " + last;
const filtered = tickets.filter(...)

Imagine useOnline() wraps this state + event subscription.

Connected

function useOnline() { /* subscribe once */ }

Plain filter runs every render. useMemo recalculates only when tickets or query change — toggle theme (unrelated) and compare the counters.

theme=light · plain path renders=1 · useMemo calc runs=1 · matches=40/40

const visible = useMemo(
  () => tickets.filter(t => t.title.includes(query)),
  [tickets, query],
);

Effects depend on the handler. A new function each render re-fires the Effect; useCallback keeps identity until deps change.

status=open · renders=1 · Effect with plain fn runs=0 · Effect with useCallback runs=0

const onChange = useCallback(() => { ... }, [status]);
useEffect(() => { /* subscribe */ }, [onChange]);

Mini createSlice feel: dispatch named actions → state updates → UI re-renders.

value=0 · title="(empty)"

createSlice → configureStore → Provider → dispatch(action)

• Auth cookie
• Layouts

Different keys → different cache entries.

TanStack Query — server-owned cache + invalidate after mutations.

axios.create({ withCredentials: true })

Prefetch + client transition for internal routes.

Interactive tickets/Pulse lists: Axios + Query with credentials.

Idle

Show skeleton while the segment streams.

Query cache: stale

Next revalidatePath/tag is for Next server caches — not Nest auth.

Nest: TypeORM, cookie JWT, domain rules.