Home › Practice › Flashcards
Flashcards
Click any card to flip. Use this for last-minute review the night before, or to fill 10 minutes between meetings. Designed for fast recall, not deep learning.
01React
What runs first: useEffect cleanup or new render?
React commits the new render first, THEN runs the previous effect's cleanup, THEN runs the new effect. Cleanup runs between renders, not before them.
Why must hooks be called in the same order every render?
React tracks hook state by call position, not name. Conditional hooks shift the position of subsequent ones, so React reads wrong state.
When does React.memo NOT help?
When the parent passes new object/function references every render. Memo's shallow comparison sees new identity = new props = re-render.
useMemo vs useCallback?
useMemo memoizes a value. useCallback memoizes a function reference. useCallback(fn, deps) === useMemo(() => fn, deps).
Why is array index a bad key?
When list reorders, indexes stay the same but items swap. React thinks no items moved, just that everything's content changed — wrong DOM updates, lost state.
What does Suspense do?
Declarative async — children can suspend (throw a promise), Suspense catches it and shows a fallback. Used for code splitting (React.lazy) and data fetching with Suspense-aware libs.
When useTransition?
Mark a state update as low-priority so urgent updates (typing, clicks) stay snappy. Returns isPending + startTransition. Great for filter/search over large lists.
How does Context cause perf issues?
Every consumer re-renders when value changes by reference. Mitigations: split contexts, useMemo the value, or use selector libs / Zustand.
02TypeScript
any vs unknown?
any: turns off type checking. unknown: type-safe "I don't know yet" — must narrow before using. Prefer unknown.
never type — when?
Functions that throw or loop forever return never. Used for exhaustiveness checks in switches: assertNever(x: never).
type vs interface?
Mostly interchangeable. interface merges declarations (extendable). type supports unions, mapped, conditional. Use interface for extendable shapes, type for everything else.
Discriminated union — example?
type R = {kind:'ok',data:T} | {kind:'err',e:E} — switch on .kind narrows the type. Models async results, state machines.satisfies — what does it do?
Checks a value matches a type WITHOUT widening it. const x = {a:1} satisfies Record<string,number> keeps x typed as {a:1}, not the wider Record.
What's noUncheckedIndexedAccess?
tsconfig flag making arr[i] return T | undefined instead of T. Catches off-by-one bugs. Should be on.
03JavaScript
Microtask vs macrotask?
Microtask: promise callbacks, queueMicrotask. Drained ALL between every macrotask. Macrotask: setTimeout, I/O. One per loop iteration. Microtasks always win.
var vs let — for loop bug?
var i in a loop: all closures share one i (function scope). let i: each iteration gets a new binding. Classic gotcha.
Closure — one-line definition?
A function bundled with its lexical scope — it remembers variables from where it was defined, not where it's called.
Debounce vs throttle?
Debounce: run AFTER events stop. Search box. Throttle: run AT MOST every X ms. Scroll handler.
structuredClone — what's it good for?
Native deep clone, handles cycles, copies Maps/Sets/Dates. Doesn't copy functions or DOM nodes. Beats JSON.parse(JSON.stringify(...)).
ES modules vs CommonJS — why care?
ESM is static — imports resolved at parse time. Enables tree-shaking. CJS is dynamic, can't tree-shake reliably.
04Performance
Core Web Vitals — three metrics?
LCP (Largest Contentful Paint, ≤2.5s), INP (Interaction to Next Paint, ≤200ms), CLS (Cumulative Layout Shift, ≤0.1).
CSS properties cheap to animate?
transform and opacity. Composite-only on GPU, no reflow or repaint. Avoid animating top/left/width/height.
preload vs prefetch?
preload: high priority, current page (fonts, hero image). prefetch: low priority, likely future page (next route).
How to render 100k rows?
Virtualization. Only render visible rows + buffer. AG Grid does this by default. Pair with stable keys + memoized row components.
Tree shaking — what enables it?
ES modules (static imports) + sideEffects:false in package.json + named imports (not default-export-of-an-object).
Caching pattern for hashed assets?
Cache-Control: public, max-age=31536000, immutable on hashed JS/CSS. Short or no-cache on HTML so it picks up new asset names.
05Their stack
Nx — what's "affected"?
nx affected -t test runs only on projects impacted by changes since base. Dramatically reduces CI time as monorepo grows.
Nx apps vs libs?
apps/ are deployable units, can't import each other. libs/ are shared code — feature, ui, data-access, util — composed into apps.
Nx module boundaries?
ESLint rule using project tags. e.g. scope:orders can't import from scope:inventory. Enforces architecture, not just convention.
AG Grid row models?
clientSide (all in memory), infinite (lazy chunks), serverSide (chunks + grouping/pivot server-side, Enterprise), viewport.
AG Grid cellRenderer vs valueGetter?
cellRenderer: custom React component for displaying. valueGetter: compute the cell value (when not a 1:1 field map). valueFormatter: just format the existing value.
TanStack Query: staleTime vs gcTime?
staleTime: how long data is fresh (no refetch). gcTime: how long unused data lingers in cache. staleTime defaults to 0, gcTime to 5 min.
TanStack Query: optimistic update flow?
onMutate: cancel queries, snapshot, set new. onError: roll back from snapshot. onSettled: invalidate to resync.
Query key factory — why?
Typed object that builds keys. Prevents typos, enables precise invalidation. orderKeys.lists() invalidates list queries without touching detail queries.
06Behavioral / soft
Tell me about yourself — opening line?
"I'm a senior frontend dev with over 10 years of experience, currently at Artlist..." Anchors seniority + current role in 5 seconds.
Why Omnesoft — opening line?
"Honestly, I wasn't actively job-hunting — but when this role came up..." Confident, distinctive, signals options.
Salary expectation — first move?
DEFLECT: "I'd love to learn more about the role and full package first. Could you share what you've budgeted?" Don't volunteer a number first.
Salary range when forced?
"$70,000 to $90,000 USD base, depending on the structure of the package." Anchors at a real number, not Bangladesh-rate.
5 Omnesoft values?
Innovation, Integrity, Collaboration, Transparency, Empowerment.
3 STAR stories ready?
1) Translation infra (perf). 2) tutorialsearch.io (ownership). 3) Memory leak (debugging). Plus state mgmt debate (collab) and review-culture (mentoring).
If stuck in coding interview?
Say so out loud. "I'm stuck — let me back up and try a different angle." Or ask for a hint. Better than silent flailing.
Stage 4 closer?
"Based on everything, I'd be excited to take this forward. What's the next step from here?" Direct, confident, not desperate.