and <meta> tags?","a":"Render them anywhere in a component and React hoists them to <head> automatically — native document metadata support, plus stylesheet and async script precedence handling."},{"id":"6677258c-84d1-49d0-a37e-b29af3d8698f","q":"What is the React Compiler?","a":"A build-time compiler (stable 1.0, late 2025) that auto-memoizes components and values by understanding the Rules of React — retiring most manual useMemo, useCallback, and React.memo."},{"id":"2663d270-18df-4796-9b82-40f8870c3808","q":"What is the <Activity> component (19.2)?","a":"Wraps UI with modes 'visible' and 'hidden'. Hidden trees keep their state but unmount effects and render at low priority — ideal for tabs or pre-rendering likely-next screens."},{"id":"90611cf3-b857-4bdf-9ce4-1caf37da0135","q":"What does useEffectEvent do (19.2)?","a":"Extracts the 'event' part of an effect so it always reads the latest props/state without being a dependency — eliminating stale closures and effects that re-fire too often."},{"id":"cc64e2ec-ab6a-4b9c-94c0-3fb6ccb798f1","q":"Name three smaller React 19 quality-of-life changes.","a":"Context used directly as a provider (<MyContext> instead of .Provider), ref callbacks can return cleanup functions, and hydration errors now show a single readable diff."},{"id":"f1604993-898a-4907-9718-6774d854dca8","q":"Which headline features are still NOT stable in 19.2?","a":"View Transitions and Fragment Refs — real and demoed, but only in Canary/Experimental channels. Saying they're stable in an interview is a red flag."},{"id":"1ae833df-e286-4a1f-81f0-88cd12e1ab04","q":"Interview one-liner: what's the architectural theme of React 19?","a":"Work moves off the client and out of your hands: RSC shifts rendering to the server, Actions absorb form boilerplate, and the Compiler absorbs memoization — less JS shipped, less code to maintain."}]},"index":0},{"id":"49e1ac33-f41a-414a-8a51-51311ce27f82","q":"What are Actions in React 19?","a":"Async functions passed to a transition or form. React automatically manages the pending state, error handling, optimistic updates, and form resets you used to hand-write.","deck":"$5:props:children:1:props:cards:0:deck","index":1},{"id":"a2778f4b-7bc6-4496-bfec-64cfbb4dcd3f","q":"What does useActionState do?","a":"Wraps an action and returns [state, formAction, isPending] — replacing hand-rolled loading/error/result state for submissions. Pass formAction straight to <form action={...}>.","deck":"$5:props:children:1:props:cards:0:deck","index":2},{"id":"ac76bfe9-ed5c-43b8-b154-cf957f28e6ec","q":"What does useFormStatus do?","a":"Lets a child component read the status (pending, data) of its nearest parent <form> — like context for forms. Classic use: a submit button that disables itself.","deck":"$5:props:children:1:props:cards:0:deck","index":3},{"id":"a60ba84e-a39f-4c1d-bd86-de7aa1f1c68d","q":"What does useOptimistic do?","a":"Shows a temporary 'optimistic' value while an async action is in flight, then automatically reverts to the real state when the action completes or fails.","deck":"$5:props:children:1:props:cards:0:deck","index":4},{"id":"c91ec6a5-7dfc-4ba6-bc60-7ad616e07426","q":"What is the use() API?","a":"Reads a promise or context during render, suspending until the promise resolves. Unlike hooks, use() can be called conditionally and inside loops.","deck":"$5:props:children:1:props:cards:0:deck","index":5},{"id":"0b9a20f3-c464-49aa-af66-d12a616a0bf5","q":"What are React Server Components (RSC)?","a":"Components that run only on the server and send serialized UI — not JavaScript — to the client. Zero bundle cost. 'use client' marks where the client-side world begins.","deck":"$5:props:children:1:props:cards:0:deck","index":6},{"id":"8f5b43e2-13c1-4e19-9860-ae3a0b405df7","q":"'use client' vs 'use server' — what does each mark?","a":"'use client': the boundary where components ship to the browser. 'use server': marks Server Functions callable from the client — NOT server components (those are the default, no directive).","deck":"$5:props:children:1:props:cards:0:deck","index":7},{"id":"b3410866-4534-4e8c-9639-42d702d8d83b","q":"What replaced forwardRef?","a":"Nothing is needed anymore: in React 19, ref is a regular prop on function components. forwardRef is deprecated and codemods remove it.","deck":"$5:props:children:1:props:cards:0:deck","index":8},{"id":"53272e2f-fc1b-4c3b-81a9-b5a7f8bb3505","q":"How does React 19 handle <title> and <meta> tags?","a":"Render them anywhere in a component and React hoists them to <head> automatically — native document metadata support, plus stylesheet and async script precedence handling.","deck":"$5:props:children:1:props:cards:0:deck","index":9},{"id":"6677258c-84d1-49d0-a37e-b29af3d8698f","q":"What is the React Compiler?","a":"A build-time compiler (stable 1.0, late 2025) that auto-memoizes components and values by understanding the Rules of React — retiring most manual useMemo, useCallback, and React.memo.","deck":"$5:props:children:1:props:cards:0:deck","index":10},{"id":"2663d270-18df-4796-9b82-40f8870c3808","q":"What is the <Activity> component (19.2)?","a":"Wraps UI with modes 'visible' and 'hidden'. Hidden trees keep their state but unmount effects and render at low priority — ideal for tabs or pre-rendering likely-next screens.","deck":"$5:props:children:1:props:cards:0:deck","index":11},{"id":"90611cf3-b857-4bdf-9ce4-1caf37da0135","q":"What does useEffectEvent do (19.2)?","a":"Extracts the 'event' part of an effect so it always reads the latest props/state without being a dependency — eliminating stale closures and effects that re-fire too often.","deck":"$5:props:children:1:props:cards:0:deck","index":12},{"id":"cc64e2ec-ab6a-4b9c-94c0-3fb6ccb798f1","q":"Name three smaller React 19 quality-of-life changes.","a":"Context used directly as a provider (<MyContext> instead of .Provider), ref callbacks can return cleanup functions, and hydration errors now show a single readable diff.","deck":"$5:props:children:1:props:cards:0:deck","index":13},{"id":"f1604993-898a-4907-9718-6774d854dca8","q":"Which headline features are still NOT stable in 19.2?","a":"View Transitions and Fragment Refs — real and demoed, but only in Canary/Experimental channels. Saying they're stable in an interview is a red flag.","deck":"$5:props:children:1:props:cards:0:deck","index":14},{"id":"1ae833df-e286-4a1f-81f0-88cd12e1ab04","q":"Interview one-liner: what's the architectural theme of React 19?","a":"Work moves off the client and out of your hands: RSC shifts rendering to the server, Actions absorb form boilerplate, and the Compiler absorbs memoization — less JS shipped, less code to maintain.","deck":"$5:props:children:1:props:cards:0:deck","index":15},{"id":"c2396dd8-28eb-48b2-9233-586f19161ee8","q":"What do the three letters in CAP stand for?","a":"Consistency, Availability, Partition tolerance. A distributed system can only guarantee two of the three at once.","deck":{"slug":"cap","name":"CAP theorem","blurb":"Partitions, trade-offs, and PACELC","tint":"#F7C7D6","ink":"#B84268","cards":[{"id":"c2396dd8-28eb-48b2-9233-586f19161ee8","q":"What do the three letters in CAP stand for?","a":"Consistency, Availability, Partition tolerance. A distributed system can only guarantee two of the three at once."},{"id":"0c6c496a-d778-46d4-95e5-dce77a704b06","q":"CAP theorem in one sentence?","a":"During a network partition, a distributed system must choose between consistency and availability — it can't have both."},{"id":"413b6f35-7372-425c-ad31-7af99f7d14a4","q":"Define consistency (in CAP terms).","a":"Every read receives the most recent write or an error. All nodes appear to hold one up-to-date value (linearizability)."},{"id":"23ef1803-5bc4-4aaa-a03a-4d95dcb36729","q":"Define availability (in CAP terms).","a":"Every request to a non-failing node gets a non-error response — though the data may be stale."},{"id":"0c82146d-ecca-4ce0-b5db-563c899d384d","q":"Define partition tolerance.","a":"The system keeps operating even when network failures split nodes into groups that can't communicate."},{"id":"5be1fb53-d279-4a95-840c-4b62f1d71386","q":"Why is 'CA' not a real choice for distributed systems?","a":"Network partitions are unavoidable in any real network, so P is mandatory. The actual trade-off is only C vs A during a partition."},{"id":"6852c674-897c-4b5f-9dfa-12a52d93619d","q":"Name some CP systems.","a":"ZooKeeper, etcd, HBase, MongoDB (default config), Google Spanner. They refuse or delay requests rather than serve stale data."},{"id":"7446cea3-adf7-4054-95fb-7b90ff1bf42b","q":"Name some AP systems.","a":"Cassandra, DynamoDB (default reads), CouchDB, DNS. They stay responsive and reconcile conflicts later (eventual consistency)."},{"id":"7779d1ef-8450-4e15-b1b4-bf8adaa3c1cf","q":"What is PACELC?","a":"If Partition: choose Availability or Consistency. Else (normal operation): choose Latency or Consistency. It covers the trade-off even when the network is healthy."},{"id":"6b2affe0-a6c5-40ec-b212-48076c66d1a6","q":"When should you choose CP in a system design interview?","a":"When stale or conflicting data causes real harm: ticket booking, inventory, payments, auction bids, distributed locks, leader election."},{"id":"7dbb51f7-d566-4b73-8fb3-2afb2c490487","q":"When should you choose AP?","a":"When stale reads are harmless: feeds, like counts, view counters, profiles, analytics. Most systems default to availability."},{"id":"a47e2d41-b5b2-40ce-8c7a-1efb27dfd9df","q":"How does CAP consistency differ from ACID consistency?","a":"CAP consistency = linearizable reads across nodes. ACID consistency = database invariants and constraints hold after a transaction. Different concepts sharing a letter."}]},"index":0},{"id":"0c6c496a-d778-46d4-95e5-dce77a704b06","q":"CAP theorem in one sentence?","a":"During a network partition, a distributed system must choose between consistency and availability — it can't have both.","deck":"$5:props:children:1:props:cards:16:deck","index":1},{"id":"413b6f35-7372-425c-ad31-7af99f7d14a4","q":"Define consistency (in CAP terms).","a":"Every read receives the most recent write or an error. All nodes appear to hold one up-to-date value (linearizability).","deck":"$5:props:children:1:props:cards:16:deck","index":2},{"id":"23ef1803-5bc4-4aaa-a03a-4d95dcb36729","q":"Define availability (in CAP terms).","a":"Every request to a non-failing node gets a non-error response — though the data may be stale.","deck":"$5:props:children:1:props:cards:16:deck","index":3},{"id":"0c82146d-ecca-4ce0-b5db-563c899d384d","q":"Define partition tolerance.","a":"The system keeps operating even when network failures split nodes into groups that can't communicate.","deck":"$5:props:children:1:props:cards:16:deck","index":4},{"id":"5be1fb53-d279-4a95-840c-4b62f1d71386","q":"Why is 'CA' not a real choice for distributed systems?","a":"Network partitions are unavoidable in any real network, so P is mandatory. The actual trade-off is only C vs A during a partition.","deck":"$5:props:children:1:props:cards:16:deck","index":5},{"id":"6852c674-897c-4b5f-9dfa-12a52d93619d","q":"Name some CP systems.","a":"ZooKeeper, etcd, HBase, MongoDB (default config), Google Spanner. They refuse or delay requests rather than serve stale data.","deck":"$5:props:children:1:props:cards:16:deck","index":6},{"id":"7446cea3-adf7-4054-95fb-7b90ff1bf42b","q":"Name some AP systems.","a":"Cassandra, DynamoDB (default reads), CouchDB, DNS. They stay responsive and reconcile conflicts later (eventual consistency).","deck":"$5:props:children:1:props:cards:16:deck","index":7},{"id":"7779d1ef-8450-4e15-b1b4-bf8adaa3c1cf","q":"What is PACELC?","a":"If Partition: choose Availability or Consistency. Else (normal operation): choose Latency or Consistency. It covers the trade-off even when the network is healthy.","deck":"$5:props:children:1:props:cards:16:deck","index":8},{"id":"6b2affe0-a6c5-40ec-b212-48076c66d1a6","q":"When should you choose CP in a system design interview?","a":"When stale or conflicting data causes real harm: ticket booking, inventory, payments, auction bids, distributed locks, leader election.","deck":"$5:props:children:1:props:cards:16:deck","index":9},{"id":"7dbb51f7-d566-4b73-8fb3-2afb2c490487","q":"When should you choose AP?","a":"When stale reads are harmless: feeds, like counts, view counters, profiles, analytics. Most systems default to availability.","deck":"$5:props:children:1:props:cards:16:deck","index":10},{"id":"a47e2d41-b5b2-40ce-8c7a-1efb27dfd9df","q":"How does CAP consistency differ from ACID consistency?","a":"CAP consistency = linearizable reads across nodes. ACID consistency = database invariants and constraints hold after a transaction. Different concepts sharing a letter.","deck":"$5:props:children:1:props:cards:16:deck","index":11},{"id":"a9ab7900-2a33-4cf3-a1a0-3c4bddc356e1","q":"What does ACID stand for?","a":"Atomicity, Consistency, Isolation, Durability — the four guarantees a database makes about transactions.","deck":{"slug":"acid","name":"ACID","blurb":"Transactions, isolation levels, and MVCC","tint":"#BDE8D2","ink":"#17805E","cards":[{"id":"a9ab7900-2a33-4cf3-a1a0-3c4bddc356e1","q":"What does ACID stand for?","a":"Atomicity, Consistency, Isolation, Durability — the four guarantees a database makes about transactions."},{"id":"aa32ce1b-c803-4809-80ce-5c2a5cb72be2","q":"Define atomicity.","a":"All or nothing: a transaction either fully completes or fully rolls back. No partial effects are ever visible. It's about failure handling, not concurrency."},{"id":"a8edde0f-ede4-49dc-9499-8cb411e0b520","q":"Define consistency (in ACID terms).","a":"Every transaction moves the database from one valid state to another — constraints and invariants (foreign keys, uniqueness, business rules) always hold."},{"id":"32454677-da46-4056-9302-10893cec3bf9","q":"Define isolation.","a":"Concurrent transactions don't interfere with each other. The result is as if they had run one at a time (serially)."},{"id":"5410ca11-cfd3-47c4-bfd2-7097c7e8a960","q":"Define durability.","a":"Once committed, data survives crashes and power loss — via write-ahead logging, fsync to disk, and (in distributed databases) replication."},{"id":"39cc922c-41f3-45a6-832f-fc30048acd8a","q":"Name the four standard isolation levels, weakest to strongest.","a":"Read uncommitted, read committed, repeatable read, serializable. Postgres defaults to read committed; MySQL InnoDB to repeatable read."},{"id":"6c8e6a1f-abf8-4ab3-8a05-807759eea946","q":"What is a dirty read?","a":"Reading another transaction's uncommitted changes, which may later roll back. Prevented by read committed and above."},{"id":"d24eab5a-c075-44d5-ac85-a09ca3a28336","q":"Non-repeatable read vs phantom read?","a":"Non-repeatable: a row you already read changes between two reads. Phantom: new rows matching your query appear between two reads."},{"id":"0184b182-5a46-46cb-8174-4d46249f086d","q":"How do databases implement atomicity and durability?","a":"The write-ahead log (WAL): changes are appended to a sequential log and fsynced before commit. Crash recovery replays the log — redo committed, undo uncommitted."},{"id":"372a3838-94f9-4381-ab6c-7096b0959e1e","q":"What is MVCC?","a":"Multi-version concurrency control: writers create new row versions instead of overwriting; each transaction reads a consistent snapshot. Readers never block writers."},{"id":"2b6fdefc-99f3-4b1a-9ce5-0f9d9d72f4b1","q":"What is BASE and how does it contrast with ACID?","a":"Basically Available, Soft state, Eventually consistent — the availability-first model of AP systems, trading strict guarantees for uptime and scale."},{"id":"166d2baf-03bc-4afd-8231-ed04bebb7414","q":"Which ACID property is the 'odd one out' and why?","a":"Consistency. A, I, and D are pure database mechanisms; C is a joint responsibility — the application defines what 'valid' means, the database only enforces declared constraints."}]},"index":0},{"id":"aa32ce1b-c803-4809-80ce-5c2a5cb72be2","q":"Define atomicity.","a":"All or nothing: a transaction either fully completes or fully rolls back. No partial effects are ever visible. It's about failure handling, not concurrency.","deck":"$5:props:children:1:props:cards:28:deck","index":1},{"id":"a8edde0f-ede4-49dc-9499-8cb411e0b520","q":"Define consistency (in ACID terms).","a":"Every transaction moves the database from one valid state to another — constraints and invariants (foreign keys, uniqueness, business rules) always hold.","deck":"$5:props:children:1:props:cards:28:deck","index":2},{"id":"32454677-da46-4056-9302-10893cec3bf9","q":"Define isolation.","a":"Concurrent transactions don't interfere with each other. The result is as if they had run one at a time (serially).","deck":"$5:props:children:1:props:cards:28:deck","index":3},{"id":"5410ca11-cfd3-47c4-bfd2-7097c7e8a960","q":"Define durability.","a":"Once committed, data survives crashes and power loss — via write-ahead logging, fsync to disk, and (in distributed databases) replication.","deck":"$5:props:children:1:props:cards:28:deck","index":4},{"id":"39cc922c-41f3-45a6-832f-fc30048acd8a","q":"Name the four standard isolation levels, weakest to strongest.","a":"Read uncommitted, read committed, repeatable read, serializable. Postgres defaults to read committed; MySQL InnoDB to repeatable read.","deck":"$5:props:children:1:props:cards:28:deck","index":5},{"id":"6c8e6a1f-abf8-4ab3-8a05-807759eea946","q":"What is a dirty read?","a":"Reading another transaction's uncommitted changes, which may later roll back. Prevented by read committed and above.","deck":"$5:props:children:1:props:cards:28:deck","index":6},{"id":"d24eab5a-c075-44d5-ac85-a09ca3a28336","q":"Non-repeatable read vs phantom read?","a":"Non-repeatable: a row you already read changes between two reads. Phantom: new rows matching your query appear between two reads.","deck":"$5:props:children:1:props:cards:28:deck","index":7},{"id":"0184b182-5a46-46cb-8174-4d46249f086d","q":"How do databases implement atomicity and durability?","a":"The write-ahead log (WAL): changes are appended to a sequential log and fsynced before commit. Crash recovery replays the log — redo committed, undo uncommitted.","deck":"$5:props:children:1:props:cards:28:deck","index":8},{"id":"372a3838-94f9-4381-ab6c-7096b0959e1e","q":"What is MVCC?","a":"Multi-version concurrency control: writers create new row versions instead of overwriting; each transaction reads a consistent snapshot. Readers never block writers.","deck":"$5:props:children:1:props:cards:28:deck","index":9},{"id":"2b6fdefc-99f3-4b1a-9ce5-0f9d9d72f4b1","q":"What is BASE and how does it contrast with ACID?","a":"Basically Available, Soft state, Eventually consistent — the availability-first model of AP systems, trading strict guarantees for uptime and scale.","deck":"$5:props:children:1:props:cards:28:deck","index":10},{"id":"166d2baf-03bc-4afd-8231-ed04bebb7414","q":"Which ACID property is the 'odd one out' and why?","a":"Consistency. A, I, and D are pure database mechanisms; C is a joint responsibility — the application defines what 'valid' means, the database only enforces declared constraints.","deck":"$5:props:children:1:props:cards:28:deck","index":11},{"id":"85c25f28-e385-4524-a070-2a2da625b3dc","q":"What does SOLID stand for, and where does it come from?","a":"Single responsibility, Open-closed, Liskov substitution, Interface segregation, Dependency inversion. Robert C. Martin gathered the five principles around 2000; Michael Feathers rearranged them into the acronym.","deck":{"slug":"solid","name":"SOLID","blurb":"Design principles, and where they cost more than they pay","tint":"#FAD9BE","ink":"#B87A3C","cards":[{"id":"85c25f28-e385-4524-a070-2a2da625b3dc","q":"What does SOLID stand for, and where does it come from?","a":"Single responsibility, Open-closed, Liskov substitution, Interface segregation, Dependency inversion. Robert C. Martin gathered the five principles around 2000; Michael Feathers rearranged them into the acronym."},{"id":"40ac0587-b654-4ec3-88d7-edce72267bc6","q":"State the Single Responsibility Principle. What counts as a 'reason to change'?","a":"A module should have one, and only one, reason to change. Martin later sharpened 'reason' to mean actor - each module should answer to a single stakeholder or business function, not to a single verb."},{"id":"e20990c8-3dfe-4878-b7bb-e4dccacfd831","q":"What does an SRP violation look like in a React codebase?","a":"One component that fetches, transforms, formats and renders, so both an API change and a design change land in the same file. Pull data access into a hook and formatting into pure functions, leaving the component to render."},{"id":"793305cf-5694-4aa1-99ef-0cdb5425c475","q":"State the Open-Closed Principle.","a":"Entities should be open for extension but closed for modification: you add behaviour by adding code, not by editing code that already works and is already tested. Polymorphism and composition are the usual mechanisms."},{"id":"1b9229a1-0681-4758-802a-65a6e7c63718","q":"How would you apply OCP to a switch statement over payment providers that grows every quarter?","a":"Replace the switch with a registry - Record<Provider, Handler> or a strategy interface - so a new provider is a new entry rather than an edit to the dispatcher. The trade-off: you lose the exhaustive never check that forces you to handle each new case."},{"id":"a24980b5-d554-474b-b351-a62bc5b5d173","q":"State the Liskov Substitution Principle.","a":"A subtype must be usable anywhere its supertype is expected without breaking the program's correctness. Subtypes may weaken preconditions and strengthen postconditions, never the other way round."},{"id":"0dd2941c-e9b5-4ff0-b1e4-5820349205f4","q":"Give a classic LSP violation and explain what breaks.","a":"Square extending Rectangle: setting width silently mutates height, so any caller written against Rectangle's contract is wrong. The same smell is a subclass that throws NotSupported on an inherited method."},{"id":"31ae21b5-bcd1-4c17-9f75-d3f057bc9953","q":"How does TypeScript's type system relate to LSP?","a":"TypeScript is structurally typed, so substitutability is judged on shape rather than declared inheritance. Method-shorthand parameters stay bivariant even under strictFunctionTypes - declare them as function properties to get sound, contravariant checks."},{"id":"ed0ffb2a-5de7-4822-9275-7b8c2b89b8d0","q":"State the Interface Segregation Principle.","a":"No client should be forced to depend on methods it does not use. Prefer several small, role-specific interfaces to one fat one, so a change made for one consumer cannot break or rebuild the others."},{"id":"822e3925-cf4a-479a-866a-2acf8ae12cdc","q":"What does ISP look like in a TypeScript React app?","a":"Props typed to exactly what the component reads - Pick<User, 'id' | 'avatarUrl'> rather than the whole User - and one narrow service interface per consumer. Components then compose with partial data and are trivial to test."},{"id":"ac1f8401-feed-4407-9fff-3edfc2074676","q":"State the Dependency Inversion Principle.","a":"High-level policy should not depend on low-level detail; both depend on abstractions, and abstractions do not depend on details. In practice the consumer owns the interface, not the implementation."},{"id":"fedb9bfe-c1d1-4af6-8385-6b00b09ba177","q":"Distinguish DIP, dependency injection, and an IoC container.","a":"DIP is the design principle (depend on abstractions); DI is the technique of passing dependencies in rather than constructing them; an IoC container is tooling that wires DI for you. You can have DI without DIP, and DIP without a container."},{"id":"8167a727-5a80-4044-94dc-f8f75d0b8311","q":"How do you apply DIP in React or Next.js without a DI container?","a":"Pass collaborators in as props, context or arguments - a component takes getUser(): Promise<User> instead of importing fetch or the SDK directly. Tests then hand it a fake, with no module mocking or network interception."},{"id":"508505e2-5112-40bd-8fa1-d383825efcc4","q":"What are the main criticisms of SOLID?","a":"The wording is vague, the principles assume 1990s class-based OO, and they are easy to over-apply into indirection nobody asked for. Dan North's CUPID is one alternative, arguing for properties like composable and predictable over rules."},{"id":"4d7ea4cf-5878-4b62-814e-590112522a64","q":"How do SOLID, cohesion and coupling relate?","a":"SRP and ISP push toward high cohesion; OCP, LSP and DIP push toward loose coupling. Cohesion and coupling are the underlying qualities - SOLID is a set of heuristics for moving them in the right direction."},{"id":"d2bced86-e76a-4dc5-adf3-d4a74fb13c2f","q":"How should a senior engineer talk about SOLID in an interview?","a":"Name the axis of change you are protecting and the price you are paying, because abstraction is not free and premature indirection is its own defect. Apply DIP at a volatile boundary such as a telecom or payments provider, and skip it for a stable one."}]},"index":0},{"id":"40ac0587-b654-4ec3-88d7-edce72267bc6","q":"State the Single Responsibility Principle. What counts as a 'reason to change'?","a":"A module should have one, and only one, reason to change. Martin later sharpened 'reason' to mean actor - each module should answer to a single stakeholder or business function, not to a single verb.","deck":"$5:props:children:1:props:cards:40:deck","index":1},{"id":"e20990c8-3dfe-4878-b7bb-e4dccacfd831","q":"What does an SRP violation look like in a React codebase?","a":"One component that fetches, transforms, formats and renders, so both an API change and a design change land in the same file. Pull data access into a hook and formatting into pure functions, leaving the component to render.","deck":"$5:props:children:1:props:cards:40:deck","index":2},{"id":"793305cf-5694-4aa1-99ef-0cdb5425c475","q":"State the Open-Closed Principle.","a":"Entities should be open for extension but closed for modification: you add behaviour by adding code, not by editing code that already works and is already tested. Polymorphism and composition are the usual mechanisms.","deck":"$5:props:children:1:props:cards:40:deck","index":3},{"id":"1b9229a1-0681-4758-802a-65a6e7c63718","q":"How would you apply OCP to a switch statement over payment providers that grows every quarter?","a":"Replace the switch with a registry - Record<Provider, Handler> or a strategy interface - so a new provider is a new entry rather than an edit to the dispatcher. The trade-off: you lose the exhaustive never check that forces you to handle each new case.","deck":"$5:props:children:1:props:cards:40:deck","index":4},{"id":"a24980b5-d554-474b-b351-a62bc5b5d173","q":"State the Liskov Substitution Principle.","a":"A subtype must be usable anywhere its supertype is expected without breaking the program's correctness. Subtypes may weaken preconditions and strengthen postconditions, never the other way round.","deck":"$5:props:children:1:props:cards:40:deck","index":5},{"id":"0dd2941c-e9b5-4ff0-b1e4-5820349205f4","q":"Give a classic LSP violation and explain what breaks.","a":"Square extending Rectangle: setting width silently mutates height, so any caller written against Rectangle's contract is wrong. The same smell is a subclass that throws NotSupported on an inherited method.","deck":"$5:props:children:1:props:cards:40:deck","index":6},{"id":"31ae21b5-bcd1-4c17-9f75-d3f057bc9953","q":"How does TypeScript's type system relate to LSP?","a":"TypeScript is structurally typed, so substitutability is judged on shape rather than declared inheritance. Method-shorthand parameters stay bivariant even under strictFunctionTypes - declare them as function properties to get sound, contravariant checks.","deck":"$5:props:children:1:props:cards:40:deck","index":7},{"id":"ed0ffb2a-5de7-4822-9275-7b8c2b89b8d0","q":"State the Interface Segregation Principle.","a":"No client should be forced to depend on methods it does not use. Prefer several small, role-specific interfaces to one fat one, so a change made for one consumer cannot break or rebuild the others.","deck":"$5:props:children:1:props:cards:40:deck","index":8},{"id":"822e3925-cf4a-479a-866a-2acf8ae12cdc","q":"What does ISP look like in a TypeScript React app?","a":"Props typed to exactly what the component reads - Pick<User, 'id' | 'avatarUrl'> rather than the whole User - and one narrow service interface per consumer. Components then compose with partial data and are trivial to test.","deck":"$5:props:children:1:props:cards:40:deck","index":9},{"id":"ac1f8401-feed-4407-9fff-3edfc2074676","q":"State the Dependency Inversion Principle.","a":"High-level policy should not depend on low-level detail; both depend on abstractions, and abstractions do not depend on details. In practice the consumer owns the interface, not the implementation.","deck":"$5:props:children:1:props:cards:40:deck","index":10},{"id":"fedb9bfe-c1d1-4af6-8385-6b00b09ba177","q":"Distinguish DIP, dependency injection, and an IoC container.","a":"DIP is the design principle (depend on abstractions); DI is the technique of passing dependencies in rather than constructing them; an IoC container is tooling that wires DI for you. You can have DI without DIP, and DIP without a container.","deck":"$5:props:children:1:props:cards:40:deck","index":11},{"id":"8167a727-5a80-4044-94dc-f8f75d0b8311","q":"How do you apply DIP in React or Next.js without a DI container?","a":"Pass collaborators in as props, context or arguments - a component takes getUser(): Promise<User> instead of importing fetch or the SDK directly. Tests then hand it a fake, with no module mocking or network interception.","deck":"$5:props:children:1:props:cards:40:deck","index":12},{"id":"508505e2-5112-40bd-8fa1-d383825efcc4","q":"What are the main criticisms of SOLID?","a":"The wording is vague, the principles assume 1990s class-based OO, and they are easy to over-apply into indirection nobody asked for. Dan North's CUPID is one alternative, arguing for properties like composable and predictable over rules.","deck":"$5:props:children:1:props:cards:40:deck","index":13},{"id":"4d7ea4cf-5878-4b62-814e-590112522a64","q":"How do SOLID, cohesion and coupling relate?","a":"SRP and ISP push toward high cohesion; OCP, LSP and DIP push toward loose coupling. Cohesion and coupling are the underlying qualities - SOLID is a set of heuristics for moving them in the right direction.","deck":"$5:props:children:1:props:cards:40:deck","index":14},{"id":"d2bced86-e76a-4dc5-adf3-d4a74fb13c2f","q":"How should a senior engineer talk about SOLID in an interview?","a":"Name the axis of change you are protecting and the price you are paying, because abstraction is not free and premature indirection is its own defect. Apply DIP at a volatile boundary such as a telecom or payments provider, and skip it for a stable one.","deck":"$5:props:children:1:props:cards:40:deck","index":15},{"id":"23355e3d-5153-4116-9c83-1d996198f23e","q":"Authentication vs authorization?","a":"Authentication proves who you are; authorization decides what that identity is allowed to do. id: 81fe3a4a-700b-4358-8c01-574deac5cd8a","deck":{"slug":"auth-and-sessions","name":"Auth and sessions","blurb":"Sessions, tokens, OAuth and OTP flows, with the browser details interviewers probe.","tint":"#DFF2CA","ink":"#649B27","cards":[{"id":"23355e3d-5153-4116-9c83-1d996198f23e","q":"Authentication vs authorization?","a":"Authentication proves who you are; authorization decides what that identity is allowed to do. id: 81fe3a4a-700b-4358-8c01-574deac5cd8a"},{"id":"3a349e15-b4b3-46fa-9506-a0e7b3e23d94","q":"Server session vs JWT — what is the real trade-off?","a":"Sessions are revocable but need a lookup; JWTs are stateless but stay valid until they expire. id: 84b9cad0-4dc3-4e3d-8720-47bb2f9b006a"},{"id":"675c8028-4f7a-49a7-911a-d96d71e66c36","q":"How do you revoke a JWT before it expires?","a":"You cannot, directly — keep access tokens short-lived and check a denylist or version claim on refresh. id: 70975e7e-771e-4dca-832e-6dd26745849c"},{"id":"4ce1c41d-7802-4707-8686-11c07db422e3","q":"What cookie flags does a session cookie need?","a":"HttpOnly, Secure, SameSite, a scoped Path and Domain, and an explicit expiry rather than session-only. id: d63bacda-6876-4f72-a21a-a267efef7020"},{"id":"ac66b66d-3562-4b66-a9c4-ce8c8b728387","q":"What does SameSite actually defend against?","a":"Cross-site requests carrying the cookie automatically — Lax blocks most CSRF, Strict breaks inbound links. id: c56bb26f-f307-44c3-8b76-63720198395e"},{"id":"38e946c6-c56e-43df-af40-6f0e02dac6f1","q":"Why store tokens in cookies rather than localStorage?","a":"localStorage is readable by any script, so one XSS leaks the token; HttpOnly cookies are not script-readable. id: db876b62-49ee-46b4-b0d0-2fee41349783"},{"id":"9711a312-895f-4532-9cd6-f15dc368528f","q":"What is refresh token rotation?","a":"Each refresh issues a new token and invalidates the old; reuse of a retired token signals theft and kills the family. id: e476009d-8d58-4c24-b0e8-cd78c080ab98"},{"id":"a0856e99-954f-4a5a-9106-c40635e11dba","q":"Walk the OAuth 2 authorization code flow.","a":"Redirect to the provider, user consents, provider returns a code, server exchanges it for tokens over the back channel. id: b42b98cd-77e7-4d86-917b-ebee857205b2"},{"id":"8e9b0741-5caf-4259-bd41-0b5245d66fad","q":"What is PKCE and who needs it?","a":"A code verifier and challenge binding the exchange to the client — required for public clients like SPAs and mobile. id: 901102c7-6cc3-4c32-8317-ec49a390385b"},{"id":"96c73134-e592-4570-9f5c-60ce26fd1de0","q":"What is the state parameter for?","a":"A random value echoed back on redirect, proving the callback belongs to a flow this browser actually started. id: 1eb5273b-dabb-4d1a-8b74-fb2910376ae8"},{"id":"29c4f18e-d275-4366-9b2a-5d4ae76d74d4","q":"OAuth 2 vs OIDC?","a":"OAuth 2 grants access to resources; OIDC layers identity on top, adding an ID token and a userinfo endpoint. id: 12a76ade-cd0b-4af1-908a-fd58603dcd55"},{"id":"188a2da8-8c9a-4735-beaf-3f880e2248ff","q":"What is an ID token, and how does it differ from an access token?","a":"The ID token describes the user and is for your app; the access token is a credential for calling an API. id: 35f585ef-25e7-4484-9e7a-58bd640531bb"},{"id":"5a935db8-1dab-40ea-acc9-971e59a91c65","q":"How do you validate a JWT properly?","a":"Verify the signature against the provider's JWKS, then check issuer, audience, expiry and algorithm explicitly. id: 01c44f57-d8f7-4f4c-9e92-c279419bd2e5"},{"id":"b78d25d1-4be1-48cc-bdfa-4ea82792c413","q":"Why pin the expected algorithm when verifying?","a":"Otherwise a token can claim alg none or swap RS256 for HS256 and trick the verifier into accepting it. id: 24916417-b1ed-443a-9545-0416e081db29"},{"id":"0f5fc3ab-543a-4748-8dff-5b0e1b68a821","q":"Walk a one-time-code email login flow.","a":"Generate a short code, store its hash with an expiry, email it, verify on submit, then issue a session. id: 5926919e-39ab-4d34-bd15-e363f02b0bb1"},{"id":"dcde578a-e914-4a90-becb-d0b3e64a5c61","q":"How do you keep an OTP flow from being abused?","a":"Hash and single-use the code, cap attempts, rate limit per address and IP, and expire in minutes not hours. id: 5752f871-a440-46c8-a807-a7b54d8b2dce"},{"id":"d70d91d5-cb6d-4225-a8a9-295af9ce41f1","q":"Why do magic links need care in email clients?","a":"Scanners and previews follow links, consuming a single-use token before the user ever clicks it. id: 50428de2-23e6-4073-a07d-21f3cead9d9b"},{"id":"d0640c8e-ab8c-4c0a-aaa9-33fd32479c41","q":"What is session fixation and how do you prevent it?","a":"An attacker plants a known session ID; rotate the session identifier on every privilege change or login. id: c7d14f8a-1ce6-46b0-8c44-bd5796115cdc"},{"id":"8e13dfc4-cd70-45d5-9ca4-de0585d8bf68","q":"How should passwords be stored?","a":"Hashed with a slow, salted algorithm like Argon2 or bcrypt — never encrypted, never a fast general-purpose hash. id: 1501b192-6967-4480-a602-18bbd07924e6"},{"id":"85ead1f5-7c8a-4581-afa3-0ad944f45877","q":"What does the auth boundary look like in Next.js?","a":"Read the session in a Server Component or Server Action; proxy.ts is a coarse gate, not the real authorization check. id: de76d140-eec7-406d-b31e-13dc34f28104"},{"id":"04daaed1-3951-4c6f-8bf3-31c800fc4251","q":"Why is proxy or middleware alone insufficient for authz?","a":"It guards navigation, not data access — every action and route handler must re-check permissions server-side. id: edd7a79b-9d0d-4a55-baae-ab405c8c1c1b"},{"id":"9b646750-93a3-4a9e-800f-437850cd35fd","q":"What is the confused deputy problem here?","a":"A server component fetching on the user's behalf must scope the query to that user, not just to a valid session. id: 5a0e0378-6e69-4b7b-8ed0-53bd152ec5ee"},{"id":"dd7a8e07-e897-4e47-a794-c6172195a51a","q":"How do you handle multi-tenant authorization?","a":"Scope every query by tenant at the data layer, and treat the tenant as part of the identity, not a request parameter. id: 66ec5682-a08a-4063-bcf0-d6f69839e125"},{"id":"a2362acd-f75a-4251-8e49-502f413efa92","q":"Interview one-liner: what is your default auth stance?","a":"Short-lived tokens in HttpOnly cookies, rotation on refresh, and authorization enforced at the data boundary."}]},"index":0},{"id":"3a349e15-b4b3-46fa-9506-a0e7b3e23d94","q":"Server session vs JWT — what is the real trade-off?","a":"Sessions are revocable but need a lookup; JWTs are stateless but stay valid until they expire. id: 84b9cad0-4dc3-4e3d-8720-47bb2f9b006a","deck":"$5:props:children:1:props:cards:56:deck","index":1},{"id":"675c8028-4f7a-49a7-911a-d96d71e66c36","q":"How do you revoke a JWT before it expires?","a":"You cannot, directly — keep access tokens short-lived and check a denylist or version claim on refresh. id: 70975e7e-771e-4dca-832e-6dd26745849c","deck":"$5:props:children:1:props:cards:56:deck","index":2},{"id":"4ce1c41d-7802-4707-8686-11c07db422e3","q":"What cookie flags does a session cookie need?","a":"HttpOnly, Secure, SameSite, a scoped Path and Domain, and an explicit expiry rather than session-only. id: d63bacda-6876-4f72-a21a-a267efef7020","deck":"$5:props:children:1:props:cards:56:deck","index":3},{"id":"ac66b66d-3562-4b66-a9c4-ce8c8b728387","q":"What does SameSite actually defend against?","a":"Cross-site requests carrying the cookie automatically — Lax blocks most CSRF, Strict breaks inbound links. id: c56bb26f-f307-44c3-8b76-63720198395e","deck":"$5:props:children:1:props:cards:56:deck","index":4},{"id":"38e946c6-c56e-43df-af40-6f0e02dac6f1","q":"Why store tokens in cookies rather than localStorage?","a":"localStorage is readable by any script, so one XSS leaks the token; HttpOnly cookies are not script-readable. id: db876b62-49ee-46b4-b0d0-2fee41349783","deck":"$5:props:children:1:props:cards:56:deck","index":5},{"id":"9711a312-895f-4532-9cd6-f15dc368528f","q":"What is refresh token rotation?","a":"Each refresh issues a new token and invalidates the old; reuse of a retired token signals theft and kills the family. id: e476009d-8d58-4c24-b0e8-cd78c080ab98","deck":"$5:props:children:1:props:cards:56:deck","index":6},{"id":"a0856e99-954f-4a5a-9106-c40635e11dba","q":"Walk the OAuth 2 authorization code flow.","a":"Redirect to the provider, user consents, provider returns a code, server exchanges it for tokens over the back channel. id: b42b98cd-77e7-4d86-917b-ebee857205b2","deck":"$5:props:children:1:props:cards:56:deck","index":7},{"id":"8e9b0741-5caf-4259-bd41-0b5245d66fad","q":"What is PKCE and who needs it?","a":"A code verifier and challenge binding the exchange to the client — required for public clients like SPAs and mobile. id: 901102c7-6cc3-4c32-8317-ec49a390385b","deck":"$5:props:children:1:props:cards:56:deck","index":8},{"id":"96c73134-e592-4570-9f5c-60ce26fd1de0","q":"What is the state parameter for?","a":"A random value echoed back on redirect, proving the callback belongs to a flow this browser actually started. id: 1eb5273b-dabb-4d1a-8b74-fb2910376ae8","deck":"$5:props:children:1:props:cards:56:deck","index":9},{"id":"29c4f18e-d275-4366-9b2a-5d4ae76d74d4","q":"OAuth 2 vs OIDC?","a":"OAuth 2 grants access to resources; OIDC layers identity on top, adding an ID token and a userinfo endpoint. id: 12a76ade-cd0b-4af1-908a-fd58603dcd55","deck":"$5:props:children:1:props:cards:56:deck","index":10},{"id":"188a2da8-8c9a-4735-beaf-3f880e2248ff","q":"What is an ID token, and how does it differ from an access token?","a":"The ID token describes the user and is for your app; the access token is a credential for calling an API. id: 35f585ef-25e7-4484-9e7a-58bd640531bb","deck":"$5:props:children:1:props:cards:56:deck","index":11},{"id":"5a935db8-1dab-40ea-acc9-971e59a91c65","q":"How do you validate a JWT properly?","a":"Verify the signature against the provider's JWKS, then check issuer, audience, expiry and algorithm explicitly. id: 01c44f57-d8f7-4f4c-9e92-c279419bd2e5","deck":"$5:props:children:1:props:cards:56:deck","index":12},{"id":"b78d25d1-4be1-48cc-bdfa-4ea82792c413","q":"Why pin the expected algorithm when verifying?","a":"Otherwise a token can claim alg none or swap RS256 for HS256 and trick the verifier into accepting it. id: 24916417-b1ed-443a-9545-0416e081db29","deck":"$5:props:children:1:props:cards:56:deck","index":13},{"id":"0f5fc3ab-543a-4748-8dff-5b0e1b68a821","q":"Walk a one-time-code email login flow.","a":"Generate a short code, store its hash with an expiry, email it, verify on submit, then issue a session. id: 5926919e-39ab-4d34-bd15-e363f02b0bb1","deck":"$5:props:children:1:props:cards:56:deck","index":14},{"id":"dcde578a-e914-4a90-becb-d0b3e64a5c61","q":"How do you keep an OTP flow from being abused?","a":"Hash and single-use the code, cap attempts, rate limit per address and IP, and expire in minutes not hours. id: 5752f871-a440-46c8-a807-a7b54d8b2dce","deck":"$5:props:children:1:props:cards:56:deck","index":15},{"id":"d70d91d5-cb6d-4225-a8a9-295af9ce41f1","q":"Why do magic links need care in email clients?","a":"Scanners and previews follow links, consuming a single-use token before the user ever clicks it. id: 50428de2-23e6-4073-a07d-21f3cead9d9b","deck":"$5:props:children:1:props:cards:56:deck","index":16},{"id":"d0640c8e-ab8c-4c0a-aaa9-33fd32479c41","q":"What is session fixation and how do you prevent it?","a":"An attacker plants a known session ID; rotate the session identifier on every privilege change or login. id: c7d14f8a-1ce6-46b0-8c44-bd5796115cdc","deck":"$5:props:children:1:props:cards:56:deck","index":17},{"id":"8e13dfc4-cd70-45d5-9ca4-de0585d8bf68","q":"How should passwords be stored?","a":"Hashed with a slow, salted algorithm like Argon2 or bcrypt — never encrypted, never a fast general-purpose hash. id: 1501b192-6967-4480-a602-18bbd07924e6","deck":"$5:props:children:1:props:cards:56:deck","index":18},{"id":"85ead1f5-7c8a-4581-afa3-0ad944f45877","q":"What does the auth boundary look like in Next.js?","a":"Read the session in a Server Component or Server Action; proxy.ts is a coarse gate, not the real authorization check. id: de76d140-eec7-406d-b31e-13dc34f28104","deck":"$5:props:children:1:props:cards:56:deck","index":19},{"id":"04daaed1-3951-4c6f-8bf3-31c800fc4251","q":"Why is proxy or middleware alone insufficient for authz?","a":"It guards navigation, not data access — every action and route handler must re-check permissions server-side. id: edd7a79b-9d0d-4a55-baae-ab405c8c1c1b","deck":"$5:props:children:1:props:cards:56:deck","index":20},{"id":"9b646750-93a3-4a9e-800f-437850cd35fd","q":"What is the confused deputy problem here?","a":"A server component fetching on the user's behalf must scope the query to that user, not just to a valid session. id: 5a0e0378-6e69-4b7b-8ed0-53bd152ec5ee","deck":"$5:props:children:1:props:cards:56:deck","index":21},{"id":"dd7a8e07-e897-4e47-a794-c6172195a51a","q":"How do you handle multi-tenant authorization?","a":"Scope every query by tenant at the data layer, and treat the tenant as part of the identity, not a request parameter. id: 66ec5682-a08a-4063-bcf0-d6f69839e125","deck":"$5:props:children:1:props:cards:56:deck","index":22},{"id":"a2362acd-f75a-4251-8e49-502f413efa92","q":"Interview one-liner: what is your default auth stance?","a":"Short-lived tokens in HttpOnly cookies, rotation on refresh, and authorization enforced at the data boundary.","deck":"$5:props:children:1:props:cards:56:deck","index":23},{"id":"5681e508-a033-4cc9-8348-5db28ba40584","q":"What does idempotent mean for an API?","a":"Repeating the same request produces the same result and no extra side effects beyond the first successful call. id: 143cacbe-7300-479b-be28-72d3f55f3501","deck":{"slug":"idempotency-retries-and-webhooks","name":"Idempotency, retries and webhooks","blurb":"Safe repeats, at-least-once delivery, and the patterns that keep money and SIMs consistent.","tint":"#CAE4F2","ink":"#27729B","cards":[{"id":"5681e508-a033-4cc9-8348-5db28ba40584","q":"What does idempotent mean for an API?","a":"Repeating the same request produces the same result and no extra side effects beyond the first successful call. id: 143cacbe-7300-479b-be28-72d3f55f3501"},{"id":"bdd105e2-32e3-4089-b989-39f96ad17fde","q":"Which HTTP methods are idempotent by definition?","a":"GET, PUT and DELETE. POST is not, which is why create endpoints need explicit idempotency keys. id: 94db9390-aecb-4970-b05d-acc074459348"},{"id":"d7f2af1e-2e85-46ba-babe-bcd84deda6bd","q":"What is an idempotency key?","a":"A client-generated unique value sent with a request so the server can recognise and replay a retried call. id: def2748e-452c-4e9d-8c26-986186ba1147"},{"id":"ac63a2e3-6b3d-408c-a214-1c899531ccc8","q":"How does a server implement idempotency keys?","a":"Store key, request fingerprint and response; on a repeat, return the stored response instead of re-executing. id: e8c0fb7b-f87b-4f4f-a7b1-9db7eb935b6e"},{"id":"4c8cc33a-4f06-4b7b-802d-4e2c5663a070","q":"Why store a hash of the request body alongside the key?","a":"To reject a key reused with different parameters, which signals a client bug rather than a genuine retry. id: 9d1295d2-e071-4616-a919-edbe28217b31"},{"id":"39e9bd92-3291-45a7-be50-424407d30a06","q":"How long should idempotency records be kept?","a":"Long enough to cover realistic retries — commonly 24 hours — then expired to bound storage growth. id: f9876d5c-ae49-49e4-94a3-f5143ae782bc"},{"id":"5fe51346-6a4f-437b-8dfb-2d881de2cc26","q":"What happens when two identical requests race?","a":"The second must block or fail fast; a unique constraint on the key is what actually enforces exactly-one execution. id: b865ea6d-4e98-4f4d-be41-6d591ad86a3a"},{"id":"1852fe13-827f-4991-994f-44179bd7a5c7","q":"Why is exponential backoff with jitter the standard retry policy?","a":"Backoff stops retries amplifying an outage; jitter stops every client retrying in the same synchronised wave. id: 5a9cd35f-8143-4691-9ad7-b4841bd3f2cc"},{"id":"4e69c356-4aaf-41f6-95b8-e6b8113fdcd2","q":"Which failures should you not retry?","a":"4xx client errors other than 429 — the request is wrong, so retrying just burns quota and hides the bug. id: daff6172-9fed-4c41-a7c5-0c04fd0f29c3"},{"id":"371b50f8-a0b9-4fbd-b646-d34e072177dc","q":"What is the thundering herd problem in retries?","a":"A downstream recovers and every waiting client retries at once, knocking it straight back over. id: 5cf72589-2777-4bc5-921a-6e9a1033f52a"},{"id":"3c9d7130-2e72-466b-a822-4de34edda9f8","q":"What does a circuit breaker do?","a":"After repeated failures it stops calling a dependency for a cooldown, then lets a trial request test recovery. id: 1bd72dd9-b44b-403f-ab4e-c82818743b25"},{"id":"1d097be3-0359-4451-852a-73d06cad5ca8","q":"Why do webhooks use at-least-once delivery?","a":"The sender cannot know whether a lost response means the receiver processed the event, so it retries and may duplicate. id: f4d741c9-8179-40b3-8339-0a4f12d82561"},{"id":"8a285cbb-5f45-4767-b3c4-b9ce1ed78976","q":"How should a webhook consumer handle duplicates?","a":"Treat the event ID as an idempotency key and record processed IDs, so replays are recognised and dropped. id: 397f95d2-7394-4345-9955-2fa1330b5506"},{"id":"2c96037c-0e62-4cf8-b489-6766a7357a23","q":"How are webhooks authenticated?","a":"An HMAC signature over the raw body with a shared secret, verified before parsing and in constant time. id: f476c29d-16f6-4dae-8e33-e59dfaeaad04"},{"id":"81be7fd2-fff4-4793-bd51-f208cbaf214a","q":"Why must you verify the signature on the raw body?","a":"Parsing and re-serialising changes bytes, so the computed HMAC no longer matches the sender's. id: c2cd13b2-bc7d-4a7d-a0ce-0c7259c1ab21"},{"id":"462f3557-b1e1-48b5-81a0-f6f1f0ee6898","q":"How do you prevent webhook replay attacks?","a":"Include a timestamp in the signed payload, reject anything outside a short window, and dedupe on event ID. id: c0c42862-c9aa-47f5-b03b-735a0ae43c70"},{"id":"25df4e3f-450c-4762-908e-ca500e80ad51","q":"Why should a webhook handler return 200 immediately?","a":"Acknowledge, enqueue, then process asynchronously — slow handlers cause sender timeouts and needless retries. id: a56aa4f6-1839-4be8-9978-96c0612991de"},{"id":"1f6af375-b06a-4de5-a228-7988b1a1b092","q":"Can webhook events arrive out of order?","a":"Yes. Carry a version or sequence number per resource and ignore an event older than the state you already hold. id: 9a699e97-94e3-45df-afad-1a939ea041bd"},{"id":"f8b90e13-ee94-43a4-962e-1f710d4aaf7c","q":"What is the dual-write problem?","a":"Committing to your database and publishing an event are separate operations; a crash between them loses one. id: fda784b2-2b0e-4243-bfee-5ded27c42995"},{"id":"d193a86f-f6b2-4812-ad2d-62fd293b30b4","q":"What is the transactional outbox pattern?","a":"Write the event to an outbox table in the same transaction, then a relay publishes it after commit. id: 2cd904d4-318d-4de1-87d1-136e0e1ab1c9"},{"id":"454c1e5f-6e18-4dae-b1c9-5a4c631cedc1","q":"What is a dead letter queue for?","a":"Parking messages that failed every retry, so the pipeline keeps moving and failures can be inspected later. id: 5a15d923-95c3-403b-9779-0c4f4fcceecc"},{"id":"ab36a440-83b6-4c69-82e2-ce1e3e92643b","q":"What is a poison message?","a":"One that fails deterministically every time — retrying it forever blocks the queue, so it belongs in the DLQ. id: 43d49e2b-7bc5-4b9f-89f4-0e9023e2d82a"},{"id":"2278d1b1-f601-4894-8caa-71a61d518201","q":"Why is exactly-once delivery a myth in practice?","a":"You get at-least-once delivery plus idempotent processing, which yields exactly-once effects. id: 485b2414-c07f-4702-8f2a-f1213e5cec61"},{"id":"16cfe12e-700c-4115-baab-57eab093117f","q":"Interview one-liner: how do you make a payment or provisioning flow safe under retries?","a":"Idempotency key at the edge, outbox for events, dedupe by event ID at the consumer, DLQ for what still fails."}]},"index":0},{"id":"bdd105e2-32e3-4089-b989-39f96ad17fde","q":"Which HTTP methods are idempotent by definition?","a":"GET, PUT and DELETE. POST is not, which is why create endpoints need explicit idempotency keys. id: 94db9390-aecb-4970-b05d-acc074459348","deck":"$5:props:children:1:props:cards:80:deck","index":1},{"id":"d7f2af1e-2e85-46ba-babe-bcd84deda6bd","q":"What is an idempotency key?","a":"A client-generated unique value sent with a request so the server can recognise and replay a retried call. id: def2748e-452c-4e9d-8c26-986186ba1147","deck":"$5:props:children:1:props:cards:80:deck","index":2},{"id":"ac63a2e3-6b3d-408c-a214-1c899531ccc8","q":"How does a server implement idempotency keys?","a":"Store key, request fingerprint and response; on a repeat, return the stored response instead of re-executing. id: e8c0fb7b-f87b-4f4f-a7b1-9db7eb935b6e","deck":"$5:props:children:1:props:cards:80:deck","index":3},{"id":"4c8cc33a-4f06-4b7b-802d-4e2c5663a070","q":"Why store a hash of the request body alongside the key?","a":"To reject a key reused with different parameters, which signals a client bug rather than a genuine retry. id: 9d1295d2-e071-4616-a919-edbe28217b31","deck":"$5:props:children:1:props:cards:80:deck","index":4},{"id":"39e9bd92-3291-45a7-be50-424407d30a06","q":"How long should idempotency records be kept?","a":"Long enough to cover realistic retries — commonly 24 hours — then expired to bound storage growth. id: f9876d5c-ae49-49e4-94a3-f5143ae782bc","deck":"$5:props:children:1:props:cards:80:deck","index":5},{"id":"5fe51346-6a4f-437b-8dfb-2d881de2cc26","q":"What happens when two identical requests race?","a":"The second must block or fail fast; a unique constraint on the key is what actually enforces exactly-one execution. id: b865ea6d-4e98-4f4d-be41-6d591ad86a3a","deck":"$5:props:children:1:props:cards:80:deck","index":6},{"id":"1852fe13-827f-4991-994f-44179bd7a5c7","q":"Why is exponential backoff with jitter the standard retry policy?","a":"Backoff stops retries amplifying an outage; jitter stops every client retrying in the same synchronised wave. id: 5a9cd35f-8143-4691-9ad7-b4841bd3f2cc","deck":"$5:props:children:1:props:cards:80:deck","index":7},{"id":"4e69c356-4aaf-41f6-95b8-e6b8113fdcd2","q":"Which failures should you not retry?","a":"4xx client errors other than 429 — the request is wrong, so retrying just burns quota and hides the bug. id: daff6172-9fed-4c41-a7c5-0c04fd0f29c3","deck":"$5:props:children:1:props:cards:80:deck","index":8},{"id":"371b50f8-a0b9-4fbd-b646-d34e072177dc","q":"What is the thundering herd problem in retries?","a":"A downstream recovers and every waiting client retries at once, knocking it straight back over. id: 5cf72589-2777-4bc5-921a-6e9a1033f52a","deck":"$5:props:children:1:props:cards:80:deck","index":9},{"id":"3c9d7130-2e72-466b-a822-4de34edda9f8","q":"What does a circuit breaker do?","a":"After repeated failures it stops calling a dependency for a cooldown, then lets a trial request test recovery. id: 1bd72dd9-b44b-403f-ab4e-c82818743b25","deck":"$5:props:children:1:props:cards:80:deck","index":10},{"id":"1d097be3-0359-4451-852a-73d06cad5ca8","q":"Why do webhooks use at-least-once delivery?","a":"The sender cannot know whether a lost response means the receiver processed the event, so it retries and may duplicate. id: f4d741c9-8179-40b3-8339-0a4f12d82561","deck":"$5:props:children:1:props:cards:80:deck","index":11},{"id":"8a285cbb-5f45-4767-b3c4-b9ce1ed78976","q":"How should a webhook consumer handle duplicates?","a":"Treat the event ID as an idempotency key and record processed IDs, so replays are recognised and dropped. id: 397f95d2-7394-4345-9955-2fa1330b5506","deck":"$5:props:children:1:props:cards:80:deck","index":12},{"id":"2c96037c-0e62-4cf8-b489-6766a7357a23","q":"How are webhooks authenticated?","a":"An HMAC signature over the raw body with a shared secret, verified before parsing and in constant time. id: f476c29d-16f6-4dae-8e33-e59dfaeaad04","deck":"$5:props:children:1:props:cards:80:deck","index":13},{"id":"81be7fd2-fff4-4793-bd51-f208cbaf214a","q":"Why must you verify the signature on the raw body?","a":"Parsing and re-serialising changes bytes, so the computed HMAC no longer matches the sender's. id: c2cd13b2-bc7d-4a7d-a0ce-0c7259c1ab21","deck":"$5:props:children:1:props:cards:80:deck","index":14},{"id":"462f3557-b1e1-48b5-81a0-f6f1f0ee6898","q":"How do you prevent webhook replay attacks?","a":"Include a timestamp in the signed payload, reject anything outside a short window, and dedupe on event ID. id: c0c42862-c9aa-47f5-b03b-735a0ae43c70","deck":"$5:props:children:1:props:cards:80:deck","index":15},{"id":"25df4e3f-450c-4762-908e-ca500e80ad51","q":"Why should a webhook handler return 200 immediately?","a":"Acknowledge, enqueue, then process asynchronously — slow handlers cause sender timeouts and needless retries. id: a56aa4f6-1839-4be8-9978-96c0612991de","deck":"$5:props:children:1:props:cards:80:deck","index":16},{"id":"1f6af375-b06a-4de5-a228-7988b1a1b092","q":"Can webhook events arrive out of order?","a":"Yes. Carry a version or sequence number per resource and ignore an event older than the state you already hold. id: 9a699e97-94e3-45df-afad-1a939ea041bd","deck":"$5:props:children:1:props:cards:80:deck","index":17},{"id":"f8b90e13-ee94-43a4-962e-1f710d4aaf7c","q":"What is the dual-write problem?","a":"Committing to your database and publishing an event are separate operations; a crash between them loses one. id: fda784b2-2b0e-4243-bfee-5ded27c42995","deck":"$5:props:children:1:props:cards:80:deck","index":18},{"id":"d193a86f-f6b2-4812-ad2d-62fd293b30b4","q":"What is the transactional outbox pattern?","a":"Write the event to an outbox table in the same transaction, then a relay publishes it after commit. id: 2cd904d4-318d-4de1-87d1-136e0e1ab1c9","deck":"$5:props:children:1:props:cards:80:deck","index":19},{"id":"454c1e5f-6e18-4dae-b1c9-5a4c631cedc1","q":"What is a dead letter queue for?","a":"Parking messages that failed every retry, so the pipeline keeps moving and failures can be inspected later. id: 5a15d923-95c3-403b-9779-0c4f4fcceecc","deck":"$5:props:children:1:props:cards:80:deck","index":20},{"id":"ab36a440-83b6-4c69-82e2-ce1e3e92643b","q":"What is a poison message?","a":"One that fails deterministically every time — retrying it forever blocks the queue, so it belongs in the DLQ. id: 43d49e2b-7bc5-4b9f-89f4-0e9023e2d82a","deck":"$5:props:children:1:props:cards:80:deck","index":21},{"id":"2278d1b1-f601-4894-8caa-71a61d518201","q":"Why is exactly-once delivery a myth in practice?","a":"You get at-least-once delivery plus idempotent processing, which yields exactly-once effects. id: 485b2414-c07f-4702-8f2a-f1213e5cec61","deck":"$5:props:children:1:props:cards:80:deck","index":22},{"id":"16cfe12e-700c-4115-baab-57eab093117f","q":"Interview one-liner: how do you make a payment or provisioning flow safe under retries?","a":"Idempotency key at the edge, outbox for events, dedupe by event ID at the consumer, DLQ for what still fails.","deck":"$5:props:children:1:props:cards:80:deck","index":23},{"id":"cb1abdcb-4aee-4c95-99ef-cede9bd2e6e5","q":"What is Kafka, in one line?","a":"A distributed event streaming platform - a durable, partitioned, append-only commit log usable as either a message queue or a stream. id: ef4fcf93-ad99-41d0-96eb-07d5f7343518","deck":{"slug":"kafka","name":"Kafka","blurb":"Partitions, consumer groups, and what to say in the interview","tint":"#F0CAF2","ink":"#95279B","cards":[{"id":"cb1abdcb-4aee-4c95-99ef-cede9bd2e6e5","q":"What is Kafka, in one line?","a":"A distributed event streaming platform - a durable, partitioned, append-only commit log usable as either a message queue or a stream. id: ef4fcf93-ad99-41d0-96eb-07d5f7343518"},{"id":"05661cc8-6421-4e40-9cb7-97d941ba5d34","q":"Define broker, partition and topic.","a":"A broker is a server in the cluster. A partition is an ordered, immutable, append-only log on a broker. A topic is a logical grouping of partitions. id: 8271ae2f-f90f-435e-a468-2fc34531cb64"},{"id":"4ad91798-3f09-48ec-b8a9-0d94023a2f53","q":"Topic vs partition - the actual difference?","a":"A topic is a logical grouping; a partition is the physical one. Partitions are the unit of parallelism and the only place ordering is guaranteed. id: afe12183-dcaf-40d6-800c-74654f19c720"},{"id":"8da56c70-8f91-4cde-a58f-398d5b3121d7","q":"What are the fields of a Kafka message?","a":"Value (payload), key, timestamp and headers - all technically optional. Headers are key-value metadata, like HTTP headers. id: a4a48271-4068-4b53-ba64-e6dfd7d6b633"},{"id":"cb23f290-383c-43bc-ab61-fbfc678f9ba4","q":"What does the message key do, and what if you omit it?","a":"It is hashed to pick the partition, so equal keys stay together and stay ordered. With no key, modern clients use a sticky partitioner and you lose related-message ordering. id: a86b124b-728c-4edf-b163-1cc642c93b78"},{"id":"11903748-b166-4ad2-8552-e0a76ac44257","q":"What is an offset?","a":"A sequential ID marking a message's position within a partition. Consumers commit offsets so they can resume where they left off after a restart. id: 8a2d7768-62e9-429f-9ba3-2d76ff4e9fe2"},{"id":"81afa632-4674-4751-9fac-f8224a917aeb","q":"What is a consumer group and what does it guarantee?","a":"Consumers sharing a topic's partitions - each partition goes to exactly one consumer in the group. Separate groups read the same topic independently. id: 61dcc3d1-2774-4860-86ff-b8e0367f1445"},{"id":"9e391eb0-8361-4948-aee7-0d5d7385e24c","q":"Kafka as a message queue vs as a stream?","a":"Same mechanics, different consumption pattern: a queue has one consumer per message; a stream retains the log for replay and multiple independent groups. id: 7fa0f7f4-9e5d-45dd-b961-a3a02d99ffc3"},{"id":"6087092b-fadb-45ed-9370-7e232e9bd3c4","q":"What two steps happen when a producer publishes?","a":"Partition determination (hash the key, or default partitioner), then broker assignment - the client uses cluster metadata to reach that partition's leader. id: 40a7e1f8-7363-4df3-837d-6b2591ca6669"},{"id":"254c6849-48e1-41d8-bb1e-3c0f391c3495","q":"Why is an append-only log the right structure?","a":"Immutability simplifies replication and recovery, appending avoids disk seeks, and the simplicity makes scaling by adding partitions straightforward. id: f23f1aaa-a870-4d52-b50b-cf4a809bc7ee"},{"id":"dd8e552c-7270-4f8f-9315-790b8dc66468","q":"How does Kafka replicate a partition?","a":"Leader-follower: one replica takes writes, followers on other brokers sync passively. The controller promotes an in-sync follower when a leader dies. id: 84f9936f-ec3d-4568-b570-1094042de155"},{"id":"8b8d6ca0-cd3f-4239-a88a-1e85239e13a1","q":"What is the ISR, and what does acks=all buy you?","a":"In-sync replicas are the followers fully caught up. acks=all acknowledges only once every ISR has the message - strongest durability, at the cost of latency. id: bc17a2c4-9c7a-4bd0-af19-a0318f321fe4"},{"id":"a1a01924-99ff-4a1e-a7a2-487a8b167be9","q":"Watch-outs when using Kafka from a Node/Next.js app?","a":"Clients hold long-lived connections and group membership, which fits badly with serverless handlers. Run producers and consumers in a persistent process or behind a REST proxy. id: eaa802a0-ecf2-48c3-878f-536ef669f2d0"},{"id":"3cd92559-e418-43f1-8ccf-cb2151d7bf74","q":"Do consumers push or pull? Why?","a":"Pull - consumers poll at their own rate. Slow consumers self-limit, failure handling is simpler, and batching becomes efficient. id: 25751c6d-d9c6-4617-8089-56c82fb883b8"},{"id":"da08b2ae-a98b-4e19-af07-8f1bac41ffcc","q":"What ordering guarantee does Kafka actually give?","a":"Ordering within a partition only, by offset - not by timestamp, not across a topic. Global ordering means one partition, which means no parallelism. id: d1d67056-53a0-446c-b8c4-d7cae26371bb"},{"id":"cc2ca34a-515b-4282-aaa7-c87661c81f6a","q":"Default delivery semantics, and how do you get exactly-once?","a":"At-least-once by default. Exactly-once needs idempotent producers plus the transactional API - usually better to assume duplicates and make consumers idempotent. id: 1d36be4b-d5d6-4716-9f4d-9fd635bae586"},{"id":"7e518842-8fda-4bcb-8ca4-24ca7434bc5a","q":"What happens when a consumer crashes?","a":"It resumes from its last committed offset on restart, and the group rebalances so remaining consumers pick up the orphaned partitions. Nothing is missed; some work is redone. id: 7434e18b-9e0a-44c9-a68f-a707c11fcd85"},{"id":"990cb464-dc3f-45f1-9f78-2cc0cd4a2dff","q":"When should you commit the offset?","a":"Only after the work is durably done, or you silently drop messages. The more a consumer does per message, the more is redone on failure - so keep consumers small. id: 25a97ecf-42e8-4aa8-ba63-c8a7312b33f2"},{"id":"54fe5636-ce58-433d-a77e-ff905beb7d11","q":"How do producer retries work, and what is the gotcha?","a":"Producers retry transient failures automatically. Enable idempotent mode alongside retries, or a retried send that actually succeeded becomes a duplicate. id: 974896ab-58b4-4b7e-868f-3a94f0640776"},{"id":"965f9e85-6210-43b7-9628-d232148919ba","q":"What does Kafka give you for consumer-side retries?","a":"Nothing built in, unlike SQS. The pattern is a retry topic consumed separately, then a dead letter queue after N failures - a fair reason to pick SQS for simple worker queues. id: 6e26d304-6252-4cb5-b713-e5e8f6e1ea39"},{"id":"39bc2380-89be-4c00-97fb-22ff0f7ba361","q":"Rough single-broker capacity for back-of-envelope maths?","a":"Very hand-wavy, but ~1TB storage and up to ~1M messages/sec on good hardware, with messages under ~1MB. Below that, scaling is not the conversation. id: 4c7af18c-4472-466b-aad2-92d49311db66"},{"id":"163feeaa-b7bd-41d0-afb8-6dba8b0e7387","q":"Two ways to scale Kafka.","a":"Add brokers, and partition properly. Brokers alone do nothing if topics are under-partitioned - scale the topic, not just the cluster. id: 4305bd52-29cc-4a84-8e67-d74b43e45950"},{"id":"af015ce1-063a-41ba-8ae5-ee56a6fc3a36","q":"How is a partition chosen from a key?","a":"partition = hash(key) % num_partitions, murmur2 by default. Changing the partition count therefore reshuffles which partition a key maps to. id: b05959f5-ad81-46ec-b997-c665ee61b229"},{"id":"e6686e7e-1829-450e-b7fe-dc0ab481e8df","q":"Four ways to fix a hot partition.","a":"Drop the key and spread load (losing ordering); salt the key with a random suffix; use a compound key such as ad ID + region; or apply back pressure and slow the producer. id: f79a2b13-9898-48bb-aef9-9f5bcb2398d3"},{"id":"4a2b8190-524d-477f-9601-08d87f2c12d8","q":"Why are large payloads an anti-pattern, and what instead?","a":"Kafka is not a blob store - big messages hurt memory and network throughput. Write the object to S3 and put a pointer in the message: the claim-check pattern. id: acac941e-5132-4c0d-a306-4a1484d3376a"},{"id":"a633ee47-f991-45a7-a2d2-acb63ec1f5fc","q":"How does retention work, and what is log compaction?","a":"Messages expire by retention.ms (7 days default) or retention.bytes. Compaction instead keeps the latest value per key forever, making the topic a replayable snapshot. id: 33a07f7c-24c1-4f16-b95f-a99ed03fad62"},{"id":"9064494c-eb96-4715-a7eb-71420b4603a4","q":"What is KRaft?","a":"Kafka's own Raft-based metadata quorum, replacing ZooKeeper. Production-ready since 3.3 and ZooKeeper was removed entirely in Kafka 4.0. id: ea87c892-b2df-4b07-a241-6afd1ffa6504"},{"id":"9e38e65c-327e-454b-8f96-ab764c1297fa","q":"What is tiered storage (KIP-405)?","a":"Brokers keep recent segments on local disk and offload older ones to object storage, so retention is no longer bounded by broker disk. GA in Kafka 3.9. id: db5ee616-49de-45f0-af4d-07993250f9f4"},{"id":"0ccdddef-8d54-4b38-b5d3-7d4926c594f6","q":"Two producer-side performance levers?","a":"Batching (group records per send to amortise network overhead) and compression (GZIP, Snappy, LZ4). Both trade a little latency for a lot of throughput. id: 67758d0f-5870-4df6-b488-0094605ddd6a"},{"id":"98838250-cf02-4289-a3af-85b91c8c8150","q":"When do you reach for Kafka as a queue in an interview?","a":"Asynchronous work such as transcoding after upload, work that must stay ordered such as a waiting queue, or when producer and consumer must scale independently. id: b532cdc5-dd3d-4fe5-869d-4b4360ea00c4"},{"id":"b5eee806-1f3f-4222-b63c-42353d287a1e","q":"When do you reach for it as a stream?","a":"Continuous real-time processing, such as aggregating ad clicks as they arrive, or fan-out where many independent consumers need the same messages. id: 161ffec7-8ec2-4585-8199-5d9bb3b70f79"},{"id":"66230d2d-7ac9-4dc0-bcdf-1d221ee711c9","q":"\"Always available, sometimes consistent\" - so what?","a":"Replication and leader failover make cluster-wide outage an unrealistic premise; redirect the question. The interesting failure is a consumer dying."}]},"index":0},{"id":"05661cc8-6421-4e40-9cb7-97d941ba5d34","q":"Define broker, partition and topic.","a":"A broker is a server in the cluster. A partition is an ordered, immutable, append-only log on a broker. A topic is a logical grouping of partitions. id: 8271ae2f-f90f-435e-a468-2fc34531cb64","deck":"$5:props:children:1:props:cards:104:deck","index":1},{"id":"4ad91798-3f09-48ec-b8a9-0d94023a2f53","q":"Topic vs partition - the actual difference?","a":"A topic is a logical grouping; a partition is the physical one. Partitions are the unit of parallelism and the only place ordering is guaranteed. id: afe12183-dcaf-40d6-800c-74654f19c720","deck":"$5:props:children:1:props:cards:104:deck","index":2},{"id":"8da56c70-8f91-4cde-a58f-398d5b3121d7","q":"What are the fields of a Kafka message?","a":"Value (payload), key, timestamp and headers - all technically optional. Headers are key-value metadata, like HTTP headers. id: a4a48271-4068-4b53-ba64-e6dfd7d6b633","deck":"$5:props:children:1:props:cards:104:deck","index":3},{"id":"cb23f290-383c-43bc-ab61-fbfc678f9ba4","q":"What does the message key do, and what if you omit it?","a":"It is hashed to pick the partition, so equal keys stay together and stay ordered. With no key, modern clients use a sticky partitioner and you lose related-message ordering. id: a86b124b-728c-4edf-b163-1cc642c93b78","deck":"$5:props:children:1:props:cards:104:deck","index":4},{"id":"11903748-b166-4ad2-8552-e0a76ac44257","q":"What is an offset?","a":"A sequential ID marking a message's position within a partition. Consumers commit offsets so they can resume where they left off after a restart. id: 8a2d7768-62e9-429f-9ba3-2d76ff4e9fe2","deck":"$5:props:children:1:props:cards:104:deck","index":5},{"id":"81afa632-4674-4751-9fac-f8224a917aeb","q":"What is a consumer group and what does it guarantee?","a":"Consumers sharing a topic's partitions - each partition goes to exactly one consumer in the group. Separate groups read the same topic independently. id: 61dcc3d1-2774-4860-86ff-b8e0367f1445","deck":"$5:props:children:1:props:cards:104:deck","index":6},{"id":"9e391eb0-8361-4948-aee7-0d5d7385e24c","q":"Kafka as a message queue vs as a stream?","a":"Same mechanics, different consumption pattern: a queue has one consumer per message; a stream retains the log for replay and multiple independent groups. id: 7fa0f7f4-9e5d-45dd-b961-a3a02d99ffc3","deck":"$5:props:children:1:props:cards:104:deck","index":7},{"id":"6087092b-fadb-45ed-9370-7e232e9bd3c4","q":"What two steps happen when a producer publishes?","a":"Partition determination (hash the key, or default partitioner), then broker assignment - the client uses cluster metadata to reach that partition's leader. id: 40a7e1f8-7363-4df3-837d-6b2591ca6669","deck":"$5:props:children:1:props:cards:104:deck","index":8},{"id":"254c6849-48e1-41d8-bb1e-3c0f391c3495","q":"Why is an append-only log the right structure?","a":"Immutability simplifies replication and recovery, appending avoids disk seeks, and the simplicity makes scaling by adding partitions straightforward. id: f23f1aaa-a870-4d52-b50b-cf4a809bc7ee","deck":"$5:props:children:1:props:cards:104:deck","index":9},{"id":"dd8e552c-7270-4f8f-9315-790b8dc66468","q":"How does Kafka replicate a partition?","a":"Leader-follower: one replica takes writes, followers on other brokers sync passively. The controller promotes an in-sync follower when a leader dies. id: 84f9936f-ec3d-4568-b570-1094042de155","deck":"$5:props:children:1:props:cards:104:deck","index":10},{"id":"8b8d6ca0-cd3f-4239-a88a-1e85239e13a1","q":"What is the ISR, and what does acks=all buy you?","a":"In-sync replicas are the followers fully caught up. acks=all acknowledges only once every ISR has the message - strongest durability, at the cost of latency. id: bc17a2c4-9c7a-4bd0-af19-a0318f321fe4","deck":"$5:props:children:1:props:cards:104:deck","index":11},{"id":"a1a01924-99ff-4a1e-a7a2-487a8b167be9","q":"Watch-outs when using Kafka from a Node/Next.js app?","a":"Clients hold long-lived connections and group membership, which fits badly with serverless handlers. Run producers and consumers in a persistent process or behind a REST proxy. id: eaa802a0-ecf2-48c3-878f-536ef669f2d0","deck":"$5:props:children:1:props:cards:104:deck","index":12},{"id":"3cd92559-e418-43f1-8ccf-cb2151d7bf74","q":"Do consumers push or pull? Why?","a":"Pull - consumers poll at their own rate. Slow consumers self-limit, failure handling is simpler, and batching becomes efficient. id: 25751c6d-d9c6-4617-8089-56c82fb883b8","deck":"$5:props:children:1:props:cards:104:deck","index":13},{"id":"da08b2ae-a98b-4e19-af07-8f1bac41ffcc","q":"What ordering guarantee does Kafka actually give?","a":"Ordering within a partition only, by offset - not by timestamp, not across a topic. Global ordering means one partition, which means no parallelism. id: d1d67056-53a0-446c-b8c4-d7cae26371bb","deck":"$5:props:children:1:props:cards:104:deck","index":14},{"id":"cc2ca34a-515b-4282-aaa7-c87661c81f6a","q":"Default delivery semantics, and how do you get exactly-once?","a":"At-least-once by default. Exactly-once needs idempotent producers plus the transactional API - usually better to assume duplicates and make consumers idempotent. id: 1d36be4b-d5d6-4716-9f4d-9fd635bae586","deck":"$5:props:children:1:props:cards:104:deck","index":15},{"id":"7e518842-8fda-4bcb-8ca4-24ca7434bc5a","q":"What happens when a consumer crashes?","a":"It resumes from its last committed offset on restart, and the group rebalances so remaining consumers pick up the orphaned partitions. Nothing is missed; some work is redone. id: 7434e18b-9e0a-44c9-a68f-a707c11fcd85","deck":"$5:props:children:1:props:cards:104:deck","index":16},{"id":"990cb464-dc3f-45f1-9f78-2cc0cd4a2dff","q":"When should you commit the offset?","a":"Only after the work is durably done, or you silently drop messages. The more a consumer does per message, the more is redone on failure - so keep consumers small. id: 25a97ecf-42e8-4aa8-ba63-c8a7312b33f2","deck":"$5:props:children:1:props:cards:104:deck","index":17},{"id":"54fe5636-ce58-433d-a77e-ff905beb7d11","q":"How do producer retries work, and what is the gotcha?","a":"Producers retry transient failures automatically. Enable idempotent mode alongside retries, or a retried send that actually succeeded becomes a duplicate. id: 974896ab-58b4-4b7e-868f-3a94f0640776","deck":"$5:props:children:1:props:cards:104:deck","index":18},{"id":"965f9e85-6210-43b7-9628-d232148919ba","q":"What does Kafka give you for consumer-side retries?","a":"Nothing built in, unlike SQS. The pattern is a retry topic consumed separately, then a dead letter queue after N failures - a fair reason to pick SQS for simple worker queues. id: 6e26d304-6252-4cb5-b713-e5e8f6e1ea39","deck":"$5:props:children:1:props:cards:104:deck","index":19},{"id":"39bc2380-89be-4c00-97fb-22ff0f7ba361","q":"Rough single-broker capacity for back-of-envelope maths?","a":"Very hand-wavy, but ~1TB storage and up to ~1M messages/sec on good hardware, with messages under ~1MB. Below that, scaling is not the conversation. id: 4c7af18c-4472-466b-aad2-92d49311db66","deck":"$5:props:children:1:props:cards:104:deck","index":20},{"id":"163feeaa-b7bd-41d0-afb8-6dba8b0e7387","q":"Two ways to scale Kafka.","a":"Add brokers, and partition properly. Brokers alone do nothing if topics are under-partitioned - scale the topic, not just the cluster. id: 4305bd52-29cc-4a84-8e67-d74b43e45950","deck":"$5:props:children:1:props:cards:104:deck","index":21},{"id":"af015ce1-063a-41ba-8ae5-ee56a6fc3a36","q":"How is a partition chosen from a key?","a":"partition = hash(key) % num_partitions, murmur2 by default. Changing the partition count therefore reshuffles which partition a key maps to. id: b05959f5-ad81-46ec-b997-c665ee61b229","deck":"$5:props:children:1:props:cards:104:deck","index":22},{"id":"e6686e7e-1829-450e-b7fe-dc0ab481e8df","q":"Four ways to fix a hot partition.","a":"Drop the key and spread load (losing ordering); salt the key with a random suffix; use a compound key such as ad ID + region; or apply back pressure and slow the producer. id: f79a2b13-9898-48bb-aef9-9f5bcb2398d3","deck":"$5:props:children:1:props:cards:104:deck","index":23},{"id":"4a2b8190-524d-477f-9601-08d87f2c12d8","q":"Why are large payloads an anti-pattern, and what instead?","a":"Kafka is not a blob store - big messages hurt memory and network throughput. Write the object to S3 and put a pointer in the message: the claim-check pattern. id: acac941e-5132-4c0d-a306-4a1484d3376a","deck":"$5:props:children:1:props:cards:104:deck","index":24},{"id":"a633ee47-f991-45a7-a2d2-acb63ec1f5fc","q":"How does retention work, and what is log compaction?","a":"Messages expire by retention.ms (7 days default) or retention.bytes. Compaction instead keeps the latest value per key forever, making the topic a replayable snapshot. id: 33a07f7c-24c1-4f16-b95f-a99ed03fad62","deck":"$5:props:children:1:props:cards:104:deck","index":25},{"id":"9064494c-eb96-4715-a7eb-71420b4603a4","q":"What is KRaft?","a":"Kafka's own Raft-based metadata quorum, replacing ZooKeeper. Production-ready since 3.3 and ZooKeeper was removed entirely in Kafka 4.0. id: ea87c892-b2df-4b07-a241-6afd1ffa6504","deck":"$5:props:children:1:props:cards:104:deck","index":26},{"id":"9e38e65c-327e-454b-8f96-ab764c1297fa","q":"What is tiered storage (KIP-405)?","a":"Brokers keep recent segments on local disk and offload older ones to object storage, so retention is no longer bounded by broker disk. GA in Kafka 3.9. id: db5ee616-49de-45f0-af4d-07993250f9f4","deck":"$5:props:children:1:props:cards:104:deck","index":27},{"id":"0ccdddef-8d54-4b38-b5d3-7d4926c594f6","q":"Two producer-side performance levers?","a":"Batching (group records per send to amortise network overhead) and compression (GZIP, Snappy, LZ4). Both trade a little latency for a lot of throughput. id: 67758d0f-5870-4df6-b488-0094605ddd6a","deck":"$5:props:children:1:props:cards:104:deck","index":28},{"id":"98838250-cf02-4289-a3af-85b91c8c8150","q":"When do you reach for Kafka as a queue in an interview?","a":"Asynchronous work such as transcoding after upload, work that must stay ordered such as a waiting queue, or when producer and consumer must scale independently. id: b532cdc5-dd3d-4fe5-869d-4b4360ea00c4","deck":"$5:props:children:1:props:cards:104:deck","index":29},{"id":"b5eee806-1f3f-4222-b63c-42353d287a1e","q":"When do you reach for it as a stream?","a":"Continuous real-time processing, such as aggregating ad clicks as they arrive, or fan-out where many independent consumers need the same messages. id: 161ffec7-8ec2-4585-8199-5d9bb3b70f79","deck":"$5:props:children:1:props:cards:104:deck","index":30},{"id":"66230d2d-7ac9-4dc0-bcdf-1d221ee711c9","q":"\"Always available, sometimes consistent\" - so what?","a":"Replication and leader failover make cluster-wide outage an unrealistic premise; redirect the question. The interesting failure is a consumer dying.","deck":"$5:props:children:1:props:cards:104:deck","index":31},{"id":"42575223-35e4-4cf8-b145-3a8bd3112785","q":"When did the App Router become stable, and what is the current Next.js version?","a":"Stable in 13.4 (May 2023). The current line is 16.3, released August 2026; there is no Next.js 17. id: 32ca8c2c-7c0d-4335-bb8a-aec348f17396","deck":{"slug":"next-js-app-router","name":"Next.js App Router","blurb":"Routing, rendering and file conventions in the App Router, weighted to 15→16.3.","tint":"#F2F0CA","ink":"#9B9527","cards":[{"id":"42575223-35e4-4cf8-b145-3a8bd3112785","q":"When did the App Router become stable, and what is the current Next.js version?","a":"Stable in 13.4 (May 2023). The current line is 16.3, released August 2026; there is no Next.js 17. id: 32ca8c2c-7c0d-4335-bb8a-aec348f17396"},{"id":"a03d1d74-74ed-4a23-9c69-aab958d3a330","q":"What is the default component type in the App Router?","a":"Server Components. They run only on the server, can be async, and ship no JavaScript to the browser. id: 7c8b40b4-95c1-4677-8963-bed88a552f34"},{"id":"c67ae708-d0b8-4bae-a17a-cd6c1a58011b","q":"What does 'use client' actually mark?","a":"The boundary where the client bundle begins. Every module imported below it becomes client code too. id: 29070b96-b8f1-4766-9c37-50803e7df536"},{"id":"e9dc7034-7f9e-4a55-bd44-ead8d082cddf","q":"Name the special files that define a route segment.","a":"layout, page, loading, error, not-found, template, route, and default (for parallel route slots). id: e1beb9a1-ba1a-40b4-ac42-62cee4415382"},{"id":"24ca1c76-59c0-48e3-b791-7fc99d199762","q":"layout.tsx vs template.tsx?","a":"Layouts persist across navigation and keep state; templates remount and reset state on every navigation. id: 71b81f07-cc59-4cf9-b191-cf4304a05257"},{"id":"008c1b80-aa05-4ae4-8f9f-b1540a332186","q":"What are route groups and private folders?","a":"(marketing) groups routes without adding a URL segment; _lib opts a folder out of routing entirely. id: 5091e51d-4fae-4aed-a483-24d7aab50906"},{"id":"7022f217-274b-45e8-9220-4d56bfdbb14d","q":"How do you write dynamic, catch-all and optional catch-all segments?","a":"[id], [...slug] and [[...slug]] — the last also matches the parent path with no segments at all. id: 61daaf88-4538-402f-a676-63245add0129"},{"id":"32cc1b1d-fe5d-4378-af70-87a1edca25eb","q":"What does generateStaticParams do?","a":"Lists the dynamic params to prerender at build time — the App Router replacement for getStaticPaths. id: 055c1eaf-5abc-4147-9915-c8b3eeae5d1c"},{"id":"c8ff3b91-0b89-4d09-9f67-5d4f91da5e97","q":"What changed about params, searchParams, cookies() and headers()?","a":"They became async in Next 15 and must be awaited. This is the most common upgrade break from 14. id: c1d4da39-292c-46c6-8241-914bed8ebdf8"},{"id":"1d93d888-7208-4060-8222-9a814b84bb8e","q":"How does streaming work in the App Router?","a":"A loading.tsx or <Suspense> boundary lets the shell flush immediately while slower data streams in after. id: 31112f6b-35e3-42ce-8605-85d2e3f63dff"},{"id":"9927ed30-ba91-47a1-a42e-e97f905eb5e3","q":"Route Handler vs Server Action — when do you use each?","a":"Route Handlers expose a real HTTP endpoint for external callers; Server Actions are RPC for your own UI. id: 879b33d3-9a13-4683-85c2-920874376b11"},{"id":"f94f4781-4db0-4e41-8431-4b5c83b8c479","q":"What replaced middleware.ts in Next 16?","a":"proxy.ts, renamed to make it clear the file is a network-boundary concern, not general app middleware. id: b89e1761-7b29-4d86-941f-8d94cba01938"},{"id":"9b24b772-12c9-4b8b-8018-3399d2ee8ecd","q":"What are Cache Components and 'use cache'?","a":"An opt-in model (cacheComponents: true) where nothing caches unless a function or component is marked cacheable. id: 43818909-a4a9-4a0c-9570-48ca378335c5"},{"id":"44f0a06b-0fe3-4b29-80d9-14bafa52d5a8","q":"How did caching defaults shift across 14 → 15 → 16?","a":"14 cached fetch and GET handlers implicitly; 15 turned those off by default; 16 makes caching explicit opt-in. id: 6e385274-c2f9-4209-881a-56e8dc11e801"},{"id":"7d57e1d8-cd84-484c-a900-b14cf4884da5","q":"How do you invalidate cached data on demand?","a":"revalidatePath and revalidateTag from a Server Action or Route Handler, with cacheTag marking what to bust. id: d189eb16-3379-474f-940e-f5a7746e8156"},{"id":"722f8b83-7988-4b8a-8a5b-9bce4046bb4e","q":"What makes a route render dynamically?","a":"Reading request data — cookies, headers, searchParams — or opting out via dynamic = 'force-dynamic'. id: 21ed2d23-ff7f-48e4-b385-8e4fb9134e21"},{"id":"a3e0939e-8fc3-47bf-9294-90c6163d7fe6","q":"What is Partial Prerendering, and where did it land?","a":"Serving a static shell with dynamic holes streamed in. It shipped folded into the Cache Components model in 16. id: e3946fed-ed3f-4ef1-aa3c-7230c2162313"},{"id":"ca4b8e18-3f72-4469-b79e-ab9d27475fc7","q":"What are Instant Navigations (16.3)?","a":"An opt-in suite — partial prefetching, extracted loading shells, Instant Insights — for SPA-feel routing. id: 0ee4bd31-3505-4894-8400-9e4344ac5493"},{"id":"02799246-7758-49ec-9d65-cd78453691a1","q":"What problem do root params (16.3) solve?","a":"Reading a root-level param like [lang] from any Server Component, instead of prop-drilling it down the tree. id: 6ab944e9-1bb1-426d-a7a8-dcf7f2e32abe"},{"id":"053baf6a-038e-4492-a4d7-a49e287de469","q":"How does error handling work in the App Router?","a":"error.tsx catches a segment's render errors, global-error wraps the root, notFound() renders 404. id: f09b5d3b-4045-43bb-9f71-1315ca05f623"},{"id":"5866b2f8-036b-47ae-a5b2-88ac27a54d8c","q":"What are parallel and intercepting routes?","a":"@slot folders render several pages into one layout; (.) and (..) intercept a route to show it as a modal. id: 94dd7854-9bf5-43e8-8afe-a317bee7fc60"},{"id":"d33e85a6-dba9-4214-802a-e2c46c8ec309","q":"How do you set page metadata?","a":"Export a static metadata object or an async generateMetadata from a layout or page. id: 33f43377-f78a-4f79-9c89-428d9f5a7840"},{"id":"16fa7a65-d181-4802-acae-46eece4a2ad0","q":"What is the bundler story in Next 16?","a":"Turbopack is the default for dev and build; webpack config is deprecated with a temporary --webpack fallback. id: 9bee220e-0bbc-4757-973d-6bf2a9473b5d"},{"id":"28b2a42a-9995-40f8-93a3-caeb9d49f8a4","q":"Interview one-liner: what is the App Router's architectural theme?","a":"Rendering moves to the server by default and caching moves from implicit to explicit, opt-in and per-component."}]},"index":0},{"id":"a03d1d74-74ed-4a23-9c69-aab958d3a330","q":"What is the default component type in the App Router?","a":"Server Components. They run only on the server, can be async, and ship no JavaScript to the browser. id: 7c8b40b4-95c1-4677-8963-bed88a552f34","deck":"$5:props:children:1:props:cards:136:deck","index":1},{"id":"c67ae708-d0b8-4bae-a17a-cd6c1a58011b","q":"What does 'use client' actually mark?","a":"The boundary where the client bundle begins. Every module imported below it becomes client code too. id: 29070b96-b8f1-4766-9c37-50803e7df536","deck":"$5:props:children:1:props:cards:136:deck","index":2},{"id":"e9dc7034-7f9e-4a55-bd44-ead8d082cddf","q":"Name the special files that define a route segment.","a":"layout, page, loading, error, not-found, template, route, and default (for parallel route slots). id: e1beb9a1-ba1a-40b4-ac42-62cee4415382","deck":"$5:props:children:1:props:cards:136:deck","index":3},{"id":"24ca1c76-59c0-48e3-b791-7fc99d199762","q":"layout.tsx vs template.tsx?","a":"Layouts persist across navigation and keep state; templates remount and reset state on every navigation. id: 71b81f07-cc59-4cf9-b191-cf4304a05257","deck":"$5:props:children:1:props:cards:136:deck","index":4},{"id":"008c1b80-aa05-4ae4-8f9f-b1540a332186","q":"What are route groups and private folders?","a":"(marketing) groups routes without adding a URL segment; _lib opts a folder out of routing entirely. id: 5091e51d-4fae-4aed-a483-24d7aab50906","deck":"$5:props:children:1:props:cards:136:deck","index":5},{"id":"7022f217-274b-45e8-9220-4d56bfdbb14d","q":"How do you write dynamic, catch-all and optional catch-all segments?","a":"[id], [...slug] and [[...slug]] — the last also matches the parent path with no segments at all. id: 61daaf88-4538-402f-a676-63245add0129","deck":"$5:props:children:1:props:cards:136:deck","index":6},{"id":"32cc1b1d-fe5d-4378-af70-87a1edca25eb","q":"What does generateStaticParams do?","a":"Lists the dynamic params to prerender at build time — the App Router replacement for getStaticPaths. id: 055c1eaf-5abc-4147-9915-c8b3eeae5d1c","deck":"$5:props:children:1:props:cards:136:deck","index":7},{"id":"c8ff3b91-0b89-4d09-9f67-5d4f91da5e97","q":"What changed about params, searchParams, cookies() and headers()?","a":"They became async in Next 15 and must be awaited. This is the most common upgrade break from 14. id: c1d4da39-292c-46c6-8241-914bed8ebdf8","deck":"$5:props:children:1:props:cards:136:deck","index":8},{"id":"1d93d888-7208-4060-8222-9a814b84bb8e","q":"How does streaming work in the App Router?","a":"A loading.tsx or <Suspense> boundary lets the shell flush immediately while slower data streams in after. id: 31112f6b-35e3-42ce-8605-85d2e3f63dff","deck":"$5:props:children:1:props:cards:136:deck","index":9},{"id":"9927ed30-ba91-47a1-a42e-e97f905eb5e3","q":"Route Handler vs Server Action — when do you use each?","a":"Route Handlers expose a real HTTP endpoint for external callers; Server Actions are RPC for your own UI. id: 879b33d3-9a13-4683-85c2-920874376b11","deck":"$5:props:children:1:props:cards:136:deck","index":10},{"id":"f94f4781-4db0-4e41-8431-4b5c83b8c479","q":"What replaced middleware.ts in Next 16?","a":"proxy.ts, renamed to make it clear the file is a network-boundary concern, not general app middleware. id: b89e1761-7b29-4d86-941f-8d94cba01938","deck":"$5:props:children:1:props:cards:136:deck","index":11},{"id":"9b24b772-12c9-4b8b-8018-3399d2ee8ecd","q":"What are Cache Components and 'use cache'?","a":"An opt-in model (cacheComponents: true) where nothing caches unless a function or component is marked cacheable. id: 43818909-a4a9-4a0c-9570-48ca378335c5","deck":"$5:props:children:1:props:cards:136:deck","index":12},{"id":"44f0a06b-0fe3-4b29-80d9-14bafa52d5a8","q":"How did caching defaults shift across 14 → 15 → 16?","a":"14 cached fetch and GET handlers implicitly; 15 turned those off by default; 16 makes caching explicit opt-in. id: 6e385274-c2f9-4209-881a-56e8dc11e801","deck":"$5:props:children:1:props:cards:136:deck","index":13},{"id":"7d57e1d8-cd84-484c-a900-b14cf4884da5","q":"How do you invalidate cached data on demand?","a":"revalidatePath and revalidateTag from a Server Action or Route Handler, with cacheTag marking what to bust. id: d189eb16-3379-474f-940e-f5a7746e8156","deck":"$5:props:children:1:props:cards:136:deck","index":14},{"id":"722f8b83-7988-4b8a-8a5b-9bce4046bb4e","q":"What makes a route render dynamically?","a":"Reading request data — cookies, headers, searchParams — or opting out via dynamic = 'force-dynamic'. id: 21ed2d23-ff7f-48e4-b385-8e4fb9134e21","deck":"$5:props:children:1:props:cards:136:deck","index":15},{"id":"a3e0939e-8fc3-47bf-9294-90c6163d7fe6","q":"What is Partial Prerendering, and where did it land?","a":"Serving a static shell with dynamic holes streamed in. It shipped folded into the Cache Components model in 16. id: e3946fed-ed3f-4ef1-aa3c-7230c2162313","deck":"$5:props:children:1:props:cards:136:deck","index":16},{"id":"ca4b8e18-3f72-4469-b79e-ab9d27475fc7","q":"What are Instant Navigations (16.3)?","a":"An opt-in suite — partial prefetching, extracted loading shells, Instant Insights — for SPA-feel routing. id: 0ee4bd31-3505-4894-8400-9e4344ac5493","deck":"$5:props:children:1:props:cards:136:deck","index":17},{"id":"02799246-7758-49ec-9d65-cd78453691a1","q":"What problem do root params (16.3) solve?","a":"Reading a root-level param like [lang] from any Server Component, instead of prop-drilling it down the tree. id: 6ab944e9-1bb1-426d-a7a8-dcf7f2e32abe","deck":"$5:props:children:1:props:cards:136:deck","index":18},{"id":"053baf6a-038e-4492-a4d7-a49e287de469","q":"How does error handling work in the App Router?","a":"error.tsx catches a segment's render errors, global-error wraps the root, notFound() renders 404. id: f09b5d3b-4045-43bb-9f71-1315ca05f623","deck":"$5:props:children:1:props:cards:136:deck","index":19},{"id":"5866b2f8-036b-47ae-a5b2-88ac27a54d8c","q":"What are parallel and intercepting routes?","a":"@slot folders render several pages into one layout; (.) and (..) intercept a route to show it as a modal. id: 94dd7854-9bf5-43e8-8afe-a317bee7fc60","deck":"$5:props:children:1:props:cards:136:deck","index":20},{"id":"d33e85a6-dba9-4214-802a-e2c46c8ec309","q":"How do you set page metadata?","a":"Export a static metadata object or an async generateMetadata from a layout or page. id: 33f43377-f78a-4f79-9c89-428d9f5a7840","deck":"$5:props:children:1:props:cards:136:deck","index":21},{"id":"16fa7a65-d181-4802-acae-46eece4a2ad0","q":"What is the bundler story in Next 16?","a":"Turbopack is the default for dev and build; webpack config is deprecated with a temporary --webpack fallback. id: 9bee220e-0bbc-4757-973d-6bf2a9473b5d","deck":"$5:props:children:1:props:cards:136:deck","index":22},{"id":"28b2a42a-9995-40f8-93a3-caeb9d49f8a4","q":"Interview one-liner: what is the App Router's architectural theme?","a":"Rendering moves to the server by default and caching moves from implicit to explicit, opt-in and per-component.","deck":"$5:props:children:1:props:cards:136:deck","index":23},{"id":"a3b1d931-696c-42d7-a4fd-e5c695f4e374","q":"Name the four caching layers of the App Router.","a":"Request memoization, the Data Cache, the Full Route Cache, and the client-side Router Cache. id: ea06e171-c0c8-48ab-adc3-c97f335c593b","deck":{"slug":"next-js-caching-and-data-fetching","name":"Next.js caching and data fetching","blurb":"The caching layers, the use cache model, and fetching patterns from 15 to 16.3.","tint":"#CBF2CA","ink":"#2A9B27","cards":[{"id":"a3b1d931-696c-42d7-a4fd-e5c695f4e374","q":"Name the four caching layers of the App Router.","a":"Request memoization, the Data Cache, the Full Route Cache, and the client-side Router Cache. id: ea06e171-c0c8-48ab-adc3-c97f335c593b"},{"id":"51ca58ff-71f8-4701-bc61-0195ce638044","q":"What is request memoization?","a":"React dedupes identical fetches within a single render pass, so shared components can each fetch what they need. id: a7ef8893-81c9-4394-b0f8-ba63fa142f68"},{"id":"c1d8d113-7dc4-453f-8396-57184bb69b20","q":"What is the Data Cache?","a":"A persistent server-side store of fetch results that survives requests and deploys until revalidated. id: 934eae2b-099e-43e8-9c80-aa6d6a393fc2"},{"id":"9fbb0014-40c7-418e-9473-a547809d9dd2","q":"What is the Full Route Cache?","a":"The prerendered HTML and RSC payload for a static route, held on the server and served without rendering. id: 11212494-5b2d-4da7-aa11-4aa317c298f2"},{"id":"0a7d6be7-8827-4f48-ba9a-ac8fe00f8bc0","q":"What is the Router Cache?","a":"An in-memory client cache of RSC payloads for visited and prefetched routes, so back-navigation is instant. id: c159d16a-2e9c-4514-8050-64653f105394"},{"id":"eb8b3dbd-d92c-4b1e-9e2d-ea2a603d0da8","q":"Is fetch cached by default?","a":"No. Since 15 fetch defaults to no-store; you opt in with force-cache, next.revalidate, or use cache. id: 53dcfceb-ffa4-4a8b-a3b9-06299ceddfa6"},{"id":"2864a395-9cd4-4d6d-8cea-af19e9328f1a","q":"What does the 'use cache' directive do?","a":"Marks a file, component or function as cacheable, so its result is stored and reused rather than recomputed. id: aa451521-2c38-4943-9c6e-dfe9898743fa"},{"id":"df783804-f5a7-4975-93da-8169afe5594c","q":"What do cacheTag and cacheLife add to 'use cache'?","a":"cacheTag labels an entry for targeted invalidation; cacheLife sets how long it stays fresh and stale. id: 19c872cf-615e-45fd-91c9-77ca1299c341"},{"id":"90b6fb75-79cc-4605-b54d-7659c67d0256","q":"What does the cacheComponents flag change?","a":"It switches the app to the explicit model: nothing is cached unless you mark it, and dynamic is the default. id: abb3bd9a-58f0-4b11-9999-5ae0bc6c829e"},{"id":"aa5bd4b1-8b0d-4d1d-9f95-c70b8f1c3ae5","q":"revalidatePath vs revalidateTag?","a":"revalidatePath busts everything for a route; tags bust just the entries you labelled, across every route. id: ab6622d9-23da-4b32-aba1-cb9f101c8893"},{"id":"ce9c5600-2be2-402d-92a9-8ebd5c5ce4f8","q":"How do you handle on-demand invalidation from a CMS?","a":"Expose a route handler, verify the webhook signature, then call revalidateTag for the affected content tags. id: 0e981e8e-bb42-47fd-8e6e-bd01cfc65fbe"},{"id":"6500ca71-2711-49e2-be7e-b2d1a70af0c7","q":"What is ISR in App Router terms?","a":"Time-based revalidation of a prerendered route: serve the cached version, regenerate in the background. id: 650de55e-a972-4985-8584-c925cddc310a"},{"id":"7758a96c-a38f-4210-9515-1db6770517c3","q":"What does the segment export revalidate = 60 mean?","a":"The route's cached output is considered fresh for 60 seconds, then regenerated on the next request after that. id: c12987b2-3c77-4a1a-b894-38168d644bc2"},{"id":"22c86c2c-aaa5-4321-b7f5-e4f0620764dc","q":"How do you force a route static or dynamic?","a":"The segment config dynamic = 'force-static' or 'force-dynamic', overriding what Next.js infers. id: c84268bf-fb1c-42b7-ac12-d69cbee29cb1"},{"id":"4c0ccc66-2849-4555-a36f-00dd9224339a","q":"What silently makes a route dynamic?","a":"Reading cookies, headers, searchParams or connection — any request-time input opts the whole segment out. id: 4c628480-1b00-423a-98e1-1a4db8915386"},{"id":"ead290c0-4c5e-45a3-9c84-56aa3175a6f1","q":"How do you avoid a request waterfall between fetches?","a":"Start independent fetches together and await them with Promise.all, rather than awaiting each in sequence. id: d983c381-bcb4-4daf-a4a8-01daee5feddc"},{"id":"d51d3009-ce2d-4827-80b3-48b2874d2f03","q":"What is the preload pattern?","a":"Kick off a data fetch in the parent before rendering a child, so the request is already in flight on render. id: 78375417-4401-4937-8de3-5ec09d695ba8"},{"id":"3c173246-d13f-486e-a000-d84fdb8065d7","q":"When do you reach for React's cache() function?","a":"To dedupe non-fetch work like a database query across one render pass, since only fetch is memoized natively. id: 8c1ead4c-5307-4b6c-ae6b-d74681da1985"},{"id":"92c6282e-6adf-4910-820e-0808ac5e9633","q":"Where does client-side data fetching still belong?","a":"Anything request-specific and interactive — polling, infinite scroll, optimistic UI — via SWR or TanStack Query. id: c5f5d873-da69-429c-87b7-c1db6a691080"},{"id":"5a0bfed7-6600-495f-af9e-a376cb3f8a0f","q":"How do you cache a Route Handler response?","a":"Set Cache-Control headers yourself, or use cache inside it; GET handlers stopped caching by default in 15. id: 4ccfdf9d-4ffb-45a7-afb6-e0e15114f9c1"},{"id":"cb19602f-0c50-4f83-bd55-2c6ec68f6be1","q":"What did 16.3 add to the caching story?","a":"'use cache' gained client-side caching, letting a route serve a prefetched shell before its data arrives. id: c6fc6f69-9293-4bd6-a912-16dad7991ffe"},{"id":"5f0fdf1d-f357-489f-a432-0edbc5a021fb","q":"What is partial prefetching?","a":"Per-link control over how much of a target route to prefetch, instead of all-or-nothing prefetch={true}. id: b4156d56-2bf2-4f36-99b6-a8e86f8fb065"},{"id":"1e82c5d0-47ab-4191-a8af-12ba3360797c","q":"How does the CDN relate to these caches?","a":"It sits in front of them, caching full responses by URL; a stale CDN entry survives a revalidateTag. id: 85ff2982-2790-4ae7-8fe9-03481770172d"},{"id":"ff67b2ee-7671-437b-ae7f-63e620f63bff","q":"Interview one-liner: how would you explain the caching model to a sceptic?","a":"It moved from four implicit layers you fought against to one explicit directive you opt into, per unit of work."}]},"index":0},{"id":"51ca58ff-71f8-4701-bc61-0195ce638044","q":"What is request memoization?","a":"React dedupes identical fetches within a single render pass, so shared components can each fetch what they need. id: a7ef8893-81c9-4394-b0f8-ba63fa142f68","deck":"$5:props:children:1:props:cards:160:deck","index":1},{"id":"c1d8d113-7dc4-453f-8396-57184bb69b20","q":"What is the Data Cache?","a":"A persistent server-side store of fetch results that survives requests and deploys until revalidated. id: 934eae2b-099e-43e8-9c80-aa6d6a393fc2","deck":"$5:props:children:1:props:cards:160:deck","index":2},{"id":"9fbb0014-40c7-418e-9473-a547809d9dd2","q":"What is the Full Route Cache?","a":"The prerendered HTML and RSC payload for a static route, held on the server and served without rendering. id: 11212494-5b2d-4da7-aa11-4aa317c298f2","deck":"$5:props:children:1:props:cards:160:deck","index":3},{"id":"0a7d6be7-8827-4f48-ba9a-ac8fe00f8bc0","q":"What is the Router Cache?","a":"An in-memory client cache of RSC payloads for visited and prefetched routes, so back-navigation is instant. id: c159d16a-2e9c-4514-8050-64653f105394","deck":"$5:props:children:1:props:cards:160:deck","index":4},{"id":"eb8b3dbd-d92c-4b1e-9e2d-ea2a603d0da8","q":"Is fetch cached by default?","a":"No. Since 15 fetch defaults to no-store; you opt in with force-cache, next.revalidate, or use cache. id: 53dcfceb-ffa4-4a8b-a3b9-06299ceddfa6","deck":"$5:props:children:1:props:cards:160:deck","index":5},{"id":"2864a395-9cd4-4d6d-8cea-af19e9328f1a","q":"What does the 'use cache' directive do?","a":"Marks a file, component or function as cacheable, so its result is stored and reused rather than recomputed. id: aa451521-2c38-4943-9c6e-dfe9898743fa","deck":"$5:props:children:1:props:cards:160:deck","index":6},{"id":"df783804-f5a7-4975-93da-8169afe5594c","q":"What do cacheTag and cacheLife add to 'use cache'?","a":"cacheTag labels an entry for targeted invalidation; cacheLife sets how long it stays fresh and stale. id: 19c872cf-615e-45fd-91c9-77ca1299c341","deck":"$5:props:children:1:props:cards:160:deck","index":7},{"id":"90b6fb75-79cc-4605-b54d-7659c67d0256","q":"What does the cacheComponents flag change?","a":"It switches the app to the explicit model: nothing is cached unless you mark it, and dynamic is the default. id: abb3bd9a-58f0-4b11-9999-5ae0bc6c829e","deck":"$5:props:children:1:props:cards:160:deck","index":8},{"id":"aa5bd4b1-8b0d-4d1d-9f95-c70b8f1c3ae5","q":"revalidatePath vs revalidateTag?","a":"revalidatePath busts everything for a route; tags bust just the entries you labelled, across every route. id: ab6622d9-23da-4b32-aba1-cb9f101c8893","deck":"$5:props:children:1:props:cards:160:deck","index":9},{"id":"ce9c5600-2be2-402d-92a9-8ebd5c5ce4f8","q":"How do you handle on-demand invalidation from a CMS?","a":"Expose a route handler, verify the webhook signature, then call revalidateTag for the affected content tags. id: 0e981e8e-bb42-47fd-8e6e-bd01cfc65fbe","deck":"$5:props:children:1:props:cards:160:deck","index":10},{"id":"6500ca71-2711-49e2-be7e-b2d1a70af0c7","q":"What is ISR in App Router terms?","a":"Time-based revalidation of a prerendered route: serve the cached version, regenerate in the background. id: 650de55e-a972-4985-8584-c925cddc310a","deck":"$5:props:children:1:props:cards:160:deck","index":11},{"id":"7758a96c-a38f-4210-9515-1db6770517c3","q":"What does the segment export revalidate = 60 mean?","a":"The route's cached output is considered fresh for 60 seconds, then regenerated on the next request after that. id: c12987b2-3c77-4a1a-b894-38168d644bc2","deck":"$5:props:children:1:props:cards:160:deck","index":12},{"id":"22c86c2c-aaa5-4321-b7f5-e4f0620764dc","q":"How do you force a route static or dynamic?","a":"The segment config dynamic = 'force-static' or 'force-dynamic', overriding what Next.js infers. id: c84268bf-fb1c-42b7-ac12-d69cbee29cb1","deck":"$5:props:children:1:props:cards:160:deck","index":13},{"id":"4c0ccc66-2849-4555-a36f-00dd9224339a","q":"What silently makes a route dynamic?","a":"Reading cookies, headers, searchParams or connection — any request-time input opts the whole segment out. id: 4c628480-1b00-423a-98e1-1a4db8915386","deck":"$5:props:children:1:props:cards:160:deck","index":14},{"id":"ead290c0-4c5e-45a3-9c84-56aa3175a6f1","q":"How do you avoid a request waterfall between fetches?","a":"Start independent fetches together and await them with Promise.all, rather than awaiting each in sequence. id: d983c381-bcb4-4daf-a4a8-01daee5feddc","deck":"$5:props:children:1:props:cards:160:deck","index":15},{"id":"d51d3009-ce2d-4827-80b3-48b2874d2f03","q":"What is the preload pattern?","a":"Kick off a data fetch in the parent before rendering a child, so the request is already in flight on render. id: 78375417-4401-4937-8de3-5ec09d695ba8","deck":"$5:props:children:1:props:cards:160:deck","index":16},{"id":"3c173246-d13f-486e-a000-d84fdb8065d7","q":"When do you reach for React's cache() function?","a":"To dedupe non-fetch work like a database query across one render pass, since only fetch is memoized natively. id: 8c1ead4c-5307-4b6c-ae6b-d74681da1985","deck":"$5:props:children:1:props:cards:160:deck","index":17},{"id":"92c6282e-6adf-4910-820e-0808ac5e9633","q":"Where does client-side data fetching still belong?","a":"Anything request-specific and interactive — polling, infinite scroll, optimistic UI — via SWR or TanStack Query. id: c5f5d873-da69-429c-87b7-c1db6a691080","deck":"$5:props:children:1:props:cards:160:deck","index":18},{"id":"5a0bfed7-6600-495f-af9e-a376cb3f8a0f","q":"How do you cache a Route Handler response?","a":"Set Cache-Control headers yourself, or use cache inside it; GET handlers stopped caching by default in 15. id: 4ccfdf9d-4ffb-45a7-afb6-e0e15114f9c1","deck":"$5:props:children:1:props:cards:160:deck","index":19},{"id":"cb19602f-0c50-4f83-bd55-2c6ec68f6be1","q":"What did 16.3 add to the caching story?","a":"'use cache' gained client-side caching, letting a route serve a prefetched shell before its data arrives. id: c6fc6f69-9293-4bd6-a912-16dad7991ffe","deck":"$5:props:children:1:props:cards:160:deck","index":20},{"id":"5f0fdf1d-f357-489f-a432-0edbc5a021fb","q":"What is partial prefetching?","a":"Per-link control over how much of a target route to prefetch, instead of all-or-nothing prefetch={true}. id: b4156d56-2bf2-4f36-99b6-a8e86f8fb065","deck":"$5:props:children:1:props:cards:160:deck","index":21},{"id":"1e82c5d0-47ab-4191-a8af-12ba3360797c","q":"How does the CDN relate to these caches?","a":"It sits in front of them, caching full responses by URL; a stale CDN entry survives a revalidateTag. id: 85ff2982-2790-4ae7-8fe9-03481770172d","deck":"$5:props:children:1:props:cards:160:deck","index":22},{"id":"ff67b2ee-7671-437b-ae7f-63e620f63bff","q":"Interview one-liner: how would you explain the caching model to a sceptic?","a":"It moved from four implicit layers you fought against to one explicit directive you opt into, per unit of work.","deck":"$5:props:children:1:props:cards:160:deck","index":23},{"id":"ff487b75-ae21-40c9-a7fc-0faf4cb364da","q":"Composition over prop drilling: what's the first tool you reach for?","a":"Pass JSX as children or as a prop instead of threading data down. The component that owns the state renders the leaf and hands it over, so the components in between never see the prop at all. id: 3b3733de-b24f-49db-8389-d4b4d98fb3b2","deck":{"slug":"react-in-practice","name":"React in Practice","blurb":"Patterns and conventions for senior React work","tint":"#CAF2EF","ink":"#279B92","cards":[{"id":"ff487b75-ae21-40c9-a7fc-0faf4cb364da","q":"Composition over prop drilling: what's the first tool you reach for?","a":"Pass JSX as children or as a prop instead of threading data down. The component that owns the state renders the leaf and hands it over, so the components in between never see the prop at all. id: 3b3733de-b24f-49db-8389-d4b4d98fb3b2"},{"id":"8e6ff784-1933-4ec7-8903-55e04802861f","q":"When do you NOT need a useEffect?","a":"Whenever the value can be derived during render or computed in an event handler. Effects are for synchronising with something outside React — the DOM, a subscription, the network — not for reacting to your own state changes. id: 5ce50e43-231c-4489-8b63-c699e8ce79ba"},{"id":"c9857d22-fd01-45ca-b102-12f703645220","q":"A prop changes and you want the component's state to reset. What's the idiomatic fix?","a":"Give the component a key tied to that prop so React remounts it with fresh state. Mirroring the prop into state and resetting it in an effect renders stale values first and is the classic anti-pattern. id: bce9ddb8-a165-4035-8ee3-81211d9f58a3"},{"id":"590cbae3-1116-4081-a5d3-958fec15376a","q":"Why is array index a bad key, and when is it fine?","a":"Index keys make React reuse the wrong instance when items are inserted, removed or reordered, so state and DOM stick to the wrong row. Fine only for a static list that is never reordered and holds no state. id: a9b08119-0a28-477c-ac59-e4577582e9e5"},{"id":"7bf8f0d9-e1c1-4640-bafb-299265e5d61d","q":"What does \"colocate state\" mean, and what's the rule for lifting it?","a":"Keep state in the lowest component that uses it, and lift it only as far as the closest common ancestor of the components that need it. Lifting higher than necessary re-renders half the tree for no reason. id: cdfff9b7-7010-49c0-b442-8245d47d99cc"},{"id":"57597be1-6eb4-40c4-8ec2-b3124e63af89","q":"Controlled vs uncontrolled inputs — when do you pick each?","a":"Controlled when you need to react to every keystroke: live validation, formatting, dependent fields. Uncontrolled with defaultValue plus a ref or FormData when you only care at submit time — cheaper and the default for Actions. id: 6efacdec-267a-4798-b45f-334451780ee4"},{"id":"0680e3a0-a4a8-4c3e-b4f3-b96ae20090e8","q":"What are the two main costs of Context, and how do you mitigate them?","a":"Every consumer re-renders whenever the value identity changes, and consumers become coupled to a provider being present. Split contexts by update frequency, memoise the value, and prefer passing children through over pushing everything into context. id: f6e93796-f76a-4ab7-a015-e6659eddfa00"},{"id":"ea62072d-5620-4068-a5f5-60db33081a4a","q":"Server state vs client state: why treat them differently?","a":"Server state is a cache of data you do not own — it goes stale and needs fetching, deduping, revalidation and error states, so use RSC or a query library. Client state is UI state you do own, where useState or the URL is enough. id: 9c66eb52-2596-4c77-8de2-59c0ae5849a5"},{"id":"6973626d-af01-41fd-b052-f67e15483f3f","q":"useState vs useReducer — where's the line?","a":"Reach for useReducer once several pieces of state change together, or when the next state depends on what happened rather than on one new value. It moves transitions into a single pure function you can test and read in one place. id: e82642cb-4fe7-4886-8444-2c486f4c2f6e"},{"id":"4d764b91-4ad7-47b6-940c-656f8f1d26da","q":"What makes a good custom hook, and what are the Rules of Hooks?","a":"It names one behaviour, composes other hooks, and returns values rather than JSX. Hooks must be called unconditionally at the top level of a component or another hook — never inside loops, conditions, or callbacks. id: 71cb2ffa-f40e-4964-a2f5-532bac15daa7"},{"id":"110ace84-00e1-43e7-b7c0-ca2e03b242f6","q":"An effect fetches data and the props change mid-flight. What goes wrong and how do you fix it?","a":"Responses can resolve out of order and the stale one overwrites the fresh one. Fix it in the cleanup function: abort with an AbortController or flip an ignore flag — or hand fetching to a library that already does this. id: dfdd9ee1-bb3b-46b1-a69f-df8d1f421178"},{"id":"2de68bcb-9377-4f0a-a4a0-ae0d35c36e9b","q":"Why does StrictMode run effects twice in development?","a":"It mounts, unmounts and remounts to surface effects that are not safely repeatable, so a missing or wrong cleanup fails loudly. It is development-only, and the fix is correct cleanup rather than a \"has run\" guard. id: ee89d004-f770-438a-86eb-0d401f6bbafe"},{"id":"87e668ff-e0f0-4ac8-9bd2-061b42da1ad7","q":"useRef vs useState — what belongs in a ref?","a":"A ref holds a mutable value that does not affect the rendered output: DOM nodes, timer and subscription ids, previous values. Writing to it does not re-render, and you should not read or write it during render. id: ec530534-eb3b-4fbd-ba6e-982c7d1fd9cf"},{"id":"da83456d-fa0e-40e8-bff7-daeb9d1d53d2","q":"When should you still hand-write useMemo, useCallback and memo?","a":"For genuinely expensive computations, for stable identities crossing a boundary you do not control such as effect dependencies or a third-party library, and for re-render problems you have actually measured. The React Compiler covers the routine cases. id: da6c1495-1b16-496a-9fb6-3f63cc1af25c"},{"id":"cb1b9dc5-c32a-4911-86b0-67db494e4eac","q":"What is an error boundary, and what does it NOT catch?","a":"A component that catches errors thrown while rendering its subtree and shows a fallback instead of unmounting the app. It does not catch errors in event handlers, async callbacks, or ones thrown by itself. id: 079a4fc6-5a88-44ac-9010-3232fada356b"},{"id":"42a26feb-18fc-4427-b812-c585cd638b4f","q":"What does Suspense actually do, and what triggers it?","a":"It renders a fallback while something below it suspends — a lazily loaded component, or a promise read with use() or a Suspense-aware data source. On the server it also marks the boundary where streaming can flush. id: 8ac7f30b-1768-4e77-af72-6af244cae02b"},{"id":"ebd76008-5c05-4d4a-b16f-81d1d80cf565","q":"Server Components vs Client Components: where does the boundary go?","a":"Server is the default: data access, secrets and heavy dependencies stay there and ship no JavaScript. Push 'use client' down to the leaves that need state, effects or event handlers, and pass server data in as serialisable props. id: 50dc249f-4a8b-496e-9c0f-e6bcc7d3691d"},{"id":"86698f29-0c90-411c-adaa-a7acd54cbfbe","q":"How do you build a form with Server Actions in React 19?","a":"Pass an async function to form action. Wrap it in useActionState to get state, formAction and isPending, read the pending state inside children with useFormStatus, and add useOptimistic when you want instant feedback. id: 38eef364-ec5a-4fea-b595-f1bdc986d2a9"},{"id":"9a7c03c9-1b55-45c8-9741-7a55cdfbb92c","q":"What is the compound component pattern, and when is it worth it?","a":"Related parts such as Tabs, TabList and TabPanel share implicit state through context, so the consumer controls the markup and ordering. Worth it when a component has many valid arrangements that would otherwise become a pile of configuration props. id: 8e51b0ce-ddb0-46ef-b7b0-b918b33335cb"},{"id":"53041d4e-cedf-4c7c-9916-dd44356168da","q":"What does \"headless\" mean for a UI component, and how do you build one?","a":"Behaviour, state and accessibility with no styling: expose a hook or prop getters and let the caller render the markup. It is how Radix, Headless UI and TanStack work, and it has largely replaced render props. id: 9bf2a456-ced1-452e-8366-0e0873802cee"},{"id":"1e23fb62-35b1-451c-8970-2e0a4a58c17d","q":"How should you type component props in TypeScript today?","a":"Declare a props type and annotate the parameter rather than using React.FC. Inherit native props with ComponentProps<'button'>, type children as ReactNode, and use discriminated unions so impossible prop combinations will not compile. id: 3415e1ca-554d-464d-995d-f3d9dc565581"},{"id":"82dff9ab-7535-47bf-8ead-93d380329f9b","q":"You're wrapping a native button. What does the wrapper need to get right?","a":"Spread the remaining props through, forward ref — a plain prop in React 19 — default type to \"button\", and merge className instead of overwriting it, typically with clsx plus tailwind-merge. id: 2f17606d-90f5-4886-9422-c60edb36ad5e"},{"id":"538283ba-a21f-4a4c-828e-30c362587119","q":"What accessibility basics does a custom interactive component owe the user?","a":"A real semantic element where one exists, full keyboard operation with visible focus, an accessible name, ARIA state that tracks reality such as aria-expanded, and focus management for overlays including returning focus on close. id: 869efde8-8eb7-49d9-b4a2-5ed3405cf6fe"},{"id":"97836e2e-7126-441d-8687-3547e631a892","q":"What are the conventions for testing React components with Testing Library?","a":"Query the way a user would — role, then label, then text, with test ids as the last resort — drive interactions with user-event, assert on rendered output rather than state or props, and use findBy queries for anything async."}]},"index":0},{"id":"8e6ff784-1933-4ec7-8903-55e04802861f","q":"When do you NOT need a useEffect?","a":"Whenever the value can be derived during render or computed in an event handler. Effects are for synchronising with something outside React — the DOM, a subscription, the network — not for reacting to your own state changes. id: 5ce50e43-231c-4489-8b63-c699e8ce79ba","deck":"$5:props:children:1:props:cards:184:deck","index":1},{"id":"c9857d22-fd01-45ca-b102-12f703645220","q":"A prop changes and you want the component's state to reset. What's the idiomatic fix?","a":"Give the component a key tied to that prop so React remounts it with fresh state. Mirroring the prop into state and resetting it in an effect renders stale values first and is the classic anti-pattern. id: bce9ddb8-a165-4035-8ee3-81211d9f58a3","deck":"$5:props:children:1:props:cards:184:deck","index":2},{"id":"590cbae3-1116-4081-a5d3-958fec15376a","q":"Why is array index a bad key, and when is it fine?","a":"Index keys make React reuse the wrong instance when items are inserted, removed or reordered, so state and DOM stick to the wrong row. Fine only for a static list that is never reordered and holds no state. id: a9b08119-0a28-477c-ac59-e4577582e9e5","deck":"$5:props:children:1:props:cards:184:deck","index":3},{"id":"7bf8f0d9-e1c1-4640-bafb-299265e5d61d","q":"What does \"colocate state\" mean, and what's the rule for lifting it?","a":"Keep state in the lowest component that uses it, and lift it only as far as the closest common ancestor of the components that need it. Lifting higher than necessary re-renders half the tree for no reason. id: cdfff9b7-7010-49c0-b442-8245d47d99cc","deck":"$5:props:children:1:props:cards:184:deck","index":4},{"id":"57597be1-6eb4-40c4-8ec2-b3124e63af89","q":"Controlled vs uncontrolled inputs — when do you pick each?","a":"Controlled when you need to react to every keystroke: live validation, formatting, dependent fields. Uncontrolled with defaultValue plus a ref or FormData when you only care at submit time — cheaper and the default for Actions. id: 6efacdec-267a-4798-b45f-334451780ee4","deck":"$5:props:children:1:props:cards:184:deck","index":5},{"id":"0680e3a0-a4a8-4c3e-b4f3-b96ae20090e8","q":"What are the two main costs of Context, and how do you mitigate them?","a":"Every consumer re-renders whenever the value identity changes, and consumers become coupled to a provider being present. Split contexts by update frequency, memoise the value, and prefer passing children through over pushing everything into context. id: f6e93796-f76a-4ab7-a015-e6659eddfa00","deck":"$5:props:children:1:props:cards:184:deck","index":6},{"id":"ea62072d-5620-4068-a5f5-60db33081a4a","q":"Server state vs client state: why treat them differently?","a":"Server state is a cache of data you do not own — it goes stale and needs fetching, deduping, revalidation and error states, so use RSC or a query library. Client state is UI state you do own, where useState or the URL is enough. id: 9c66eb52-2596-4c77-8de2-59c0ae5849a5","deck":"$5:props:children:1:props:cards:184:deck","index":7},{"id":"6973626d-af01-41fd-b052-f67e15483f3f","q":"useState vs useReducer — where's the line?","a":"Reach for useReducer once several pieces of state change together, or when the next state depends on what happened rather than on one new value. It moves transitions into a single pure function you can test and read in one place. id: e82642cb-4fe7-4886-8444-2c486f4c2f6e","deck":"$5:props:children:1:props:cards:184:deck","index":8},{"id":"4d764b91-4ad7-47b6-940c-656f8f1d26da","q":"What makes a good custom hook, and what are the Rules of Hooks?","a":"It names one behaviour, composes other hooks, and returns values rather than JSX. Hooks must be called unconditionally at the top level of a component or another hook — never inside loops, conditions, or callbacks. id: 71cb2ffa-f40e-4964-a2f5-532bac15daa7","deck":"$5:props:children:1:props:cards:184:deck","index":9},{"id":"110ace84-00e1-43e7-b7c0-ca2e03b242f6","q":"An effect fetches data and the props change mid-flight. What goes wrong and how do you fix it?","a":"Responses can resolve out of order and the stale one overwrites the fresh one. Fix it in the cleanup function: abort with an AbortController or flip an ignore flag — or hand fetching to a library that already does this. id: dfdd9ee1-bb3b-46b1-a69f-df8d1f421178","deck":"$5:props:children:1:props:cards:184:deck","index":10},{"id":"2de68bcb-9377-4f0a-a4a0-ae0d35c36e9b","q":"Why does StrictMode run effects twice in development?","a":"It mounts, unmounts and remounts to surface effects that are not safely repeatable, so a missing or wrong cleanup fails loudly. It is development-only, and the fix is correct cleanup rather than a \"has run\" guard. id: ee89d004-f770-438a-86eb-0d401f6bbafe","deck":"$5:props:children:1:props:cards:184:deck","index":11},{"id":"87e668ff-e0f0-4ac8-9bd2-061b42da1ad7","q":"useRef vs useState — what belongs in a ref?","a":"A ref holds a mutable value that does not affect the rendered output: DOM nodes, timer and subscription ids, previous values. Writing to it does not re-render, and you should not read or write it during render. id: ec530534-eb3b-4fbd-ba6e-982c7d1fd9cf","deck":"$5:props:children:1:props:cards:184:deck","index":12},{"id":"da83456d-fa0e-40e8-bff7-daeb9d1d53d2","q":"When should you still hand-write useMemo, useCallback and memo?","a":"For genuinely expensive computations, for stable identities crossing a boundary you do not control such as effect dependencies or a third-party library, and for re-render problems you have actually measured. The React Compiler covers the routine cases. id: da6c1495-1b16-496a-9fb6-3f63cc1af25c","deck":"$5:props:children:1:props:cards:184:deck","index":13},{"id":"cb1b9dc5-c32a-4911-86b0-67db494e4eac","q":"What is an error boundary, and what does it NOT catch?","a":"A component that catches errors thrown while rendering its subtree and shows a fallback instead of unmounting the app. It does not catch errors in event handlers, async callbacks, or ones thrown by itself. id: 079a4fc6-5a88-44ac-9010-3232fada356b","deck":"$5:props:children:1:props:cards:184:deck","index":14},{"id":"42a26feb-18fc-4427-b812-c585cd638b4f","q":"What does Suspense actually do, and what triggers it?","a":"It renders a fallback while something below it suspends — a lazily loaded component, or a promise read with use() or a Suspense-aware data source. On the server it also marks the boundary where streaming can flush. id: 8ac7f30b-1768-4e77-af72-6af244cae02b","deck":"$5:props:children:1:props:cards:184:deck","index":15},{"id":"ebd76008-5c05-4d4a-b16f-81d1d80cf565","q":"Server Components vs Client Components: where does the boundary go?","a":"Server is the default: data access, secrets and heavy dependencies stay there and ship no JavaScript. Push 'use client' down to the leaves that need state, effects or event handlers, and pass server data in as serialisable props. id: 50dc249f-4a8b-496e-9c0f-e6bcc7d3691d","deck":"$5:props:children:1:props:cards:184:deck","index":16},{"id":"86698f29-0c90-411c-adaa-a7acd54cbfbe","q":"How do you build a form with Server Actions in React 19?","a":"Pass an async function to form action. Wrap it in useActionState to get state, formAction and isPending, read the pending state inside children with useFormStatus, and add useOptimistic when you want instant feedback. id: 38eef364-ec5a-4fea-b595-f1bdc986d2a9","deck":"$5:props:children:1:props:cards:184:deck","index":17},{"id":"9a7c03c9-1b55-45c8-9741-7a55cdfbb92c","q":"What is the compound component pattern, and when is it worth it?","a":"Related parts such as Tabs, TabList and TabPanel share implicit state through context, so the consumer controls the markup and ordering. Worth it when a component has many valid arrangements that would otherwise become a pile of configuration props. id: 8e51b0ce-ddb0-46ef-b7b0-b918b33335cb","deck":"$5:props:children:1:props:cards:184:deck","index":18},{"id":"53041d4e-cedf-4c7c-9916-dd44356168da","q":"What does \"headless\" mean for a UI component, and how do you build one?","a":"Behaviour, state and accessibility with no styling: expose a hook or prop getters and let the caller render the markup. It is how Radix, Headless UI and TanStack work, and it has largely replaced render props. id: 9bf2a456-ced1-452e-8366-0e0873802cee","deck":"$5:props:children:1:props:cards:184:deck","index":19},{"id":"1e23fb62-35b1-451c-8970-2e0a4a58c17d","q":"How should you type component props in TypeScript today?","a":"Declare a props type and annotate the parameter rather than using React.FC. Inherit native props with ComponentProps<'button'>, type children as ReactNode, and use discriminated unions so impossible prop combinations will not compile. id: 3415e1ca-554d-464d-995d-f3d9dc565581","deck":"$5:props:children:1:props:cards:184:deck","index":20},{"id":"82dff9ab-7535-47bf-8ead-93d380329f9b","q":"You're wrapping a native button. What does the wrapper need to get right?","a":"Spread the remaining props through, forward ref — a plain prop in React 19 — default type to \"button\", and merge className instead of overwriting it, typically with clsx plus tailwind-merge. id: 2f17606d-90f5-4886-9422-c60edb36ad5e","deck":"$5:props:children:1:props:cards:184:deck","index":21},{"id":"538283ba-a21f-4a4c-828e-30c362587119","q":"What accessibility basics does a custom interactive component owe the user?","a":"A real semantic element where one exists, full keyboard operation with visible focus, an accessible name, ARIA state that tracks reality such as aria-expanded, and focus management for overlays including returning focus on close. id: 869efde8-8eb7-49d9-b4a2-5ed3405cf6fe","deck":"$5:props:children:1:props:cards:184:deck","index":22},{"id":"97836e2e-7126-441d-8687-3547e631a892","q":"What are the conventions for testing React components with Testing Library?","a":"Query the way a user would — role, then label, then text, with test ids as the last resort — drive interactions with user-event, assert on rendered output rather than state or props, and use findBy queries for anything async.","deck":"$5:props:children:1:props:cards:184:deck","index":23},{"id":"36560cec-d8b8-4c87-a4c4-251caecfb8fa","q":"When did TypeScript 5.8, 5.9, 6.0 and 7.0 ship?","a":"5.8 on 28 Feb 2025, 5.9 on 1 Aug 2025, 6.0 on 23 Mar 2026 and 7.0 on 8 Jul 2026. The 5.x line ran on a roughly 3-month cadence; 6.0 and 7.0 arrived four months apart in 2026. id: 1a9f8837-47fd-4a22-8801-273a713f4749","deck":{"slug":"typescript-5-8-7-0","name":"TypeScript 5.8-7.0","blurb":"Releases, dates, breaking changes and what's next","tint":"#CAD3F2","ink":"#27419B","cards":[{"id":"36560cec-d8b8-4c87-a4c4-251caecfb8fa","q":"When did TypeScript 5.8, 5.9, 6.0 and 7.0 ship?","a":"5.8 on 28 Feb 2025, 5.9 on 1 Aug 2025, 6.0 on 23 Mar 2026 and 7.0 on 8 Jul 2026. The 5.x line ran on a roughly 3-month cadence; 6.0 and 7.0 arrived four months apart in 2026. id: 1a9f8837-47fd-4a22-8801-273a713f4749"},{"id":"5bff8dda-0e15-4bcc-90d5-42c550f8567e","q":"What is TypeScript 7.0, and why is it a landmark release?","a":"It is the compiler and language service ported from JavaScript to Go, released 8 Jul 2026. Microsoft measured 7.7x-11.9x faster builds on real codebases with 6-26% lower memory use. id: 93a025f0-b6df-4153-8773-53d6f611032f"},{"id":"6168a21e-a0cb-4653-adf1-7aac88a13751","q":"Is TypeScript 7 a new language or type system?","a":"No - it is a port, not a redesign. The syntax, type system and checking semantics are the same as 6.0; what changed is the implementation, the supported config surface and the tooling around it. id: c5641be1-503d-4cda-b1df-cd6213ada69e"},{"id":"a5b86837-b828-41f6-a6f8-6c653941470c","q":"How does TypeScript 7 use multiple cores?","a":"New --checkers flag (default 4) runs type-checking across parallel workers and --builders parallelises project-reference builds; --singleThreaded turns parallelism off. id: 3ce72215-5be1-46f8-9319-49ceb655f045"},{"id":"be43a0a6-ae05-4314-8b5d-b7252493efdb","q":"What happened to tsc's watch mode and editor support in 7.0?","a":"--watch was rebuilt on a Go port of Parcel's file watcher, and the language server was rewritten on LSP - over 80% fewer failing commands and 60% fewer server crashes than 6.0. id: 19cff139-825b-4f1c-8cd9-132385e4d551"},{"id":"8f86d6bd-e680-4f45-9939-df6bd3129ab6","q":"Which tsconfig defaults changed on the way to 7.0?","a":"strict is now true, module defaults to esnext, target to es2025 (6.0), rootDir to the tsconfig's own directory, and types to an empty array. id: f39d0975-4ad7-4cf5-adf3-fa923cf30460"},{"id":"89b1ba4a-3129-4cc7-a0f1-039bfaa81e0e","q":"Why does \"types\": [] as a default break so many projects?","a":"Previously every package under node_modules/@types was auto-included. Now you must list them explicitly, e.g. \"types\": [\"node\"], or globals like process and __dirname stop resolving. id: 0d3a8992-5664-412a-beda-511caf888e3c"},{"id":"1914b6f8-1bac-41ba-8fb8-c4110a0d0527","q":"What did TypeScript 6.0 deprecate?","a":"target es5, downlevelIteration, moduleResolution node10 and classic, module amd/umd/system/none, baseUrl, outFile, esModuleInterop false, legacy module namespace syntax and import assert. id: 33dc3048-438d-46ff-b841-8da90696bcf5"},{"id":"05b12c4b-7c8b-4512-a3f0-df5f803fcb5d","q":"What does \"ignoreDeprecations\": \"6.0\" do?","a":"It downgrades 6.0's deprecation errors back to warnings so a project can keep building on the old options - an escape hatch for migration, not a long-term setting, since 7.0 removes them outright. id: 04e9a4ea-7122-4511-8789-2eefe56af5bb"},{"id":"4f4032e4-f46a-4878-b800-8de57e00094f","q":"Why did TypeScript 6.0 exist at all?","a":"It is the bridge release: the last JavaScript-based compiler, whose job was to surface 7.0's breaking changes as deprecations while you were still on the familiar codebase. id: 67c35cf7-9d5f-43f9-bc8e-2ec358fcfcf9"},{"id":"44b5c76a-5b3c-43c5-8693-bed2be5344f9","q":"Which options are gone for good in TypeScript 7.0?","a":"target es5 and downlevelIteration, moduleResolution node10/classic, module amd/umd/systemjs/none, baseUrl, and esModuleInterop or allowSyntheticDefaultImports set to false. id: d9bd7254-8f89-4cc3-82e0-84651025c365"},{"id":"fcbbe690-3056-4f31-9e31-5d3fff7a9ba6","q":"How did TypeScript 7 change checking of plain JavaScript files?","a":"JS support was tightened to match TS rules: values can no longer stand in for types, Closure-style annotations are no longer recognised, and postfix ! is unsupported. id: 5299219e-b8dc-4ba5-888a-bfbd8d32de2e"},{"id":"ef93af1a-1e64-4a0d-bb71-4156a18ef9f6","q":"Can Vue, Svelte, Angular, Astro or MDX use TypeScript 7 today?","a":"Not yet. Embedded-language tooling depends on the compiler API, which is only stabilised in 7.1 - until then those frameworks stay on the 6.0 toolchain. id: a4727286-ba89-414a-8c17-aac9ce14d717"},{"id":"63cc50d6-3f6f-4b61-a053-1d4aaa093db0","q":"What was tsgo, and what does TypeScript 7 ship as now?","a":"tsgo was the preview executable in the @typescript/native-preview package. Stable 7.0 ships in the normal typescript package and is invoked as tsc. id: 94de8bec-36b1-4514-9c6a-48a8d5f7ea63"},{"id":"fe66aecb-8920-420e-b010-612bf060b45a","q":"How do you run TypeScript 6 and 7 side by side?","a":"Install the @typescript/typescript6 compatibility package, which lets both compilers coexist without name collisions while you migrate parts of a repo. id: 14ce4da3-676e-46d0-b2d2-429a5098d129"},{"id":"603642b3-de8d-4fe8-ad7e-2ad2a4937dd6","q":"What is planned for TypeScript 7.1, and when?","a":"Per the published iteration plan: beta 9 Sep 2026, RC 20 Oct, stable 10 Nov 2026. Headline item is the stable programmatic API, plus ES2026 lib/target and type on import attributes. id: 42b50981-9920-4870-ba9e-fb1b68218d10"},{"id":"a5a47e30-7380-4806-aa02-45db8f3cd007","q":"Why does the missing programmatic API in 7.0 matter?","a":"Everything built on the old JS compiler API - typed ESLint rules, ts-jest, bundler plugins, framework language tooling - cannot target the Go compiler until 7.1 stabilises that API. id: cadcffef-ab0d-4672-93b4-11d139a00262"},{"id":"48444bfa-20e8-41a6-80ea-816bbb43b483","q":"What release cadence has the team signalled after 7.0?","a":"A return to the pre-7.0 rhythm: featureful releases roughly every 3-4 months. id: d805fc6e-8fdb-45a2-b5ca-f42115292ecf"},{"id":"60760412-ef11-48fe-93bb-2713396c9202","q":"What is import defer, added in 5.9?","a":"Syntax like import defer * as ns from \"./m\" loads a module but delays evaluating it until one of its exports is actually touched - a startup-cost optimisation. 5.9 added the type-checking for it. id: 007ee4bd-0a15-4966-af4b-3afac5e73e63"},{"id":"5383af90-cf43-455a-ad49-3d17c8ac78b7","q":"Why did 5.9 add --module node20 when nodenext exists?","a":"nodenext floats: its behaviour shifts as Node evolves. node20 pins the semantics of Node 20 so builds stay reproducible, exactly as node18 did in 5.8. id: c2e93e14-6681-4bfa-a073-3bbaf2aef407"},{"id":"733ba477-1f83-401f-8580-ec7a1e3ca92e","q":"What else did 5.9 bring to everyday DX?","a":"A much leaner, more prescriptive tsc --init output, MDN-sourced summaries on DOM APIs, and expandable +/- quick-info hovers with a configurable length limit. id: ba71b7d6-4194-48cc-8f50-ff0154573852"},{"id":"2a561e66-775d-4984-8f87-2e0bb8c13caa","q":"What is --erasableSyntaxOnly (5.8) for?","a":"It errors on TypeScript constructs that emit runtime code - enums, namespaces, parameter properties - so the file is valid under Node's type-stripping, where types are simply erased. id: b4dad803-a465-4944-8c30-6bcf09740a42"},{"id":"f59f5e52-9ecd-4c7e-a26d-b4f156689323","q":"What return-type bug did 5.8 start catching?","a":"For a conditional expression in a return statement, each branch is now checked against the declared return type, instead of only the union-ed result. id: a2d80053-92da-48a3-b265-6546c25690a7"},{"id":"be4a193b-18f8-4424-8488-32a8c6f4e376","q":"What did 5.8 change about requiring ESM?","a":"Under --module nodenext, require() of an ES module is allowed, matching Node 22. The new --module node18 keeps the older rules for projects still on Node 18."}]},"index":0},{"id":"5bff8dda-0e15-4bcc-90d5-42c550f8567e","q":"What is TypeScript 7.0, and why is it a landmark release?","a":"It is the compiler and language service ported from JavaScript to Go, released 8 Jul 2026. Microsoft measured 7.7x-11.9x faster builds on real codebases with 6-26% lower memory use. id: 93a025f0-b6df-4153-8773-53d6f611032f","deck":"$5:props:children:1:props:cards:208:deck","index":1},{"id":"6168a21e-a0cb-4653-adf1-7aac88a13751","q":"Is TypeScript 7 a new language or type system?","a":"No - it is a port, not a redesign. The syntax, type system and checking semantics are the same as 6.0; what changed is the implementation, the supported config surface and the tooling around it. id: c5641be1-503d-4cda-b1df-cd6213ada69e","deck":"$5:props:children:1:props:cards:208:deck","index":2},{"id":"a5b86837-b828-41f6-a6f8-6c653941470c","q":"How does TypeScript 7 use multiple cores?","a":"New --checkers flag (default 4) runs type-checking across parallel workers and --builders parallelises project-reference builds; --singleThreaded turns parallelism off. id: 3ce72215-5be1-46f8-9319-49ceb655f045","deck":"$5:props:children:1:props:cards:208:deck","index":3},{"id":"be43a0a6-ae05-4314-8b5d-b7252493efdb","q":"What happened to tsc's watch mode and editor support in 7.0?","a":"--watch was rebuilt on a Go port of Parcel's file watcher, and the language server was rewritten on LSP - over 80% fewer failing commands and 60% fewer server crashes than 6.0. id: 19cff139-825b-4f1c-8cd9-132385e4d551","deck":"$5:props:children:1:props:cards:208:deck","index":4},{"id":"8f86d6bd-e680-4f45-9939-df6bd3129ab6","q":"Which tsconfig defaults changed on the way to 7.0?","a":"strict is now true, module defaults to esnext, target to es2025 (6.0), rootDir to the tsconfig's own directory, and types to an empty array. id: f39d0975-4ad7-4cf5-adf3-fa923cf30460","deck":"$5:props:children:1:props:cards:208:deck","index":5},{"id":"89b1ba4a-3129-4cc7-a0f1-039bfaa81e0e","q":"Why does \"types\": [] as a default break so many projects?","a":"Previously every package under node_modules/@types was auto-included. Now you must list them explicitly, e.g. \"types\": [\"node\"], or globals like process and __dirname stop resolving. id: 0d3a8992-5664-412a-beda-511caf888e3c","deck":"$5:props:children:1:props:cards:208:deck","index":6},{"id":"1914b6f8-1bac-41ba-8fb8-c4110a0d0527","q":"What did TypeScript 6.0 deprecate?","a":"target es5, downlevelIteration, moduleResolution node10 and classic, module amd/umd/system/none, baseUrl, outFile, esModuleInterop false, legacy module namespace syntax and import assert. id: 33dc3048-438d-46ff-b841-8da90696bcf5","deck":"$5:props:children:1:props:cards:208:deck","index":7},{"id":"05b12c4b-7c8b-4512-a3f0-df5f803fcb5d","q":"What does \"ignoreDeprecations\": \"6.0\" do?","a":"It downgrades 6.0's deprecation errors back to warnings so a project can keep building on the old options - an escape hatch for migration, not a long-term setting, since 7.0 removes them outright. id: 04e9a4ea-7122-4511-8789-2eefe56af5bb","deck":"$5:props:children:1:props:cards:208:deck","index":8},{"id":"4f4032e4-f46a-4878-b800-8de57e00094f","q":"Why did TypeScript 6.0 exist at all?","a":"It is the bridge release: the last JavaScript-based compiler, whose job was to surface 7.0's breaking changes as deprecations while you were still on the familiar codebase. id: 67c35cf7-9d5f-43f9-bc8e-2ec358fcfcf9","deck":"$5:props:children:1:props:cards:208:deck","index":9},{"id":"44b5c76a-5b3c-43c5-8693-bed2be5344f9","q":"Which options are gone for good in TypeScript 7.0?","a":"target es5 and downlevelIteration, moduleResolution node10/classic, module amd/umd/systemjs/none, baseUrl, and esModuleInterop or allowSyntheticDefaultImports set to false. id: d9bd7254-8f89-4cc3-82e0-84651025c365","deck":"$5:props:children:1:props:cards:208:deck","index":10},{"id":"fcbbe690-3056-4f31-9e31-5d3fff7a9ba6","q":"How did TypeScript 7 change checking of plain JavaScript files?","a":"JS support was tightened to match TS rules: values can no longer stand in for types, Closure-style annotations are no longer recognised, and postfix ! is unsupported. id: 5299219e-b8dc-4ba5-888a-bfbd8d32de2e","deck":"$5:props:children:1:props:cards:208:deck","index":11},{"id":"ef93af1a-1e64-4a0d-bb71-4156a18ef9f6","q":"Can Vue, Svelte, Angular, Astro or MDX use TypeScript 7 today?","a":"Not yet. Embedded-language tooling depends on the compiler API, which is only stabilised in 7.1 - until then those frameworks stay on the 6.0 toolchain. id: a4727286-ba89-414a-8c17-aac9ce14d717","deck":"$5:props:children:1:props:cards:208:deck","index":12},{"id":"63cc50d6-3f6f-4b61-a053-1d4aaa093db0","q":"What was tsgo, and what does TypeScript 7 ship as now?","a":"tsgo was the preview executable in the @typescript/native-preview package. Stable 7.0 ships in the normal typescript package and is invoked as tsc. id: 94de8bec-36b1-4514-9c6a-48a8d5f7ea63","deck":"$5:props:children:1:props:cards:208:deck","index":13},{"id":"fe66aecb-8920-420e-b010-612bf060b45a","q":"How do you run TypeScript 6 and 7 side by side?","a":"Install the @typescript/typescript6 compatibility package, which lets both compilers coexist without name collisions while you migrate parts of a repo. id: 14ce4da3-676e-46d0-b2d2-429a5098d129","deck":"$5:props:children:1:props:cards:208:deck","index":14},{"id":"603642b3-de8d-4fe8-ad7e-2ad2a4937dd6","q":"What is planned for TypeScript 7.1, and when?","a":"Per the published iteration plan: beta 9 Sep 2026, RC 20 Oct, stable 10 Nov 2026. Headline item is the stable programmatic API, plus ES2026 lib/target and type on import attributes. id: 42b50981-9920-4870-ba9e-fb1b68218d10","deck":"$5:props:children:1:props:cards:208:deck","index":15},{"id":"a5a47e30-7380-4806-aa02-45db8f3cd007","q":"Why does the missing programmatic API in 7.0 matter?","a":"Everything built on the old JS compiler API - typed ESLint rules, ts-jest, bundler plugins, framework language tooling - cannot target the Go compiler until 7.1 stabilises that API. id: cadcffef-ab0d-4672-93b4-11d139a00262","deck":"$5:props:children:1:props:cards:208:deck","index":16},{"id":"48444bfa-20e8-41a6-80ea-816bbb43b483","q":"What release cadence has the team signalled after 7.0?","a":"A return to the pre-7.0 rhythm: featureful releases roughly every 3-4 months. id: d805fc6e-8fdb-45a2-b5ca-f42115292ecf","deck":"$5:props:children:1:props:cards:208:deck","index":17},{"id":"60760412-ef11-48fe-93bb-2713396c9202","q":"What is import defer, added in 5.9?","a":"Syntax like import defer * as ns from \"./m\" loads a module but delays evaluating it until one of its exports is actually touched - a startup-cost optimisation. 5.9 added the type-checking for it. id: 007ee4bd-0a15-4966-af4b-3afac5e73e63","deck":"$5:props:children:1:props:cards:208:deck","index":18},{"id":"5383af90-cf43-455a-ad49-3d17c8ac78b7","q":"Why did 5.9 add --module node20 when nodenext exists?","a":"nodenext floats: its behaviour shifts as Node evolves. node20 pins the semantics of Node 20 so builds stay reproducible, exactly as node18 did in 5.8. id: c2e93e14-6681-4bfa-a073-3bbaf2aef407","deck":"$5:props:children:1:props:cards:208:deck","index":19},{"id":"733ba477-1f83-401f-8580-ec7a1e3ca92e","q":"What else did 5.9 bring to everyday DX?","a":"A much leaner, more prescriptive tsc --init output, MDN-sourced summaries on DOM APIs, and expandable +/- quick-info hovers with a configurable length limit. id: ba71b7d6-4194-48cc-8f50-ff0154573852","deck":"$5:props:children:1:props:cards:208:deck","index":20},{"id":"2a561e66-775d-4984-8f87-2e0bb8c13caa","q":"What is --erasableSyntaxOnly (5.8) for?","a":"It errors on TypeScript constructs that emit runtime code - enums, namespaces, parameter properties - so the file is valid under Node's type-stripping, where types are simply erased. id: b4dad803-a465-4944-8c30-6bcf09740a42","deck":"$5:props:children:1:props:cards:208:deck","index":21},{"id":"f59f5e52-9ecd-4c7e-a26d-b4f156689323","q":"What return-type bug did 5.8 start catching?","a":"For a conditional expression in a return statement, each branch is now checked against the declared return type, instead of only the union-ed result. id: a2d80053-92da-48a3-b265-6546c25690a7","deck":"$5:props:children:1:props:cards:208:deck","index":22},{"id":"be4a193b-18f8-4424-8488-32a8c6f4e376","q":"What did 5.8 change about requiring ESM?","a":"Under --module nodenext, require() of an ES module is allowed, matching Node 22. The new --module node18 keeps the older rules for projects still on Node 18.","deck":"$5:props:children:1:props:cards:208:deck","index":23},{"id":"c9dbc60f-ea49-4f63-a2d9-c1ccd532014b","q":"unknown vs any vs never - when do you reach for each?","a":"any switches checking off and infects everything it touches; unknown is the safe top type you must narrow before use; never is the empty type returned by functions that never return and left over from exhaustive narrowing. Type external input as unknown, never any. id: b8d77ea2-5677-4eb2-bd9a-d40594866c50","deck":{"slug":"typescript-in-practice","name":"TypeScript in practice","blurb":"Type-system mechanics and applied React/Next.js typing","tint":"#F2CDCA","ink":"#9B2F27","cards":[{"id":"c9dbc60f-ea49-4f63-a2d9-c1ccd532014b","q":"unknown vs any vs never - when do you reach for each?","a":"any switches checking off and infects everything it touches; unknown is the safe top type you must narrow before use; never is the empty type returned by functions that never return and left over from exhaustive narrowing. Type external input as unknown, never any. id: b8d77ea2-5677-4eb2-bd9a-d40594866c50"},{"id":"2ba5d820-fe27-40a3-a903-1f65fb9119b7","q":"What does satisfies do that a type annotation does not?","a":"satisfies checks a value against a type without widening it, so you keep the literal inference. const routes = {...} satisfies Record<string, Route> validates the shape but keeps the exact keys for autocomplete. id: 57f4a6ed-1dca-44c8-b5d1-25c8ea740e14"},{"id":"cffb7093-84d1-416d-beb5-2b7e9c424e1d","q":"How do you get exhaustiveness checking on a discriminated union?","a":"In the default branch assign the value to never: const _x: never = value. If a new variant is added the assignment stops compiling, so the switch fails at build time rather than silently falling through. id: f86ebffe-788b-4f48-bc68-395d13f69b00"},{"id":"f10ade39-e8df-489a-a8cb-ffcdd56b030c","q":"What is a user-defined type guard, and what changed in 5.5?","a":"A function returning x is Foo that narrows at call sites. Since 5.5 TypeScript infers those predicates for simple functions, so a filter callback like x => x !== null can narrow without the manual annotation. id: ffb5b613-0135-4442-b78d-58d48c085441"},{"id":"a9668684-1e1b-4565-90d6-3fa78ba6a58b","q":"Explain conditional types and infer in one breath.","a":"T extends U ? A : B picks a branch per type, and infer names a type captured during that match: type El<T> = T extends (infer U)[] ? U : never. Over a union the conditional distributes member by member. id: c8183ba5-ee71-40d3-9a7e-03324002865a"},{"id":"29515817-33ba-41b3-9c8e-86e4a86509d9","q":"What is a mapped type, and what does key remapping add?","a":"{ [K in keyof T]: ... } rebuilds a type key by key; as in the key position renames or drops keys, e.g. { [K in keyof T as `get${Capitalize<K & string>}`]: () => T[K] } to generate getters. id: 0a438d6f-3b64-4d99-9279-71e0ea1312ee"},{"id":"91faffd2-c202-4f62-bbdc-89c0d6787f38","q":"Which built-in utility types should be reflexive for you?","a":"Partial, Required, Readonly, Pick, Omit, Record, Exclude, Extract, NonNullable, ReturnType, Parameters, Awaited. Most are a mapped or conditional type you could write yourself in one line. id: 674406a5-ba7e-4f01-a52f-872bdefd0aad"},{"id":"5376378c-ca18-4c12-ae2a-4d005abd649e","q":"interface vs type alias - what actually differs?","a":"Interfaces support declaration merging and are used for augmenting other modules' types; type aliases can express unions, tuples, conditionals and mapped types. Use interface for object contracts, type for anything computed. id: d1662558-132b-47f2-936b-d997d36c7929"},{"id":"b1a778f5-80e2-466e-8d7d-15f58398736b","q":"What is structural typing, and where does it bite?","a":"Compatibility is by shape, not by name, so any object with the right members fits. The exception is excess property checking on fresh object literals, which is why an inline literal errors but the same value assigned via a variable does not. id: cefb6c2b-3491-4c44-aaaf-532f235bac87"},{"id":"b46ca36a-a004-43bf-95c8-38e072f235bd","q":"How do you get nominal typing in a structural system?","a":"Brand the type: type UserId = string & { readonly __brand: 'UserId' }. A plain string no longer assigns, so you cannot pass an OrderId where a UserId belongs - useful for ids, currency and unvalidated input. id: 87669230-5bc8-49b7-9816-767f460a3f4c"},{"id":"bce6e970-7f7b-493c-be4c-2fffdacfabd2","q":"keyof, typeof and T[K] - what does each give you?","a":"typeof lifts a value into its type, keyof gives the union of a type's keys, and T[K] is indexed access. Together: typeof config, keyof typeof config, and config[keyof typeof config] for the union of its values. id: 0f71b44b-074f-4b71-80af-dd80460fbb46"},{"id":"d9cd7567-3052-4a10-b0aa-5c76f226d872","q":"What does as const do?","a":"It makes an object or array deeply readonly and infers literal types instead of widened ones, so ['a','b'] as const becomes readonly ['a','b'] - the usual way to derive a union of literals from a value. id: 84378703-2c28-4994-ad81-6aca8a13a226"},{"id":"bb6582ab-17e7-4bb0-9f5f-8a6f0e3f2b71","q":"What is a const type parameter, and why does it matter?","a":"<const T> on a generic makes call-site arguments infer as literals without the caller writing as const, so a helper can return precise literal types from a plain inline array or object. id: 8c015200-4cfb-432c-9d7d-94315d7e40c7"},{"id":"5862e8c0-1920-4dcb-83cd-71ec048b2175","q":"Template literal types - give a real use.","a":"They build string types from other types: type Ev = `on${Capitalize<'click' | 'focus'>}` gives 'onClick' | 'onFocus'. Common for event names, route paths and CSS-in-TS keys. id: c514b9eb-ce9f-46a6-81a9-2cbb2f1527e0"},{"id":"563d4b6a-ed41-4567-8cca-0da5d854c6b2","q":"Why can index signatures lie, and what fixes it?","a":"Record<string, T> claims every key exists, so obj['missing'] types as T but is at runtime undefined. --noUncheckedIndexedAccess adds | undefined to indexed reads and forces you to check. id: 2b610f9f-f8ca-4723-aa33-9915ebb459ed"},{"id":"a096684d-2a65-4ab6-9130-f6f5fe11e8da","q":"When are function overloads the right tool?","a":"When the return type depends on the argument shape in a way a union cannot express. Otherwise prefer a union parameter or a generic - overloads are unchecked against each other and easy to get wrong. id: 76539078-1131-4e81-a6f5-9dbfd843bfb1"},{"id":"4bff6723-1afa-4329-be6d-850ad2d08741","q":"Why do people avoid enums, and what replaces them?","a":"Enums emit runtime code, break under Node's type-stripping and --erasableSyntaxOnly, and numeric enums accept any number. Use a const object plus typeof obj[keyof typeof obj], or a plain string union. id: c467dcdd-5d9c-4b6e-954a-944ac94d309f"},{"id":"7a6f4b7e-5b9c-4183-9f3e-a4fc29ea576c","q":"What is strictFunctionTypes actually protecting you from?","a":"It checks function parameters contravariantly, so a handler taking a narrower parameter cannot be assigned where a wider one is expected. Method-shorthand parameters stay bivariant, which is why the same bug slips through on interfaces declared with method syntax. id: 1a508d35-3d3e-4b6b-b38a-db9fc4ee6c05"},{"id":"fb5bcc49-0075-4b33-ae02-052c88cd8a71","q":"Why import type, and what does isolatedModules demand?","a":"import type marks an import as erasable so bundlers and single-file transpilers do not keep a runtime import. isolatedModules requires every file to be transpilable alone, which is what Next.js, esbuild and SWC do. id: b10e2203-0fb7-4df1-8a31-a3fa3352d081"},{"id":"dffcbfa0-67b7-4e1b-a803-51cd7c265334","q":"What is declaration merging / module augmentation for?","a":"declare module '...' reopens another package's types to add your own - extending Express's Request, next-auth's Session, or adding keys to ProcessEnv - without forking the package. id: c864349b-ef3b-4ac2-b06b-623a5bcbc602"},{"id":"34e0b43c-342c-49c0-b15c-b9b6a5efeb0a","q":"How should types cross a network boundary?","a":"Do not assert. Parse at the edge with a runtime validator (zod, valibot) and infer the static type from the schema, so one definition guards both runtime and compile time. as Response is a lie the compiler cannot check. id: 2c196974-34da-4687-a702-427ff12c090e"},{"id":"12e47fce-f963-442d-b821-518c4826f598","q":"ts-ignore vs ts-expect-error - which and why?","a":"@ts-expect-error, because it errors when the line stops failing, so the suppression gets cleaned up. @ts-ignore stays silent forever and hides the next real bug on that line. id: 840f1859-3b08-4bbf-9516-77414d90ff04"},{"id":"e3ddb575-9df6-4c8e-8e7a-72a38572ba5e","q":"What is NoInfer<T> for?","a":"It blocks a type parameter from being inferred from that position, so one argument drives inference and another is only checked against it - e.g. a default value that must match the options array, not widen it. id: 1caa3471-733e-413e-9a61-2d8265e4b2ef"},{"id":"3117a26d-42ae-49a5-b1c4-c30f7736faf7","q":"You inherit a large JS codebase. How do you get it to strict TS?","a":"Turn on allowJs and checkJs with strict off, rename leaf modules first, type the boundaries (API, config, shared models) before internals, then enable strict flags one at a time - strictNullChecks last and loudest. id: 0df5f104-fd37-4ffb-88f3-f2e41ae9c16e"},{"id":"67250a73-ccf8-49a9-a22b-7cf173076962","q":"How do you type a React component's props well?","a":"Declare an explicit props type and destructure; use React.ReactNode for renderable children and ComponentProps<'button'> to inherit native props. Avoid React.FC - it adds little and complicates generics. id: 7de8559c-2da5-4c68-ab61-8272d2576db3"},{"id":"9a7df371-04d5-4c11-920d-027598343e6c","q":"useState and useRef - where does inference fail?","a":"useState(null) infers null, so pass the generic: useState<User | null>(null). For DOM refs use useRef<HTMLInputElement>(null) which gives the readonly ref React assigns; useRef<number>(0) gives a mutable box. id: daed2ef5-f046-4618-b086-6c505f5d99ea"},{"id":"091e151a-1661-4981-a18b-03283c4aa4ca","q":"How do you write a generic React component?","a":"Type the props with a parameter and let inference flow from the props: function List<T>({ items, render }: { items: T[]; render: (item: T) => ReactNode }). The caller gets T inferred from items. id: 587d069c-f13d-4f8a-b455-8efe4f1debf9"},{"id":"5daaacaa-6f59-47ec-8ee7-2cd0e6f36d21","q":"Why is useReducer a showcase for discriminated unions?","a":"Actions are a union tagged by type, so the reducer's switch narrows the payload per case and a never default makes new actions a compile error - a state machine the compiler checks for you. id: d6c62020-f2e1-4e01-b32f-cc23c458e774"},{"id":"c97512c6-66f1-4d88-b387-8fc93daf1324","q":"How do you type event handlers without guessing?","a":"Take the type from the element: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement>. Better still, type the handler by the prop - ComponentProps<'input'>['onChange'] - and let the parameter infer. id: d6fc881a-4eb2-4fd8-a8d3-755e7b8fae4d"},{"id":"8803e489-4360-42c5-85a6-3573ca5e18ef","q":"What does the Server/Client boundary mean for types?","a":"Anything passed from a Server Component to a Client Component must be serializable, so the type system will let you pass a function or Date shape that fails at runtime. Keep the boundary props to plain data. id: 08393373-a5c4-4ff0-8847-8ccfdd974d57"},{"id":"54632168-80fd-43a2-a7fd-486c51685d28","q":"How do you get end-to-end type safety from route to component?","a":"Define the model once, derive everything else: infer the response type from the schema or handler, export it, and have the client import that type instead of redeclaring it. Duplicate interfaces are how drift starts. id: e074cdb9-3b1f-4aea-91d6-e3b1b2a0b20a"},{"id":"5d66ce83-2d48-470b-b732-43f6abf615ef","q":"Which strict flags do you turn on beyond strict: true?","a":"noUncheckedIndexedAccess, exactOptionalPropertyTypes and noImplicitOverride are not in the strict bundle. Say why you would add them - and why exactOptionalPropertyTypes is the one that breaks the most existing code."}]},"index":0},{"id":"2ba5d820-fe27-40a3-a903-1f65fb9119b7","q":"What does satisfies do that a type annotation does not?","a":"satisfies checks a value against a type without widening it, so you keep the literal inference. const routes = {...} satisfies Record<string, Route> validates the shape but keeps the exact keys for autocomplete. id: 57f4a6ed-1dca-44c8-b5d1-25c8ea740e14","deck":"$5:props:children:1:props:cards:232:deck","index":1},{"id":"cffb7093-84d1-416d-beb5-2b7e9c424e1d","q":"How do you get exhaustiveness checking on a discriminated union?","a":"In the default branch assign the value to never: const _x: never = value. If a new variant is added the assignment stops compiling, so the switch fails at build time rather than silently falling through. id: f86ebffe-788b-4f48-bc68-395d13f69b00","deck":"$5:props:children:1:props:cards:232:deck","index":2},{"id":"f10ade39-e8df-489a-a8cb-ffcdd56b030c","q":"What is a user-defined type guard, and what changed in 5.5?","a":"A function returning x is Foo that narrows at call sites. Since 5.5 TypeScript infers those predicates for simple functions, so a filter callback like x => x !== null can narrow without the manual annotation. id: ffb5b613-0135-4442-b78d-58d48c085441","deck":"$5:props:children:1:props:cards:232:deck","index":3},{"id":"a9668684-1e1b-4565-90d6-3fa78ba6a58b","q":"Explain conditional types and infer in one breath.","a":"T extends U ? A : B picks a branch per type, and infer names a type captured during that match: type El<T> = T extends (infer U)[] ? U : never. Over a union the conditional distributes member by member. id: c8183ba5-ee71-40d3-9a7e-03324002865a","deck":"$5:props:children:1:props:cards:232:deck","index":4},{"id":"29515817-33ba-41b3-9c8e-86e4a86509d9","q":"What is a mapped type, and what does key remapping add?","a":"{ [K in keyof T]: ... } rebuilds a type key by key; as in the key position renames or drops keys, e.g. { [K in keyof T as `get${Capitalize<K & string>}`]: () => T[K] } to generate getters. id: 0a438d6f-3b64-4d99-9279-71e0ea1312ee","deck":"$5:props:children:1:props:cards:232:deck","index":5},{"id":"91faffd2-c202-4f62-bbdc-89c0d6787f38","q":"Which built-in utility types should be reflexive for you?","a":"Partial, Required, Readonly, Pick, Omit, Record, Exclude, Extract, NonNullable, ReturnType, Parameters, Awaited. Most are a mapped or conditional type you could write yourself in one line. id: 674406a5-ba7e-4f01-a52f-872bdefd0aad","deck":"$5:props:children:1:props:cards:232:deck","index":6},{"id":"5376378c-ca18-4c12-ae2a-4d005abd649e","q":"interface vs type alias - what actually differs?","a":"Interfaces support declaration merging and are used for augmenting other modules' types; type aliases can express unions, tuples, conditionals and mapped types. Use interface for object contracts, type for anything computed. id: d1662558-132b-47f2-936b-d997d36c7929","deck":"$5:props:children:1:props:cards:232:deck","index":7},{"id":"b1a778f5-80e2-466e-8d7d-15f58398736b","q":"What is structural typing, and where does it bite?","a":"Compatibility is by shape, not by name, so any object with the right members fits. The exception is excess property checking on fresh object literals, which is why an inline literal errors but the same value assigned via a variable does not. id: cefb6c2b-3491-4c44-aaaf-532f235bac87","deck":"$5:props:children:1:props:cards:232:deck","index":8},{"id":"b46ca36a-a004-43bf-95c8-38e072f235bd","q":"How do you get nominal typing in a structural system?","a":"Brand the type: type UserId = string & { readonly __brand: 'UserId' }. A plain string no longer assigns, so you cannot pass an OrderId where a UserId belongs - useful for ids, currency and unvalidated input. id: 87669230-5bc8-49b7-9816-767f460a3f4c","deck":"$5:props:children:1:props:cards:232:deck","index":9},{"id":"bce6e970-7f7b-493c-be4c-2fffdacfabd2","q":"keyof, typeof and T[K] - what does each give you?","a":"typeof lifts a value into its type, keyof gives the union of a type's keys, and T[K] is indexed access. Together: typeof config, keyof typeof config, and config[keyof typeof config] for the union of its values. id: 0f71b44b-074f-4b71-80af-dd80460fbb46","deck":"$5:props:children:1:props:cards:232:deck","index":10},{"id":"d9cd7567-3052-4a10-b0aa-5c76f226d872","q":"What does as const do?","a":"It makes an object or array deeply readonly and infers literal types instead of widened ones, so ['a','b'] as const becomes readonly ['a','b'] - the usual way to derive a union of literals from a value. id: 84378703-2c28-4994-ad81-6aca8a13a226","deck":"$5:props:children:1:props:cards:232:deck","index":11},{"id":"bb6582ab-17e7-4bb0-9f5f-8a6f0e3f2b71","q":"What is a const type parameter, and why does it matter?","a":"<const T> on a generic makes call-site arguments infer as literals without the caller writing as const, so a helper can return precise literal types from a plain inline array or object. id: 8c015200-4cfb-432c-9d7d-94315d7e40c7","deck":"$5:props:children:1:props:cards:232:deck","index":12},{"id":"5862e8c0-1920-4dcb-83cd-71ec048b2175","q":"Template literal types - give a real use.","a":"They build string types from other types: type Ev = `on${Capitalize<'click' | 'focus'>}` gives 'onClick' | 'onFocus'. Common for event names, route paths and CSS-in-TS keys. id: c514b9eb-ce9f-46a6-81a9-2cbb2f1527e0","deck":"$5:props:children:1:props:cards:232:deck","index":13},{"id":"563d4b6a-ed41-4567-8cca-0da5d854c6b2","q":"Why can index signatures lie, and what fixes it?","a":"Record<string, T> claims every key exists, so obj['missing'] types as T but is at runtime undefined. --noUncheckedIndexedAccess adds | undefined to indexed reads and forces you to check. id: 2b610f9f-f8ca-4723-aa33-9915ebb459ed","deck":"$5:props:children:1:props:cards:232:deck","index":14},{"id":"a096684d-2a65-4ab6-9130-f6f5fe11e8da","q":"When are function overloads the right tool?","a":"When the return type depends on the argument shape in a way a union cannot express. Otherwise prefer a union parameter or a generic - overloads are unchecked against each other and easy to get wrong. id: 76539078-1131-4e81-a6f5-9dbfd843bfb1","deck":"$5:props:children:1:props:cards:232:deck","index":15},{"id":"4bff6723-1afa-4329-be6d-850ad2d08741","q":"Why do people avoid enums, and what replaces them?","a":"Enums emit runtime code, break under Node's type-stripping and --erasableSyntaxOnly, and numeric enums accept any number. Use a const object plus typeof obj[keyof typeof obj], or a plain string union. id: c467dcdd-5d9c-4b6e-954a-944ac94d309f","deck":"$5:props:children:1:props:cards:232:deck","index":16},{"id":"7a6f4b7e-5b9c-4183-9f3e-a4fc29ea576c","q":"What is strictFunctionTypes actually protecting you from?","a":"It checks function parameters contravariantly, so a handler taking a narrower parameter cannot be assigned where a wider one is expected. Method-shorthand parameters stay bivariant, which is why the same bug slips through on interfaces declared with method syntax. id: 1a508d35-3d3e-4b6b-b38a-db9fc4ee6c05","deck":"$5:props:children:1:props:cards:232:deck","index":17},{"id":"fb5bcc49-0075-4b33-ae02-052c88cd8a71","q":"Why import type, and what does isolatedModules demand?","a":"import type marks an import as erasable so bundlers and single-file transpilers do not keep a runtime import. isolatedModules requires every file to be transpilable alone, which is what Next.js, esbuild and SWC do. id: b10e2203-0fb7-4df1-8a31-a3fa3352d081","deck":"$5:props:children:1:props:cards:232:deck","index":18},{"id":"dffcbfa0-67b7-4e1b-a803-51cd7c265334","q":"What is declaration merging / module augmentation for?","a":"declare module '...' reopens another package's types to add your own - extending Express's Request, next-auth's Session, or adding keys to ProcessEnv - without forking the package. id: c864349b-ef3b-4ac2-b06b-623a5bcbc602","deck":"$5:props:children:1:props:cards:232:deck","index":19},{"id":"34e0b43c-342c-49c0-b15c-b9b6a5efeb0a","q":"How should types cross a network boundary?","a":"Do not assert. Parse at the edge with a runtime validator (zod, valibot) and infer the static type from the schema, so one definition guards both runtime and compile time. as Response is a lie the compiler cannot check. id: 2c196974-34da-4687-a702-427ff12c090e","deck":"$5:props:children:1:props:cards:232:deck","index":20},{"id":"12e47fce-f963-442d-b821-518c4826f598","q":"ts-ignore vs ts-expect-error - which and why?","a":"@ts-expect-error, because it errors when the line stops failing, so the suppression gets cleaned up. @ts-ignore stays silent forever and hides the next real bug on that line. id: 840f1859-3b08-4bbf-9516-77414d90ff04","deck":"$5:props:children:1:props:cards:232:deck","index":21},{"id":"e3ddb575-9df6-4c8e-8e7a-72a38572ba5e","q":"What is NoInfer<T> for?","a":"It blocks a type parameter from being inferred from that position, so one argument drives inference and another is only checked against it - e.g. a default value that must match the options array, not widen it. id: 1caa3471-733e-413e-9a61-2d8265e4b2ef","deck":"$5:props:children:1:props:cards:232:deck","index":22},{"id":"3117a26d-42ae-49a5-b1c4-c30f7736faf7","q":"You inherit a large JS codebase. How do you get it to strict TS?","a":"Turn on allowJs and checkJs with strict off, rename leaf modules first, type the boundaries (API, config, shared models) before internals, then enable strict flags one at a time - strictNullChecks last and loudest. id: 0df5f104-fd37-4ffb-88f3-f2e41ae9c16e","deck":"$5:props:children:1:props:cards:232:deck","index":23},{"id":"67250a73-ccf8-49a9-a22b-7cf173076962","q":"How do you type a React component's props well?","a":"Declare an explicit props type and destructure; use React.ReactNode for renderable children and ComponentProps<'button'> to inherit native props. Avoid React.FC - it adds little and complicates generics. id: 7de8559c-2da5-4c68-ab61-8272d2576db3","deck":"$5:props:children:1:props:cards:232:deck","index":24},{"id":"9a7df371-04d5-4c11-920d-027598343e6c","q":"useState and useRef - where does inference fail?","a":"useState(null) infers null, so pass the generic: useState<User | null>(null). For DOM refs use useRef<HTMLInputElement>(null) which gives the readonly ref React assigns; useRef<number>(0) gives a mutable box. id: daed2ef5-f046-4618-b086-6c505f5d99ea","deck":"$5:props:children:1:props:cards:232:deck","index":25},{"id":"091e151a-1661-4981-a18b-03283c4aa4ca","q":"How do you write a generic React component?","a":"Type the props with a parameter and let inference flow from the props: function List<T>({ items, render }: { items: T[]; render: (item: T) => ReactNode }). The caller gets T inferred from items. id: 587d069c-f13d-4f8a-b455-8efe4f1debf9","deck":"$5:props:children:1:props:cards:232:deck","index":26},{"id":"5daaacaa-6f59-47ec-8ee7-2cd0e6f36d21","q":"Why is useReducer a showcase for discriminated unions?","a":"Actions are a union tagged by type, so the reducer's switch narrows the payload per case and a never default makes new actions a compile error - a state machine the compiler checks for you. id: d6c62020-f2e1-4e01-b32f-cc23c458e774","deck":"$5:props:children:1:props:cards:232:deck","index":27},{"id":"c97512c6-66f1-4d88-b387-8fc93daf1324","q":"How do you type event handlers without guessing?","a":"Take the type from the element: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement>. Better still, type the handler by the prop - ComponentProps<'input'>['onChange'] - and let the parameter infer. id: d6fc881a-4eb2-4fd8-a8d3-755e7b8fae4d","deck":"$5:props:children:1:props:cards:232:deck","index":28},{"id":"8803e489-4360-42c5-85a6-3573ca5e18ef","q":"What does the Server/Client boundary mean for types?","a":"Anything passed from a Server Component to a Client Component must be serializable, so the type system will let you pass a function or Date shape that fails at runtime. Keep the boundary props to plain data. id: 08393373-a5c4-4ff0-8847-8ccfdd974d57","deck":"$5:props:children:1:props:cards:232:deck","index":29},{"id":"54632168-80fd-43a2-a7fd-486c51685d28","q":"How do you get end-to-end type safety from route to component?","a":"Define the model once, derive everything else: infer the response type from the schema or handler, export it, and have the client import that type instead of redeclaring it. Duplicate interfaces are how drift starts. id: e074cdb9-3b1f-4aea-91d6-e3b1b2a0b20a","deck":"$5:props:children:1:props:cards:232:deck","index":30},{"id":"5d66ce83-2d48-470b-b732-43f6abf615ef","q":"Which strict flags do you turn on beyond strict: true?","a":"noUncheckedIndexedAccess, exactOptionalPropertyTypes and noImplicitOverride are not in the strict bundle. Say why you would add them - and why exactOptionalPropertyTypes is the one that breaks the most existing code.","deck":"$5:props:children:1:props:cards:232:deck","index":31}],"slugs":["react19","cap","acid","solid","auth-and-sessions","idempotency-retries-and-webhooks","kafka","next-js-app-router","next-js-caching-and-data-fetching","react-in-practice","typescript-5-8-7-0","typescript-in-practice"],"mode":"study","title":"Everything"}]]}] </article></body></html>

5:["$","div",null,{"className":"mx-auto w-full max-w-3xl","children":[["$","div",null,{"className":"mb-6 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2","children":[["$","h1",null,{"className":"text-2xl font-medium tracking-tight","children":"Everything"}],["$","div",null,{"className":"flex items-baseline gap-4","children":[["$","$L2",null,{"href":"/print/all","className":"label text-muted hover:text-ink","children":"Print"}],["$","$L2",null,{"href":"/","className":"label text-muted hover:text-ink","children":"All decks"}]]}]]}],["$","$L10",null,{"cards":[{"id":"b122d58d-4dea-4338-b8fe-721c092bdffe","q":"What is the latest React version, and is 'React 20' real?","a":"React 19.2 (19.0 shipped Dec 2024; 19.2 landed Oct 2025). No React 20 exists. React is now stewarded by the independent React Foundation under the Linux Foundation.","deck":{"slug":"react19","name":"React 19","blurb":"Actions, Server Components, and the 19.2 additions","tint":"#DCD6F3","ink":"#7A6DBE","cards":[{"id":"b122d58d-4dea-4338-b8fe-721c092bdffe","q":"What is the latest React version, and is 'React 20' real?","a":"React 19.2 (19.0 shipped Dec 2024; 19.2 landed Oct 2025). No React 20 exists. React is now stewarded by the independent React Foundation under the Linux Foundation."},{"id":"49e1ac33-f41a-414a-8a51-51311ce27f82","q":"What are Actions in React 19?","a":"Async functions passed to a transition or form. React automatically manages the pending state, error handling, optimistic updates, and form resets you used to hand-write."},{"id":"a2778f4b-7bc6-4496-bfec-64cfbb4dcd3f","q":"What does useActionState do?","a":"Wraps an action and returns [state, formAction, isPending] — replacing hand-rolled loading/error/result state for submissions. Pass formAction straight to

."},{"id":"ac76bfe9-ed5c-43b8-b154-cf957f28e6ec","q":"What does useFormStatus do?","a":"Lets a child component read the status (pending, data) of its nearest parent — like context for forms. Classic use: a submit button that disables itself."},{"id":"a60ba84e-a39f-4c1d-bd86-de7aa1f1c68d","q":"What does useOptimistic do?","a":"Shows a temporary 'optimistic' value while an async action is in flight, then automatically reverts to the real state when the action completes or fails."},{"id":"c91ec6a5-7dfc-4ba6-bc60-7ad616e07426","q":"What is the use() API?","a":"Reads a promise or context during render, suspending until the promise resolves. Unlike hooks, use() can be called conditionally and inside loops."},{"id":"0b9a20f3-c464-49aa-af66-d12a616a0bf5","q":"What are React Server Components (RSC)?","a":"Components that run only on the server and send serialized UI — not JavaScript — to the client. Zero bundle cost. 'use client' marks where the client-side world begins."},{"id":"8f5b43e2-13c1-4e19-9860-ae3a0b405df7","q":"'use client' vs 'use server' — what does each mark?","a":"'use client': the boundary where components ship to the browser. 'use server': marks Server Functions callable from the client — NOT server components (those are the default, no directive)."},{"id":"b3410866-4534-4e8c-9639-42d702d8d83b","q":"What replaced forwardRef?","a":"Nothing is needed anymore: in React 19, ref is a regular prop on function components. forwardRef is deprecated and codemods remove it."},{"id":"53272e2f-fc1b-4c3b-81a9-b5a7f8bb3505","q":"How does React 19 handle and <meta> tags?","a":"Render them anywhere in a component and React hoists them to <head> automatically — native document metadata support, plus stylesheet and async script precedence handling."},{"id":"6677258c-84d1-49d0-a37e-b29af3d8698f","q":"What is the React Compiler?","a":"A build-time compiler (stable 1.0, late 2025) that auto-memoizes components and values by understanding the Rules of React — retiring most manual useMemo, useCallback, and React.memo."},{"id":"2663d270-18df-4796-9b82-40f8870c3808","q":"What is the <Activity> component (19.2)?","a":"Wraps UI with modes 'visible' and 'hidden'. Hidden trees keep their state but unmount effects and render at low priority — ideal for tabs or pre-rendering likely-next screens."},{"id":"90611cf3-b857-4bdf-9ce4-1caf37da0135","q":"What does useEffectEvent do (19.2)?","a":"Extracts the 'event' part of an effect so it always reads the latest props/state without being a dependency — eliminating stale closures and effects that re-fire too often."},{"id":"cc64e2ec-ab6a-4b9c-94c0-3fb6ccb798f1","q":"Name three smaller React 19 quality-of-life changes.","a":"Context used directly as a provider (<MyContext> instead of .Provider), ref callbacks can return cleanup functions, and hydration errors now show a single readable diff."},{"id":"f1604993-898a-4907-9718-6774d854dca8","q":"Which headline features are still NOT stable in 19.2?","a":"View Transitions and Fragment Refs — real and demoed, but only in Canary/Experimental channels. Saying they're stable in an interview is a red flag."},{"id":"1ae833df-e286-4a1f-81f0-88cd12e1ab04","q":"Interview one-liner: what's the architectural theme of React 19?","a":"Work moves off the client and out of your hands: RSC shifts rendering to the server, Actions absorb form boilerplate, and the Compiler absorbs memoization — less JS shipped, less code to maintain."}]},"index":0},{"id":"49e1ac33-f41a-414a-8a51-51311ce27f82","q":"What are Actions in React 19?","a":"Async functions passed to a transition or form. React automatically manages the pending state, error handling, optimistic updates, and form resets you used to hand-write.","deck":"$5:props:children:1:props:cards:0:deck","index":1},{"id":"a2778f4b-7bc6-4496-bfec-64cfbb4dcd3f","q":"What does useActionState do?","a":"Wraps an action and returns [state, formAction, isPending] — replacing hand-rolled loading/error/result state for submissions. Pass formAction straight to <form action={...}>.","deck":"$5:props:children:1:props:cards:0:deck","index":2},{"id":"ac76bfe9-ed5c-43b8-b154-cf957f28e6ec","q":"What does useFormStatus do?","a":"Lets a child component read the status (pending, data) of its nearest parent <form> — like context for forms. Classic use: a submit button that disables itself.","deck":"$5:props:children:1:props:cards:0:deck","index":3},{"id":"a60ba84e-a39f-4c1d-bd86-de7aa1f1c68d","q":"What does useOptimistic do?","a":"Shows a temporary 'optimistic' value while an async action is in flight, then automatically reverts to the real state when the action completes or fails.","deck":"$5:props:children:1:props:cards:0:deck","index":4},{"id":"c91ec6a5-7dfc-4ba6-bc60-7ad616e07426","q":"What is the use() API?","a":"Reads a promise or context during render, suspending until the promise resolves. Unlike hooks, use() can be called conditionally and inside loops.","deck":"$5:props:children:1:props:cards:0:deck","index":5},{"id":"0b9a20f3-c464-49aa-af66-d12a616a0bf5","q":"What are React Server Components (RSC)?","a":"Components that run only on the server and send serialized UI — not JavaScript — to the client. Zero bundle cost. 'use client' marks where the client-side world begins.","deck":"$5:props:children:1:props:cards:0:deck","index":6},{"id":"8f5b43e2-13c1-4e19-9860-ae3a0b405df7","q":"'use client' vs 'use server' — what does each mark?","a":"'use client': the boundary where components ship to the browser. 'use server': marks Server Functions callable from the client — NOT server components (those are the default, no directive).","deck":"$5:props:children:1:props:cards:0:deck","index":7},{"id":"b3410866-4534-4e8c-9639-42d702d8d83b","q":"What replaced forwardRef?","a":"Nothing is needed anymore: in React 19, ref is a regular prop on function components. forwardRef is deprecated and codemods remove it.","deck":"$5:props:children:1:props:cards:0:deck","index":8},{"id":"53272e2f-fc1b-4c3b-81a9-b5a7f8bb3505","q":"How does React 19 handle <title> and <meta> tags?","a":"Render them anywhere in a component and React hoists them to <head> automatically — native document metadata support, plus stylesheet and async script precedence handling.","deck":"$5:props:children:1:props:cards:0:deck","index":9},{"id":"6677258c-84d1-49d0-a37e-b29af3d8698f","q":"What is the React Compiler?","a":"A build-time compiler (stable 1.0, late 2025) that auto-memoizes components and values by understanding the Rules of React — retiring most manual useMemo, useCallback, and React.memo.","deck":"$5:props:children:1:props:cards:0:deck","index":10},{"id":"2663d270-18df-4796-9b82-40f8870c3808","q":"What is the <Activity> component (19.2)?","a":"Wraps UI with modes 'visible' and 'hidden'. Hidden trees keep their state but unmount effects and render at low priority — ideal for tabs or pre-rendering likely-next screens.","deck":"$5:props:children:1:props:cards:0:deck","index":11},{"id":"90611cf3-b857-4bdf-9ce4-1caf37da0135","q":"What does useEffectEvent do (19.2)?","a":"Extracts the 'event' part of an effect so it always reads the latest props/state without being a dependency — eliminating stale closures and effects that re-fire too often.","deck":"$5:props:children:1:props:cards:0:deck","index":12},{"id":"cc64e2ec-ab6a-4b9c-94c0-3fb6ccb798f1","q":"Name three smaller React 19 quality-of-life changes.","a":"Context used directly as a provider (<MyContext> instead of .Provider), ref callbacks can return cleanup functions, and hydration errors now show a single readable diff.","deck":"$5:props:children:1:props:cards:0:deck","index":13},{"id":"f1604993-898a-4907-9718-6774d854dca8","q":"Which headline features are still NOT stable in 19.2?","a":"View Transitions and Fragment Refs — real and demoed, but only in Canary/Experimental channels. Saying they're stable in an interview is a red flag.","deck":"$5:props:children:1:props:cards:0:deck","index":14},{"id":"1ae833df-e286-4a1f-81f0-88cd12e1ab04","q":"Interview one-liner: what's the architectural theme of React 19?","a":"Work moves off the client and out of your hands: RSC shifts rendering to the server, Actions absorb form boilerplate, and the Compiler absorbs memoization — less JS shipped, less code to maintain.","deck":"$5:props:children:1:props:cards:0:deck","index":15},{"id":"c2396dd8-28eb-48b2-9233-586f19161ee8","q":"What do the three letters in CAP stand for?","a":"Consistency, Availability, Partition tolerance. A distributed system can only guarantee two of the three at once.","deck":{"slug":"cap","name":"CAP theorem","blurb":"Partitions, trade-offs, and PACELC","tint":"#F7C7D6","ink":"#B84268","cards":[{"id":"c2396dd8-28eb-48b2-9233-586f19161ee8","q":"What do the three letters in CAP stand for?","a":"Consistency, Availability, Partition tolerance. A distributed system can only guarantee two of the three at once."},{"id":"0c6c496a-d778-46d4-95e5-dce77a704b06","q":"CAP theorem in one sentence?","a":"During a network partition, a distributed system must choose between consistency and availability — it can't have both."},{"id":"413b6f35-7372-425c-ad31-7af99f7d14a4","q":"Define consistency (in CAP terms).","a":"Every read receives the most recent write or an error. All nodes appear to hold one up-to-date value (linearizability)."},{"id":"23ef1803-5bc4-4aaa-a03a-4d95dcb36729","q":"Define availability (in CAP terms).","a":"Every request to a non-failing node gets a non-error response — though the data may be stale."},{"id":"0c82146d-ecca-4ce0-b5db-563c899d384d","q":"Define partition tolerance.","a":"The system keeps operating even when network failures split nodes into groups that can't communicate."},{"id":"5be1fb53-d279-4a95-840c-4b62f1d71386","q":"Why is 'CA' not a real choice for distributed systems?","a":"Network partitions are unavoidable in any real network, so P is mandatory. The actual trade-off is only C vs A during a partition."},{"id":"6852c674-897c-4b5f-9dfa-12a52d93619d","q":"Name some CP systems.","a":"ZooKeeper, etcd, HBase, MongoDB (default config), Google Spanner. They refuse or delay requests rather than serve stale data."},{"id":"7446cea3-adf7-4054-95fb-7b90ff1bf42b","q":"Name some AP systems.","a":"Cassandra, DynamoDB (default reads), CouchDB, DNS. They stay responsive and reconcile conflicts later (eventual consistency)."},{"id":"7779d1ef-8450-4e15-b1b4-bf8adaa3c1cf","q":"What is PACELC?","a":"If Partition: choose Availability or Consistency. Else (normal operation): choose Latency or Consistency. It covers the trade-off even when the network is healthy."},{"id":"6b2affe0-a6c5-40ec-b212-48076c66d1a6","q":"When should you choose CP in a system design interview?","a":"When stale or conflicting data causes real harm: ticket booking, inventory, payments, auction bids, distributed locks, leader election."},{"id":"7dbb51f7-d566-4b73-8fb3-2afb2c490487","q":"When should you choose AP?","a":"When stale reads are harmless: feeds, like counts, view counters, profiles, analytics. Most systems default to availability."},{"id":"a47e2d41-b5b2-40ce-8c7a-1efb27dfd9df","q":"How does CAP consistency differ from ACID consistency?","a":"CAP consistency = linearizable reads across nodes. ACID consistency = database invariants and constraints hold after a transaction. Different concepts sharing a letter."}]},"index":0},{"id":"0c6c496a-d778-46d4-95e5-dce77a704b06","q":"CAP theorem in one sentence?","a":"During a network partition, a distributed system must choose between consistency and availability — it can't have both.","deck":"$5:props:children:1:props:cards:16:deck","index":1},{"id":"413b6f35-7372-425c-ad31-7af99f7d14a4","q":"Define consistency (in CAP terms).","a":"Every read receives the most recent write or an error. All nodes appear to hold one up-to-date value (linearizability).","deck":"$5:props:children:1:props:cards:16:deck","index":2},{"id":"23ef1803-5bc4-4aaa-a03a-4d95dcb36729","q":"Define availability (in CAP terms).","a":"Every request to a non-failing node gets a non-error response — though the data may be stale.","deck":"$5:props:children:1:props:cards:16:deck","index":3},{"id":"0c82146d-ecca-4ce0-b5db-563c899d384d","q":"Define partition tolerance.","a":"The system keeps operating even when network failures split nodes into groups that can't communicate.","deck":"$5:props:children:1:props:cards:16:deck","index":4},{"id":"5be1fb53-d279-4a95-840c-4b62f1d71386","q":"Why is 'CA' not a real choice for distributed systems?","a":"Network partitions are unavoidable in any real network, so P is mandatory. The actual trade-off is only C vs A during a partition.","deck":"$5:props:children:1:props:cards:16:deck","index":5},{"id":"6852c674-897c-4b5f-9dfa-12a52d93619d","q":"Name some CP systems.","a":"ZooKeeper, etcd, HBase, MongoDB (default config), Google Spanner. They refuse or delay requests rather than serve stale data.","deck":"$5:props:children:1:props:cards:16:deck","index":6},{"id":"7446cea3-adf7-4054-95fb-7b90ff1bf42b","q":"Name some AP systems.","a":"Cassandra, DynamoDB (default reads), CouchDB, DNS. They stay responsive and reconcile conflicts later (eventual consistency).","deck":"$5:props:children:1:props:cards:16:deck","index":7},{"id":"7779d1ef-8450-4e15-b1b4-bf8adaa3c1cf","q":"What is PACELC?","a":"If Partition: choose Availability or Consistency. Else (normal operation): choose Latency or Consistency. It covers the trade-off even when the network is healthy.","deck":"$5:props:children:1:props:cards:16:deck","index":8},{"id":"6b2affe0-a6c5-40ec-b212-48076c66d1a6","q":"When should you choose CP in a system design interview?","a":"When stale or conflicting data causes real harm: ticket booking, inventory, payments, auction bids, distributed locks, leader election.","deck":"$5:props:children:1:props:cards:16:deck","index":9},{"id":"7dbb51f7-d566-4b73-8fb3-2afb2c490487","q":"When should you choose AP?","a":"When stale reads are harmless: feeds, like counts, view counters, profiles, analytics. Most systems default to availability.","deck":"$5:props:children:1:props:cards:16:deck","index":10},{"id":"a47e2d41-b5b2-40ce-8c7a-1efb27dfd9df","q":"How does CAP consistency differ from ACID consistency?","a":"CAP consistency = linearizable reads across nodes. ACID consistency = database invariants and constraints hold after a transaction. Different concepts sharing a letter.","deck":"$5:props:children:1:props:cards:16:deck","index":11},{"id":"a9ab7900-2a33-4cf3-a1a0-3c4bddc356e1","q":"What does ACID stand for?","a":"Atomicity, Consistency, Isolation, Durability — the four guarantees a database makes about transactions.","deck":{"slug":"acid","name":"ACID","blurb":"Transactions, isolation levels, and MVCC","tint":"#BDE8D2","ink":"#17805E","cards":[{"id":"a9ab7900-2a33-4cf3-a1a0-3c4bddc356e1","q":"What does ACID stand for?","a":"Atomicity, Consistency, Isolation, Durability — the four guarantees a database makes about transactions."},{"id":"aa32ce1b-c803-4809-80ce-5c2a5cb72be2","q":"Define atomicity.","a":"All or nothing: a transaction either fully completes or fully rolls back. No partial effects are ever visible. It's about failure handling, not concurrency."},{"id":"a8edde0f-ede4-49dc-9499-8cb411e0b520","q":"Define consistency (in ACID terms).","a":"Every transaction moves the database from one valid state to another — constraints and invariants (foreign keys, uniqueness, business rules) always hold."},{"id":"32454677-da46-4056-9302-10893cec3bf9","q":"Define isolation.","a":"Concurrent transactions don't interfere with each other. The result is as if they had run one at a time (serially)."},{"id":"5410ca11-cfd3-47c4-bfd2-7097c7e8a960","q":"Define durability.","a":"Once committed, data survives crashes and power loss — via write-ahead logging, fsync to disk, and (in distributed databases) replication."},{"id":"39cc922c-41f3-45a6-832f-fc30048acd8a","q":"Name the four standard isolation levels, weakest to strongest.","a":"Read uncommitted, read committed, repeatable read, serializable. Postgres defaults to read committed; MySQL InnoDB to repeatable read."},{"id":"6c8e6a1f-abf8-4ab3-8a05-807759eea946","q":"What is a dirty read?","a":"Reading another transaction's uncommitted changes, which may later roll back. Prevented by read committed and above."},{"id":"d24eab5a-c075-44d5-ac85-a09ca3a28336","q":"Non-repeatable read vs phantom read?","a":"Non-repeatable: a row you already read changes between two reads. Phantom: new rows matching your query appear between two reads."},{"id":"0184b182-5a46-46cb-8174-4d46249f086d","q":"How do databases implement atomicity and durability?","a":"The write-ahead log (WAL): changes are appended to a sequential log and fsynced before commit. Crash recovery replays the log — redo committed, undo uncommitted."},{"id":"372a3838-94f9-4381-ab6c-7096b0959e1e","q":"What is MVCC?","a":"Multi-version concurrency control: writers create new row versions instead of overwriting; each transaction reads a consistent snapshot. Readers never block writers."},{"id":"2b6fdefc-99f3-4b1a-9ce5-0f9d9d72f4b1","q":"What is BASE and how does it contrast with ACID?","a":"Basically Available, Soft state, Eventually consistent — the availability-first model of AP systems, trading strict guarantees for uptime and scale."},{"id":"166d2baf-03bc-4afd-8231-ed04bebb7414","q":"Which ACID property is the 'odd one out' and why?","a":"Consistency. A, I, and D are pure database mechanisms; C is a joint responsibility — the application defines what 'valid' means, the database only enforces declared constraints."}]},"index":0},{"id":"aa32ce1b-c803-4809-80ce-5c2a5cb72be2","q":"Define atomicity.","a":"All or nothing: a transaction either fully completes or fully rolls back. No partial effects are ever visible. It's about failure handling, not concurrency.","deck":"$5:props:children:1:props:cards:28:deck","index":1},{"id":"a8edde0f-ede4-49dc-9499-8cb411e0b520","q":"Define consistency (in ACID terms).","a":"Every transaction moves the database from one valid state to another — constraints and invariants (foreign keys, uniqueness, business rules) always hold.","deck":"$5:props:children:1:props:cards:28:deck","index":2},{"id":"32454677-da46-4056-9302-10893cec3bf9","q":"Define isolation.","a":"Concurrent transactions don't interfere with each other. The result is as if they had run one at a time (serially).","deck":"$5:props:children:1:props:cards:28:deck","index":3},{"id":"5410ca11-cfd3-47c4-bfd2-7097c7e8a960","q":"Define durability.","a":"Once committed, data survives crashes and power loss — via write-ahead logging, fsync to disk, and (in distributed databases) replication.","deck":"$5:props:children:1:props:cards:28:deck","index":4},{"id":"39cc922c-41f3-45a6-832f-fc30048acd8a","q":"Name the four standard isolation levels, weakest to strongest.","a":"Read uncommitted, read committed, repeatable read, serializable. Postgres defaults to read committed; MySQL InnoDB to repeatable read.","deck":"$5:props:children:1:props:cards:28:deck","index":5},{"id":"6c8e6a1f-abf8-4ab3-8a05-807759eea946","q":"What is a dirty read?","a":"Reading another transaction's uncommitted changes, which may later roll back. Prevented by read committed and above.","deck":"$5:props:children:1:props:cards:28:deck","index":6},{"id":"d24eab5a-c075-44d5-ac85-a09ca3a28336","q":"Non-repeatable read vs phantom read?","a":"Non-repeatable: a row you already read changes between two reads. Phantom: new rows matching your query appear between two reads.","deck":"$5:props:children:1:props:cards:28:deck","index":7},{"id":"0184b182-5a46-46cb-8174-4d46249f086d","q":"How do databases implement atomicity and durability?","a":"The write-ahead log (WAL): changes are appended to a sequential log and fsynced before commit. Crash recovery replays the log — redo committed, undo uncommitted.","deck":"$5:props:children:1:props:cards:28:deck","index":8},{"id":"372a3838-94f9-4381-ab6c-7096b0959e1e","q":"What is MVCC?","a":"Multi-version concurrency control: writers create new row versions instead of overwriting; each transaction reads a consistent snapshot. Readers never block writers.","deck":"$5:props:children:1:props:cards:28:deck","index":9},{"id":"2b6fdefc-99f3-4b1a-9ce5-0f9d9d72f4b1","q":"What is BASE and how does it contrast with ACID?","a":"Basically Available, Soft state, Eventually consistent — the availability-first model of AP systems, trading strict guarantees for uptime and scale.","deck":"$5:props:children:1:props:cards:28:deck","index":10},{"id":"166d2baf-03bc-4afd-8231-ed04bebb7414","q":"Which ACID property is the 'odd one out' and why?","a":"Consistency. A, I, and D are pure database mechanisms; C is a joint responsibility — the application defines what 'valid' means, the database only enforces declared constraints.","deck":"$5:props:children:1:props:cards:28:deck","index":11},{"id":"85c25f28-e385-4524-a070-2a2da625b3dc","q":"What does SOLID stand for, and where does it come from?","a":"Single responsibility, Open-closed, Liskov substitution, Interface segregation, Dependency inversion. Robert C. Martin gathered the five principles around 2000; Michael Feathers rearranged them into the acronym.","deck":{"slug":"solid","name":"SOLID","blurb":"Design principles, and where they cost more than they pay","tint":"#FAD9BE","ink":"#B87A3C","cards":[{"id":"85c25f28-e385-4524-a070-2a2da625b3dc","q":"What does SOLID stand for, and where does it come from?","a":"Single responsibility, Open-closed, Liskov substitution, Interface segregation, Dependency inversion. Robert C. Martin gathered the five principles around 2000; Michael Feathers rearranged them into the acronym."},{"id":"40ac0587-b654-4ec3-88d7-edce72267bc6","q":"State the Single Responsibility Principle. What counts as a 'reason to change'?","a":"A module should have one, and only one, reason to change. Martin later sharpened 'reason' to mean actor - each module should answer to a single stakeholder or business function, not to a single verb."},{"id":"e20990c8-3dfe-4878-b7bb-e4dccacfd831","q":"What does an SRP violation look like in a React codebase?","a":"One component that fetches, transforms, formats and renders, so both an API change and a design change land in the same file. Pull data access into a hook and formatting into pure functions, leaving the component to render."},{"id":"793305cf-5694-4aa1-99ef-0cdb5425c475","q":"State the Open-Closed Principle.","a":"Entities should be open for extension but closed for modification: you add behaviour by adding code, not by editing code that already works and is already tested. Polymorphism and composition are the usual mechanisms."},{"id":"1b9229a1-0681-4758-802a-65a6e7c63718","q":"How would you apply OCP to a switch statement over payment providers that grows every quarter?","a":"Replace the switch with a registry - Record<Provider, Handler> or a strategy interface - so a new provider is a new entry rather than an edit to the dispatcher. The trade-off: you lose the exhaustive never check that forces you to handle each new case."},{"id":"a24980b5-d554-474b-b351-a62bc5b5d173","q":"State the Liskov Substitution Principle.","a":"A subtype must be usable anywhere its supertype is expected without breaking the program's correctness. Subtypes may weaken preconditions and strengthen postconditions, never the other way round."},{"id":"0dd2941c-e9b5-4ff0-b1e4-5820349205f4","q":"Give a classic LSP violation and explain what breaks.","a":"Square extending Rectangle: setting width silently mutates height, so any caller written against Rectangle's contract is wrong. The same smell is a subclass that throws NotSupported on an inherited method."},{"id":"31ae21b5-bcd1-4c17-9f75-d3f057bc9953","q":"How does TypeScript's type system relate to LSP?","a":"TypeScript is structurally typed, so substitutability is judged on shape rather than declared inheritance. Method-shorthand parameters stay bivariant even under strictFunctionTypes - declare them as function properties to get sound, contravariant checks."},{"id":"ed0ffb2a-5de7-4822-9275-7b8c2b89b8d0","q":"State the Interface Segregation Principle.","a":"No client should be forced to depend on methods it does not use. Prefer several small, role-specific interfaces to one fat one, so a change made for one consumer cannot break or rebuild the others."},{"id":"822e3925-cf4a-479a-866a-2acf8ae12cdc","q":"What does ISP look like in a TypeScript React app?","a":"Props typed to exactly what the component reads - Pick<User, 'id' | 'avatarUrl'> rather than the whole User - and one narrow service interface per consumer. Components then compose with partial data and are trivial to test."},{"id":"ac1f8401-feed-4407-9fff-3edfc2074676","q":"State the Dependency Inversion Principle.","a":"High-level policy should not depend on low-level detail; both depend on abstractions, and abstractions do not depend on details. In practice the consumer owns the interface, not the implementation."},{"id":"fedb9bfe-c1d1-4af6-8385-6b00b09ba177","q":"Distinguish DIP, dependency injection, and an IoC container.","a":"DIP is the design principle (depend on abstractions); DI is the technique of passing dependencies in rather than constructing them; an IoC container is tooling that wires DI for you. You can have DI without DIP, and DIP without a container."},{"id":"8167a727-5a80-4044-94dc-f8f75d0b8311","q":"How do you apply DIP in React or Next.js without a DI container?","a":"Pass collaborators in as props, context or arguments - a component takes getUser(): Promise<User> instead of importing fetch or the SDK directly. Tests then hand it a fake, with no module mocking or network interception."},{"id":"508505e2-5112-40bd-8fa1-d383825efcc4","q":"What are the main criticisms of SOLID?","a":"The wording is vague, the principles assume 1990s class-based OO, and they are easy to over-apply into indirection nobody asked for. Dan North's CUPID is one alternative, arguing for properties like composable and predictable over rules."},{"id":"4d7ea4cf-5878-4b62-814e-590112522a64","q":"How do SOLID, cohesion and coupling relate?","a":"SRP and ISP push toward high cohesion; OCP, LSP and DIP push toward loose coupling. Cohesion and coupling are the underlying qualities - SOLID is a set of heuristics for moving them in the right direction."},{"id":"d2bced86-e76a-4dc5-adf3-d4a74fb13c2f","q":"How should a senior engineer talk about SOLID in an interview?","a":"Name the axis of change you are protecting and the price you are paying, because abstraction is not free and premature indirection is its own defect. Apply DIP at a volatile boundary such as a telecom or payments provider, and skip it for a stable one."}]},"index":0},{"id":"40ac0587-b654-4ec3-88d7-edce72267bc6","q":"State the Single Responsibility Principle. What counts as a 'reason to change'?","a":"A module should have one, and only one, reason to change. Martin later sharpened 'reason' to mean actor - each module should answer to a single stakeholder or business function, not to a single verb.","deck":"$5:props:children:1:props:cards:40:deck","index":1},{"id":"e20990c8-3dfe-4878-b7bb-e4dccacfd831","q":"What does an SRP violation look like in a React codebase?","a":"One component that fetches, transforms, formats and renders, so both an API change and a design change land in the same file. Pull data access into a hook and formatting into pure functions, leaving the component to render.","deck":"$5:props:children:1:props:cards:40:deck","index":2},{"id":"793305cf-5694-4aa1-99ef-0cdb5425c475","q":"State the Open-Closed Principle.","a":"Entities should be open for extension but closed for modification: you add behaviour by adding code, not by editing code that already works and is already tested. Polymorphism and composition are the usual mechanisms.","deck":"$5:props:children:1:props:cards:40:deck","index":3},{"id":"1b9229a1-0681-4758-802a-65a6e7c63718","q":"How would you apply OCP to a switch statement over payment providers that grows every quarter?","a":"Replace the switch with a registry - Record<Provider, Handler> or a strategy interface - so a new provider is a new entry rather than an edit to the dispatcher. The trade-off: you lose the exhaustive never check that forces you to handle each new case.","deck":"$5:props:children:1:props:cards:40:deck","index":4},{"id":"a24980b5-d554-474b-b351-a62bc5b5d173","q":"State the Liskov Substitution Principle.","a":"A subtype must be usable anywhere its supertype is expected without breaking the program's correctness. Subtypes may weaken preconditions and strengthen postconditions, never the other way round.","deck":"$5:props:children:1:props:cards:40:deck","index":5},{"id":"0dd2941c-e9b5-4ff0-b1e4-5820349205f4","q":"Give a classic LSP violation and explain what breaks.","a":"Square extending Rectangle: setting width silently mutates height, so any caller written against Rectangle's contract is wrong. The same smell is a subclass that throws NotSupported on an inherited method.","deck":"$5:props:children:1:props:cards:40:deck","index":6},{"id":"31ae21b5-bcd1-4c17-9f75-d3f057bc9953","q":"How does TypeScript's type system relate to LSP?","a":"TypeScript is structurally typed, so substitutability is judged on shape rather than declared inheritance. Method-shorthand parameters stay bivariant even under strictFunctionTypes - declare them as function properties to get sound, contravariant checks.","deck":"$5:props:children:1:props:cards:40:deck","index":7},{"id":"ed0ffb2a-5de7-4822-9275-7b8c2b89b8d0","q":"State the Interface Segregation Principle.","a":"No client should be forced to depend on methods it does not use. Prefer several small, role-specific interfaces to one fat one, so a change made for one consumer cannot break or rebuild the others.","deck":"$5:props:children:1:props:cards:40:deck","index":8},{"id":"822e3925-cf4a-479a-866a-2acf8ae12cdc","q":"What does ISP look like in a TypeScript React app?","a":"Props typed to exactly what the component reads - Pick<User, 'id' | 'avatarUrl'> rather than the whole User - and one narrow service interface per consumer. Components then compose with partial data and are trivial to test.","deck":"$5:props:children:1:props:cards:40:deck","index":9},{"id":"ac1f8401-feed-4407-9fff-3edfc2074676","q":"State the Dependency Inversion Principle.","a":"High-level policy should not depend on low-level detail; both depend on abstractions, and abstractions do not depend on details. In practice the consumer owns the interface, not the implementation.","deck":"$5:props:children:1:props:cards:40:deck","index":10},{"id":"fedb9bfe-c1d1-4af6-8385-6b00b09ba177","q":"Distinguish DIP, dependency injection, and an IoC container.","a":"DIP is the design principle (depend on abstractions); DI is the technique of passing dependencies in rather than constructing them; an IoC container is tooling that wires DI for you. You can have DI without DIP, and DIP without a container.","deck":"$5:props:children:1:props:cards:40:deck","index":11},{"id":"8167a727-5a80-4044-94dc-f8f75d0b8311","q":"How do you apply DIP in React or Next.js without a DI container?","a":"Pass collaborators in as props, context or arguments - a component takes getUser(): Promise<User> instead of importing fetch or the SDK directly. Tests then hand it a fake, with no module mocking or network interception.","deck":"$5:props:children:1:props:cards:40:deck","index":12},{"id":"508505e2-5112-40bd-8fa1-d383825efcc4","q":"What are the main criticisms of SOLID?","a":"The wording is vague, the principles assume 1990s class-based OO, and they are easy to over-apply into indirection nobody asked for. Dan North's CUPID is one alternative, arguing for properties like composable and predictable over rules.","deck":"$5:props:children:1:props:cards:40:deck","index":13},{"id":"4d7ea4cf-5878-4b62-814e-590112522a64","q":"How do SOLID, cohesion and coupling relate?","a":"SRP and ISP push toward high cohesion; OCP, LSP and DIP push toward loose coupling. Cohesion and coupling are the underlying qualities - SOLID is a set of heuristics for moving them in the right direction.","deck":"$5:props:children:1:props:cards:40:deck","index":14},{"id":"d2bced86-e76a-4dc5-adf3-d4a74fb13c2f","q":"How should a senior engineer talk about SOLID in an interview?","a":"Name the axis of change you are protecting and the price you are paying, because abstraction is not free and premature indirection is its own defect. Apply DIP at a volatile boundary such as a telecom or payments provider, and skip it for a stable one.","deck":"$5:props:children:1:props:cards:40:deck","index":15},{"id":"23355e3d-5153-4116-9c83-1d996198f23e","q":"Authentication vs authorization?","a":"Authentication proves who you are; authorization decides what that identity is allowed to do. id: 81fe3a4a-700b-4358-8c01-574deac5cd8a","deck":{"slug":"auth-and-sessions","name":"Auth and sessions","blurb":"Sessions, tokens, OAuth and OTP flows, with the browser details interviewers probe.","tint":"#DFF2CA","ink":"#649B27","cards":[{"id":"23355e3d-5153-4116-9c83-1d996198f23e","q":"Authentication vs authorization?","a":"Authentication proves who you are; authorization decides what that identity is allowed to do. id: 81fe3a4a-700b-4358-8c01-574deac5cd8a"},{"id":"3a349e15-b4b3-46fa-9506-a0e7b3e23d94","q":"Server session vs JWT — what is the real trade-off?","a":"Sessions are revocable but need a lookup; JWTs are stateless but stay valid until they expire. id: 84b9cad0-4dc3-4e3d-8720-47bb2f9b006a"},{"id":"675c8028-4f7a-49a7-911a-d96d71e66c36","q":"How do you revoke a JWT before it expires?","a":"You cannot, directly — keep access tokens short-lived and check a denylist or version claim on refresh. id: 70975e7e-771e-4dca-832e-6dd26745849c"},{"id":"4ce1c41d-7802-4707-8686-11c07db422e3","q":"What cookie flags does a session cookie need?","a":"HttpOnly, Secure, SameSite, a scoped Path and Domain, and an explicit expiry rather than session-only. id: d63bacda-6876-4f72-a21a-a267efef7020"},{"id":"ac66b66d-3562-4b66-a9c4-ce8c8b728387","q":"What does SameSite actually defend against?","a":"Cross-site requests carrying the cookie automatically — Lax blocks most CSRF, Strict breaks inbound links. id: c56bb26f-f307-44c3-8b76-63720198395e"},{"id":"38e946c6-c56e-43df-af40-6f0e02dac6f1","q":"Why store tokens in cookies rather than localStorage?","a":"localStorage is readable by any script, so one XSS leaks the token; HttpOnly cookies are not script-readable. id: db876b62-49ee-46b4-b0d0-2fee41349783"},{"id":"9711a312-895f-4532-9cd6-f15dc368528f","q":"What is refresh token rotation?","a":"Each refresh issues a new token and invalidates the old; reuse of a retired token signals theft and kills the family. id: e476009d-8d58-4c24-b0e8-cd78c080ab98"},{"id":"a0856e99-954f-4a5a-9106-c40635e11dba","q":"Walk the OAuth 2 authorization code flow.","a":"Redirect to the provider, user consents, provider returns a code, server exchanges it for tokens over the back channel. id: b42b98cd-77e7-4d86-917b-ebee857205b2"},{"id":"8e9b0741-5caf-4259-bd41-0b5245d66fad","q":"What is PKCE and who needs it?","a":"A code verifier and challenge binding the exchange to the client — required for public clients like SPAs and mobile. id: 901102c7-6cc3-4c32-8317-ec49a390385b"},{"id":"96c73134-e592-4570-9f5c-60ce26fd1de0","q":"What is the state parameter for?","a":"A random value echoed back on redirect, proving the callback belongs to a flow this browser actually started. id: 1eb5273b-dabb-4d1a-8b74-fb2910376ae8"},{"id":"29c4f18e-d275-4366-9b2a-5d4ae76d74d4","q":"OAuth 2 vs OIDC?","a":"OAuth 2 grants access to resources; OIDC layers identity on top, adding an ID token and a userinfo endpoint. id: 12a76ade-cd0b-4af1-908a-fd58603dcd55"},{"id":"188a2da8-8c9a-4735-beaf-3f880e2248ff","q":"What is an ID token, and how does it differ from an access token?","a":"The ID token describes the user and is for your app; the access token is a credential for calling an API. id: 35f585ef-25e7-4484-9e7a-58bd640531bb"},{"id":"5a935db8-1dab-40ea-acc9-971e59a91c65","q":"How do you validate a JWT properly?","a":"Verify the signature against the provider's JWKS, then check issuer, audience, expiry and algorithm explicitly. id: 01c44f57-d8f7-4f4c-9e92-c279419bd2e5"},{"id":"b78d25d1-4be1-48cc-bdfa-4ea82792c413","q":"Why pin the expected algorithm when verifying?","a":"Otherwise a token can claim alg none or swap RS256 for HS256 and trick the verifier into accepting it. id: 24916417-b1ed-443a-9545-0416e081db29"},{"id":"0f5fc3ab-543a-4748-8dff-5b0e1b68a821","q":"Walk a one-time-code email login flow.","a":"Generate a short code, store its hash with an expiry, email it, verify on submit, then issue a session. id: 5926919e-39ab-4d34-bd15-e363f02b0bb1"},{"id":"dcde578a-e914-4a90-becb-d0b3e64a5c61","q":"How do you keep an OTP flow from being abused?","a":"Hash and single-use the code, cap attempts, rate limit per address and IP, and expire in minutes not hours. id: 5752f871-a440-46c8-a807-a7b54d8b2dce"},{"id":"d70d91d5-cb6d-4225-a8a9-295af9ce41f1","q":"Why do magic links need care in email clients?","a":"Scanners and previews follow links, consuming a single-use token before the user ever clicks it. id: 50428de2-23e6-4073-a07d-21f3cead9d9b"},{"id":"d0640c8e-ab8c-4c0a-aaa9-33fd32479c41","q":"What is session fixation and how do you prevent it?","a":"An attacker plants a known session ID; rotate the session identifier on every privilege change or login. id: c7d14f8a-1ce6-46b0-8c44-bd5796115cdc"},{"id":"8e13dfc4-cd70-45d5-9ca4-de0585d8bf68","q":"How should passwords be stored?","a":"Hashed with a slow, salted algorithm like Argon2 or bcrypt — never encrypted, never a fast general-purpose hash. id: 1501b192-6967-4480-a602-18bbd07924e6"},{"id":"85ead1f5-7c8a-4581-afa3-0ad944f45877","q":"What does the auth boundary look like in Next.js?","a":"Read the session in a Server Component or Server Action; proxy.ts is a coarse gate, not the real authorization check. id: de76d140-eec7-406d-b31e-13dc34f28104"},{"id":"04daaed1-3951-4c6f-8bf3-31c800fc4251","q":"Why is proxy or middleware alone insufficient for authz?","a":"It guards navigation, not data access — every action and route handler must re-check permissions server-side. id: edd7a79b-9d0d-4a55-baae-ab405c8c1c1b"},{"id":"9b646750-93a3-4a9e-800f-437850cd35fd","q":"What is the confused deputy problem here?","a":"A server component fetching on the user's behalf must scope the query to that user, not just to a valid session. id: 5a0e0378-6e69-4b7b-8ed0-53bd152ec5ee"},{"id":"dd7a8e07-e897-4e47-a794-c6172195a51a","q":"How do you handle multi-tenant authorization?","a":"Scope every query by tenant at the data layer, and treat the tenant as part of the identity, not a request parameter. id: 66ec5682-a08a-4063-bcf0-d6f69839e125"},{"id":"a2362acd-f75a-4251-8e49-502f413efa92","q":"Interview one-liner: what is your default auth stance?","a":"Short-lived tokens in HttpOnly cookies, rotation on refresh, and authorization enforced at the data boundary."}]},"index":0},{"id":"3a349e15-b4b3-46fa-9506-a0e7b3e23d94","q":"Server session vs JWT — what is the real trade-off?","a":"Sessions are revocable but need a lookup; JWTs are stateless but stay valid until they expire. id: 84b9cad0-4dc3-4e3d-8720-47bb2f9b006a","deck":"$5:props:children:1:props:cards:56:deck","index":1},{"id":"675c8028-4f7a-49a7-911a-d96d71e66c36","q":"How do you revoke a JWT before it expires?","a":"You cannot, directly — keep access tokens short-lived and check a denylist or version claim on refresh. id: 70975e7e-771e-4dca-832e-6dd26745849c","deck":"$5:props:children:1:props:cards:56:deck","index":2},{"id":"4ce1c41d-7802-4707-8686-11c07db422e3","q":"What cookie flags does a session cookie need?","a":"HttpOnly, Secure, SameSite, a scoped Path and Domain, and an explicit expiry rather than session-only. id: d63bacda-6876-4f72-a21a-a267efef7020","deck":"$5:props:children:1:props:cards:56:deck","index":3},{"id":"ac66b66d-3562-4b66-a9c4-ce8c8b728387","q":"What does SameSite actually defend against?","a":"Cross-site requests carrying the cookie automatically — Lax blocks most CSRF, Strict breaks inbound links. id: c56bb26f-f307-44c3-8b76-63720198395e","deck":"$5:props:children:1:props:cards:56:deck","index":4},{"id":"38e946c6-c56e-43df-af40-6f0e02dac6f1","q":"Why store tokens in cookies rather than localStorage?","a":"localStorage is readable by any script, so one XSS leaks the token; HttpOnly cookies are not script-readable. id: db876b62-49ee-46b4-b0d0-2fee41349783","deck":"$5:props:children:1:props:cards:56:deck","index":5},{"id":"9711a312-895f-4532-9cd6-f15dc368528f","q":"What is refresh token rotation?","a":"Each refresh issues a new token and invalidates the old; reuse of a retired token signals theft and kills the family. id: e476009d-8d58-4c24-b0e8-cd78c080ab98","deck":"$5:props:children:1:props:cards:56:deck","index":6},{"id":"a0856e99-954f-4a5a-9106-c40635e11dba","q":"Walk the OAuth 2 authorization code flow.","a":"Redirect to the provider, user consents, provider returns a code, server exchanges it for tokens over the back channel. id: b42b98cd-77e7-4d86-917b-ebee857205b2","deck":"$5:props:children:1:props:cards:56:deck","index":7},{"id":"8e9b0741-5caf-4259-bd41-0b5245d66fad","q":"What is PKCE and who needs it?","a":"A code verifier and challenge binding the exchange to the client — required for public clients like SPAs and mobile. id: 901102c7-6cc3-4c32-8317-ec49a390385b","deck":"$5:props:children:1:props:cards:56:deck","index":8},{"id":"96c73134-e592-4570-9f5c-60ce26fd1de0","q":"What is the state parameter for?","a":"A random value echoed back on redirect, proving the callback belongs to a flow this browser actually started. id: 1eb5273b-dabb-4d1a-8b74-fb2910376ae8","deck":"$5:props:children:1:props:cards:56:deck","index":9},{"id":"29c4f18e-d275-4366-9b2a-5d4ae76d74d4","q":"OAuth 2 vs OIDC?","a":"OAuth 2 grants access to resources; OIDC layers identity on top, adding an ID token and a userinfo endpoint. id: 12a76ade-cd0b-4af1-908a-fd58603dcd55","deck":"$5:props:children:1:props:cards:56:deck","index":10},{"id":"188a2da8-8c9a-4735-beaf-3f880e2248ff","q":"What is an ID token, and how does it differ from an access token?","a":"The ID token describes the user and is for your app; the access token is a credential for calling an API. id: 35f585ef-25e7-4484-9e7a-58bd640531bb","deck":"$5:props:children:1:props:cards:56:deck","index":11},{"id":"5a935db8-1dab-40ea-acc9-971e59a91c65","q":"How do you validate a JWT properly?","a":"Verify the signature against the provider's JWKS, then check issuer, audience, expiry and algorithm explicitly. id: 01c44f57-d8f7-4f4c-9e92-c279419bd2e5","deck":"$5:props:children:1:props:cards:56:deck","index":12},{"id":"b78d25d1-4be1-48cc-bdfa-4ea82792c413","q":"Why pin the expected algorithm when verifying?","a":"Otherwise a token can claim alg none or swap RS256 for HS256 and trick the verifier into accepting it. id: 24916417-b1ed-443a-9545-0416e081db29","deck":"$5:props:children:1:props:cards:56:deck","index":13},{"id":"0f5fc3ab-543a-4748-8dff-5b0e1b68a821","q":"Walk a one-time-code email login flow.","a":"Generate a short code, store its hash with an expiry, email it, verify on submit, then issue a session. id: 5926919e-39ab-4d34-bd15-e363f02b0bb1","deck":"$5:props:children:1:props:cards:56:deck","index":14},{"id":"dcde578a-e914-4a90-becb-d0b3e64a5c61","q":"How do you keep an OTP flow from being abused?","a":"Hash and single-use the code, cap attempts, rate limit per address and IP, and expire in minutes not hours. id: 5752f871-a440-46c8-a807-a7b54d8b2dce","deck":"$5:props:children:1:props:cards:56:deck","index":15},{"id":"d70d91d5-cb6d-4225-a8a9-295af9ce41f1","q":"Why do magic links need care in email clients?","a":"Scanners and previews follow links, consuming a single-use token before the user ever clicks it. id: 50428de2-23e6-4073-a07d-21f3cead9d9b","deck":"$5:props:children:1:props:cards:56:deck","index":16},{"id":"d0640c8e-ab8c-4c0a-aaa9-33fd32479c41","q":"What is session fixation and how do you prevent it?","a":"An attacker plants a known session ID; rotate the session identifier on every privilege change or login. id: c7d14f8a-1ce6-46b0-8c44-bd5796115cdc","deck":"$5:props:children:1:props:cards:56:deck","index":17},{"id":"8e13dfc4-cd70-45d5-9ca4-de0585d8bf68","q":"How should passwords be stored?","a":"Hashed with a slow, salted algorithm like Argon2 or bcrypt — never encrypted, never a fast general-purpose hash. id: 1501b192-6967-4480-a602-18bbd07924e6","deck":"$5:props:children:1:props:cards:56:deck","index":18},{"id":"85ead1f5-7c8a-4581-afa3-0ad944f45877","q":"What does the auth boundary look like in Next.js?","a":"Read the session in a Server Component or Server Action; proxy.ts is a coarse gate, not the real authorization check. id: de76d140-eec7-406d-b31e-13dc34f28104","deck":"$5:props:children:1:props:cards:56:deck","index":19},{"id":"04daaed1-3951-4c6f-8bf3-31c800fc4251","q":"Why is proxy or middleware alone insufficient for authz?","a":"It guards navigation, not data access — every action and route handler must re-check permissions server-side. id: edd7a79b-9d0d-4a55-baae-ab405c8c1c1b","deck":"$5:props:children:1:props:cards:56:deck","index":20},{"id":"9b646750-93a3-4a9e-800f-437850cd35fd","q":"What is the confused deputy problem here?","a":"A server component fetching on the user's behalf must scope the query to that user, not just to a valid session. id: 5a0e0378-6e69-4b7b-8ed0-53bd152ec5ee","deck":"$5:props:children:1:props:cards:56:deck","index":21},{"id":"dd7a8e07-e897-4e47-a794-c6172195a51a","q":"How do you handle multi-tenant authorization?","a":"Scope every query by tenant at the data layer, and treat the tenant as part of the identity, not a request parameter. id: 66ec5682-a08a-4063-bcf0-d6f69839e125","deck":"$5:props:children:1:props:cards:56:deck","index":22},{"id":"a2362acd-f75a-4251-8e49-502f413efa92","q":"Interview one-liner: what is your default auth stance?","a":"Short-lived tokens in HttpOnly cookies, rotation on refresh, and authorization enforced at the data boundary.","deck":"$5:props:children:1:props:cards:56:deck","index":23},{"id":"5681e508-a033-4cc9-8348-5db28ba40584","q":"What does idempotent mean for an API?","a":"Repeating the same request produces the same result and no extra side effects beyond the first successful call. id: 143cacbe-7300-479b-be28-72d3f55f3501","deck":{"slug":"idempotency-retries-and-webhooks","name":"Idempotency, retries and webhooks","blurb":"Safe repeats, at-least-once delivery, and the patterns that keep money and SIMs consistent.","tint":"#CAE4F2","ink":"#27729B","cards":[{"id":"5681e508-a033-4cc9-8348-5db28ba40584","q":"What does idempotent mean for an API?","a":"Repeating the same request produces the same result and no extra side effects beyond the first successful call. id: 143cacbe-7300-479b-be28-72d3f55f3501"},{"id":"bdd105e2-32e3-4089-b989-39f96ad17fde","q":"Which HTTP methods are idempotent by definition?","a":"GET, PUT and DELETE. POST is not, which is why create endpoints need explicit idempotency keys. id: 94db9390-aecb-4970-b05d-acc074459348"},{"id":"d7f2af1e-2e85-46ba-babe-bcd84deda6bd","q":"What is an idempotency key?","a":"A client-generated unique value sent with a request so the server can recognise and replay a retried call. id: def2748e-452c-4e9d-8c26-986186ba1147"},{"id":"ac63a2e3-6b3d-408c-a214-1c899531ccc8","q":"How does a server implement idempotency keys?","a":"Store key, request fingerprint and response; on a repeat, return the stored response instead of re-executing. id: e8c0fb7b-f87b-4f4f-a7b1-9db7eb935b6e"},{"id":"4c8cc33a-4f06-4b7b-802d-4e2c5663a070","q":"Why store a hash of the request body alongside the key?","a":"To reject a key reused with different parameters, which signals a client bug rather than a genuine retry. id: 9d1295d2-e071-4616-a919-edbe28217b31"},{"id":"39e9bd92-3291-45a7-be50-424407d30a06","q":"How long should idempotency records be kept?","a":"Long enough to cover realistic retries — commonly 24 hours — then expired to bound storage growth. id: f9876d5c-ae49-49e4-94a3-f5143ae782bc"},{"id":"5fe51346-6a4f-437b-8dfb-2d881de2cc26","q":"What happens when two identical requests race?","a":"The second must block or fail fast; a unique constraint on the key is what actually enforces exactly-one execution. id: b865ea6d-4e98-4f4d-be41-6d591ad86a3a"},{"id":"1852fe13-827f-4991-994f-44179bd7a5c7","q":"Why is exponential backoff with jitter the standard retry policy?","a":"Backoff stops retries amplifying an outage; jitter stops every client retrying in the same synchronised wave. id: 5a9cd35f-8143-4691-9ad7-b4841bd3f2cc"},{"id":"4e69c356-4aaf-41f6-95b8-e6b8113fdcd2","q":"Which failures should you not retry?","a":"4xx client errors other than 429 — the request is wrong, so retrying just burns quota and hides the bug. id: daff6172-9fed-4c41-a7c5-0c04fd0f29c3"},{"id":"371b50f8-a0b9-4fbd-b646-d34e072177dc","q":"What is the thundering herd problem in retries?","a":"A downstream recovers and every waiting client retries at once, knocking it straight back over. id: 5cf72589-2777-4bc5-921a-6e9a1033f52a"},{"id":"3c9d7130-2e72-466b-a822-4de34edda9f8","q":"What does a circuit breaker do?","a":"After repeated failures it stops calling a dependency for a cooldown, then lets a trial request test recovery. id: 1bd72dd9-b44b-403f-ab4e-c82818743b25"},{"id":"1d097be3-0359-4451-852a-73d06cad5ca8","q":"Why do webhooks use at-least-once delivery?","a":"The sender cannot know whether a lost response means the receiver processed the event, so it retries and may duplicate. id: f4d741c9-8179-40b3-8339-0a4f12d82561"},{"id":"8a285cbb-5f45-4767-b3c4-b9ce1ed78976","q":"How should a webhook consumer handle duplicates?","a":"Treat the event ID as an idempotency key and record processed IDs, so replays are recognised and dropped. id: 397f95d2-7394-4345-9955-2fa1330b5506"},{"id":"2c96037c-0e62-4cf8-b489-6766a7357a23","q":"How are webhooks authenticated?","a":"An HMAC signature over the raw body with a shared secret, verified before parsing and in constant time. id: f476c29d-16f6-4dae-8e33-e59dfaeaad04"},{"id":"81be7fd2-fff4-4793-bd51-f208cbaf214a","q":"Why must you verify the signature on the raw body?","a":"Parsing and re-serialising changes bytes, so the computed HMAC no longer matches the sender's. id: c2cd13b2-bc7d-4a7d-a0ce-0c7259c1ab21"},{"id":"462f3557-b1e1-48b5-81a0-f6f1f0ee6898","q":"How do you prevent webhook replay attacks?","a":"Include a timestamp in the signed payload, reject anything outside a short window, and dedupe on event ID. id: c0c42862-c9aa-47f5-b03b-735a0ae43c70"},{"id":"25df4e3f-450c-4762-908e-ca500e80ad51","q":"Why should a webhook handler return 200 immediately?","a":"Acknowledge, enqueue, then process asynchronously — slow handlers cause sender timeouts and needless retries. id: a56aa4f6-1839-4be8-9978-96c0612991de"},{"id":"1f6af375-b06a-4de5-a228-7988b1a1b092","q":"Can webhook events arrive out of order?","a":"Yes. Carry a version or sequence number per resource and ignore an event older than the state you already hold. id: 9a699e97-94e3-45df-afad-1a939ea041bd"},{"id":"f8b90e13-ee94-43a4-962e-1f710d4aaf7c","q":"What is the dual-write problem?","a":"Committing to your database and publishing an event are separate operations; a crash between them loses one. id: fda784b2-2b0e-4243-bfee-5ded27c42995"},{"id":"d193a86f-f6b2-4812-ad2d-62fd293b30b4","q":"What is the transactional outbox pattern?","a":"Write the event to an outbox table in the same transaction, then a relay publishes it after commit. id: 2cd904d4-318d-4de1-87d1-136e0e1ab1c9"},{"id":"454c1e5f-6e18-4dae-b1c9-5a4c631cedc1","q":"What is a dead letter queue for?","a":"Parking messages that failed every retry, so the pipeline keeps moving and failures can be inspected later. id: 5a15d923-95c3-403b-9779-0c4f4fcceecc"},{"id":"ab36a440-83b6-4c69-82e2-ce1e3e92643b","q":"What is a poison message?","a":"One that fails deterministically every time — retrying it forever blocks the queue, so it belongs in the DLQ. id: 43d49e2b-7bc5-4b9f-89f4-0e9023e2d82a"},{"id":"2278d1b1-f601-4894-8caa-71a61d518201","q":"Why is exactly-once delivery a myth in practice?","a":"You get at-least-once delivery plus idempotent processing, which yields exactly-once effects. id: 485b2414-c07f-4702-8f2a-f1213e5cec61"},{"id":"16cfe12e-700c-4115-baab-57eab093117f","q":"Interview one-liner: how do you make a payment or provisioning flow safe under retries?","a":"Idempotency key at the edge, outbox for events, dedupe by event ID at the consumer, DLQ for what still fails."}]},"index":0},{"id":"bdd105e2-32e3-4089-b989-39f96ad17fde","q":"Which HTTP methods are idempotent by definition?","a":"GET, PUT and DELETE. POST is not, which is why create endpoints need explicit idempotency keys. id: 94db9390-aecb-4970-b05d-acc074459348","deck":"$5:props:children:1:props:cards:80:deck","index":1},{"id":"d7f2af1e-2e85-46ba-babe-bcd84deda6bd","q":"What is an idempotency key?","a":"A client-generated unique value sent with a request so the server can recognise and replay a retried call. id: def2748e-452c-4e9d-8c26-986186ba1147","deck":"$5:props:children:1:props:cards:80:deck","index":2},{"id":"ac63a2e3-6b3d-408c-a214-1c899531ccc8","q":"How does a server implement idempotency keys?","a":"Store key, request fingerprint and response; on a repeat, return the stored response instead of re-executing. id: e8c0fb7b-f87b-4f4f-a7b1-9db7eb935b6e","deck":"$5:props:children:1:props:cards:80:deck","index":3},{"id":"4c8cc33a-4f06-4b7b-802d-4e2c5663a070","q":"Why store a hash of the request body alongside the key?","a":"To reject a key reused with different parameters, which signals a client bug rather than a genuine retry. id: 9d1295d2-e071-4616-a919-edbe28217b31","deck":"$5:props:children:1:props:cards:80:deck","index":4},{"id":"39e9bd92-3291-45a7-be50-424407d30a06","q":"How long should idempotency records be kept?","a":"Long enough to cover realistic retries — commonly 24 hours — then expired to bound storage growth. id: f9876d5c-ae49-49e4-94a3-f5143ae782bc","deck":"$5:props:children:1:props:cards:80:deck","index":5},{"id":"5fe51346-6a4f-437b-8dfb-2d881de2cc26","q":"What happens when two identical requests race?","a":"The second must block or fail fast; a unique constraint on the key is what actually enforces exactly-one execution. id: b865ea6d-4e98-4f4d-be41-6d591ad86a3a","deck":"$5:props:children:1:props:cards:80:deck","index":6},{"id":"1852fe13-827f-4991-994f-44179bd7a5c7","q":"Why is exponential backoff with jitter the standard retry policy?","a":"Backoff stops retries amplifying an outage; jitter stops every client retrying in the same synchronised wave. id: 5a9cd35f-8143-4691-9ad7-b4841bd3f2cc","deck":"$5:props:children:1:props:cards:80:deck","index":7},{"id":"4e69c356-4aaf-41f6-95b8-e6b8113fdcd2","q":"Which failures should you not retry?","a":"4xx client errors other than 429 — the request is wrong, so retrying just burns quota and hides the bug. id: daff6172-9fed-4c41-a7c5-0c04fd0f29c3","deck":"$5:props:children:1:props:cards:80:deck","index":8},{"id":"371b50f8-a0b9-4fbd-b646-d34e072177dc","q":"What is the thundering herd problem in retries?","a":"A downstream recovers and every waiting client retries at once, knocking it straight back over. id: 5cf72589-2777-4bc5-921a-6e9a1033f52a","deck":"$5:props:children:1:props:cards:80:deck","index":9},{"id":"3c9d7130-2e72-466b-a822-4de34edda9f8","q":"What does a circuit breaker do?","a":"After repeated failures it stops calling a dependency for a cooldown, then lets a trial request test recovery. id: 1bd72dd9-b44b-403f-ab4e-c82818743b25","deck":"$5:props:children:1:props:cards:80:deck","index":10},{"id":"1d097be3-0359-4451-852a-73d06cad5ca8","q":"Why do webhooks use at-least-once delivery?","a":"The sender cannot know whether a lost response means the receiver processed the event, so it retries and may duplicate. id: f4d741c9-8179-40b3-8339-0a4f12d82561","deck":"$5:props:children:1:props:cards:80:deck","index":11},{"id":"8a285cbb-5f45-4767-b3c4-b9ce1ed78976","q":"How should a webhook consumer handle duplicates?","a":"Treat the event ID as an idempotency key and record processed IDs, so replays are recognised and dropped. id: 397f95d2-7394-4345-9955-2fa1330b5506","deck":"$5:props:children:1:props:cards:80:deck","index":12},{"id":"2c96037c-0e62-4cf8-b489-6766a7357a23","q":"How are webhooks authenticated?","a":"An HMAC signature over the raw body with a shared secret, verified before parsing and in constant time. id: f476c29d-16f6-4dae-8e33-e59dfaeaad04","deck":"$5:props:children:1:props:cards:80:deck","index":13},{"id":"81be7fd2-fff4-4793-bd51-f208cbaf214a","q":"Why must you verify the signature on the raw body?","a":"Parsing and re-serialising changes bytes, so the computed HMAC no longer matches the sender's. id: c2cd13b2-bc7d-4a7d-a0ce-0c7259c1ab21","deck":"$5:props:children:1:props:cards:80:deck","index":14},{"id":"462f3557-b1e1-48b5-81a0-f6f1f0ee6898","q":"How do you prevent webhook replay attacks?","a":"Include a timestamp in the signed payload, reject anything outside a short window, and dedupe on event ID. id: c0c42862-c9aa-47f5-b03b-735a0ae43c70","deck":"$5:props:children:1:props:cards:80:deck","index":15},{"id":"25df4e3f-450c-4762-908e-ca500e80ad51","q":"Why should a webhook handler return 200 immediately?","a":"Acknowledge, enqueue, then process asynchronously — slow handlers cause sender timeouts and needless retries. id: a56aa4f6-1839-4be8-9978-96c0612991de","deck":"$5:props:children:1:props:cards:80:deck","index":16},{"id":"1f6af375-b06a-4de5-a228-7988b1a1b092","q":"Can webhook events arrive out of order?","a":"Yes. Carry a version or sequence number per resource and ignore an event older than the state you already hold. id: 9a699e97-94e3-45df-afad-1a939ea041bd","deck":"$5:props:children:1:props:cards:80:deck","index":17},{"id":"f8b90e13-ee94-43a4-962e-1f710d4aaf7c","q":"What is the dual-write problem?","a":"Committing to your database and publishing an event are separate operations; a crash between them loses one. id: fda784b2-2b0e-4243-bfee-5ded27c42995","deck":"$5:props:children:1:props:cards:80:deck","index":18},{"id":"d193a86f-f6b2-4812-ad2d-62fd293b30b4","q":"What is the transactional outbox pattern?","a":"Write the event to an outbox table in the same transaction, then a relay publishes it after commit. id: 2cd904d4-318d-4de1-87d1-136e0e1ab1c9","deck":"$5:props:children:1:props:cards:80:deck","index":19},{"id":"454c1e5f-6e18-4dae-b1c9-5a4c631cedc1","q":"What is a dead letter queue for?","a":"Parking messages that failed every retry, so the pipeline keeps moving and failures can be inspected later. id: 5a15d923-95c3-403b-9779-0c4f4fcceecc","deck":"$5:props:children:1:props:cards:80:deck","index":20},{"id":"ab36a440-83b6-4c69-82e2-ce1e3e92643b","q":"What is a poison message?","a":"One that fails deterministically every time — retrying it forever blocks the queue, so it belongs in the DLQ. id: 43d49e2b-7bc5-4b9f-89f4-0e9023e2d82a","deck":"$5:props:children:1:props:cards:80:deck","index":21},{"id":"2278d1b1-f601-4894-8caa-71a61d518201","q":"Why is exactly-once delivery a myth in practice?","a":"You get at-least-once delivery plus idempotent processing, which yields exactly-once effects. id: 485b2414-c07f-4702-8f2a-f1213e5cec61","deck":"$5:props:children:1:props:cards:80:deck","index":22},{"id":"16cfe12e-700c-4115-baab-57eab093117f","q":"Interview one-liner: how do you make a payment or provisioning flow safe under retries?","a":"Idempotency key at the edge, outbox for events, dedupe by event ID at the consumer, DLQ for what still fails.","deck":"$5:props:children:1:props:cards:80:deck","index":23},{"id":"cb1abdcb-4aee-4c95-99ef-cede9bd2e6e5","q":"What is Kafka, in one line?","a":"A distributed event streaming platform - a durable, partitioned, append-only commit log usable as either a message queue or a stream. id: ef4fcf93-ad99-41d0-96eb-07d5f7343518","deck":{"slug":"kafka","name":"Kafka","blurb":"Partitions, consumer groups, and what to say in the interview","tint":"#F0CAF2","ink":"#95279B","cards":[{"id":"cb1abdcb-4aee-4c95-99ef-cede9bd2e6e5","q":"What is Kafka, in one line?","a":"A distributed event streaming platform - a durable, partitioned, append-only commit log usable as either a message queue or a stream. id: ef4fcf93-ad99-41d0-96eb-07d5f7343518"},{"id":"05661cc8-6421-4e40-9cb7-97d941ba5d34","q":"Define broker, partition and topic.","a":"A broker is a server in the cluster. A partition is an ordered, immutable, append-only log on a broker. A topic is a logical grouping of partitions. id: 8271ae2f-f90f-435e-a468-2fc34531cb64"},{"id":"4ad91798-3f09-48ec-b8a9-0d94023a2f53","q":"Topic vs partition - the actual difference?","a":"A topic is a logical grouping; a partition is the physical one. Partitions are the unit of parallelism and the only place ordering is guaranteed. id: afe12183-dcaf-40d6-800c-74654f19c720"},{"id":"8da56c70-8f91-4cde-a58f-398d5b3121d7","q":"What are the fields of a Kafka message?","a":"Value (payload), key, timestamp and headers - all technically optional. Headers are key-value metadata, like HTTP headers. id: a4a48271-4068-4b53-ba64-e6dfd7d6b633"},{"id":"cb23f290-383c-43bc-ab61-fbfc678f9ba4","q":"What does the message key do, and what if you omit it?","a":"It is hashed to pick the partition, so equal keys stay together and stay ordered. With no key, modern clients use a sticky partitioner and you lose related-message ordering. id: a86b124b-728c-4edf-b163-1cc642c93b78"},{"id":"11903748-b166-4ad2-8552-e0a76ac44257","q":"What is an offset?","a":"A sequential ID marking a message's position within a partition. Consumers commit offsets so they can resume where they left off after a restart. id: 8a2d7768-62e9-429f-9ba3-2d76ff4e9fe2"},{"id":"81afa632-4674-4751-9fac-f8224a917aeb","q":"What is a consumer group and what does it guarantee?","a":"Consumers sharing a topic's partitions - each partition goes to exactly one consumer in the group. Separate groups read the same topic independently. id: 61dcc3d1-2774-4860-86ff-b8e0367f1445"},{"id":"9e391eb0-8361-4948-aee7-0d5d7385e24c","q":"Kafka as a message queue vs as a stream?","a":"Same mechanics, different consumption pattern: a queue has one consumer per message; a stream retains the log for replay and multiple independent groups. id: 7fa0f7f4-9e5d-45dd-b961-a3a02d99ffc3"},{"id":"6087092b-fadb-45ed-9370-7e232e9bd3c4","q":"What two steps happen when a producer publishes?","a":"Partition determination (hash the key, or default partitioner), then broker assignment - the client uses cluster metadata to reach that partition's leader. id: 40a7e1f8-7363-4df3-837d-6b2591ca6669"},{"id":"254c6849-48e1-41d8-bb1e-3c0f391c3495","q":"Why is an append-only log the right structure?","a":"Immutability simplifies replication and recovery, appending avoids disk seeks, and the simplicity makes scaling by adding partitions straightforward. id: f23f1aaa-a870-4d52-b50b-cf4a809bc7ee"},{"id":"dd8e552c-7270-4f8f-9315-790b8dc66468","q":"How does Kafka replicate a partition?","a":"Leader-follower: one replica takes writes, followers on other brokers sync passively. The controller promotes an in-sync follower when a leader dies. id: 84f9936f-ec3d-4568-b570-1094042de155"},{"id":"8b8d6ca0-cd3f-4239-a88a-1e85239e13a1","q":"What is the ISR, and what does acks=all buy you?","a":"In-sync replicas are the followers fully caught up. acks=all acknowledges only once every ISR has the message - strongest durability, at the cost of latency. id: bc17a2c4-9c7a-4bd0-af19-a0318f321fe4"},{"id":"a1a01924-99ff-4a1e-a7a2-487a8b167be9","q":"Watch-outs when using Kafka from a Node/Next.js app?","a":"Clients hold long-lived connections and group membership, which fits badly with serverless handlers. Run producers and consumers in a persistent process or behind a REST proxy. id: eaa802a0-ecf2-48c3-878f-536ef669f2d0"},{"id":"3cd92559-e418-43f1-8ccf-cb2151d7bf74","q":"Do consumers push or pull? Why?","a":"Pull - consumers poll at their own rate. Slow consumers self-limit, failure handling is simpler, and batching becomes efficient. id: 25751c6d-d9c6-4617-8089-56c82fb883b8"},{"id":"da08b2ae-a98b-4e19-af07-8f1bac41ffcc","q":"What ordering guarantee does Kafka actually give?","a":"Ordering within a partition only, by offset - not by timestamp, not across a topic. Global ordering means one partition, which means no parallelism. id: d1d67056-53a0-446c-b8c4-d7cae26371bb"},{"id":"cc2ca34a-515b-4282-aaa7-c87661c81f6a","q":"Default delivery semantics, and how do you get exactly-once?","a":"At-least-once by default. Exactly-once needs idempotent producers plus the transactional API - usually better to assume duplicates and make consumers idempotent. id: 1d36be4b-d5d6-4716-9f4d-9fd635bae586"},{"id":"7e518842-8fda-4bcb-8ca4-24ca7434bc5a","q":"What happens when a consumer crashes?","a":"It resumes from its last committed offset on restart, and the group rebalances so remaining consumers pick up the orphaned partitions. Nothing is missed; some work is redone. id: 7434e18b-9e0a-44c9-a68f-a707c11fcd85"},{"id":"990cb464-dc3f-45f1-9f78-2cc0cd4a2dff","q":"When should you commit the offset?","a":"Only after the work is durably done, or you silently drop messages. The more a consumer does per message, the more is redone on failure - so keep consumers small. id: 25a97ecf-42e8-4aa8-ba63-c8a7312b33f2"},{"id":"54fe5636-ce58-433d-a77e-ff905beb7d11","q":"How do producer retries work, and what is the gotcha?","a":"Producers retry transient failures automatically. Enable idempotent mode alongside retries, or a retried send that actually succeeded becomes a duplicate. id: 974896ab-58b4-4b7e-868f-3a94f0640776"},{"id":"965f9e85-6210-43b7-9628-d232148919ba","q":"What does Kafka give you for consumer-side retries?","a":"Nothing built in, unlike SQS. The pattern is a retry topic consumed separately, then a dead letter queue after N failures - a fair reason to pick SQS for simple worker queues. id: 6e26d304-6252-4cb5-b713-e5e8f6e1ea39"},{"id":"39bc2380-89be-4c00-97fb-22ff0f7ba361","q":"Rough single-broker capacity for back-of-envelope maths?","a":"Very hand-wavy, but ~1TB storage and up to ~1M messages/sec on good hardware, with messages under ~1MB. Below that, scaling is not the conversation. id: 4c7af18c-4472-466b-aad2-92d49311db66"},{"id":"163feeaa-b7bd-41d0-afb8-6dba8b0e7387","q":"Two ways to scale Kafka.","a":"Add brokers, and partition properly. Brokers alone do nothing if topics are under-partitioned - scale the topic, not just the cluster. id: 4305bd52-29cc-4a84-8e67-d74b43e45950"},{"id":"af015ce1-063a-41ba-8ae5-ee56a6fc3a36","q":"How is a partition chosen from a key?","a":"partition = hash(key) % num_partitions, murmur2 by default. Changing the partition count therefore reshuffles which partition a key maps to. id: b05959f5-ad81-46ec-b997-c665ee61b229"},{"id":"e6686e7e-1829-450e-b7fe-dc0ab481e8df","q":"Four ways to fix a hot partition.","a":"Drop the key and spread load (losing ordering); salt the key with a random suffix; use a compound key such as ad ID + region; or apply back pressure and slow the producer. id: f79a2b13-9898-48bb-aef9-9f5bcb2398d3"},{"id":"4a2b8190-524d-477f-9601-08d87f2c12d8","q":"Why are large payloads an anti-pattern, and what instead?","a":"Kafka is not a blob store - big messages hurt memory and network throughput. Write the object to S3 and put a pointer in the message: the claim-check pattern. id: acac941e-5132-4c0d-a306-4a1484d3376a"},{"id":"a633ee47-f991-45a7-a2d2-acb63ec1f5fc","q":"How does retention work, and what is log compaction?","a":"Messages expire by retention.ms (7 days default) or retention.bytes. Compaction instead keeps the latest value per key forever, making the topic a replayable snapshot. id: 33a07f7c-24c1-4f16-b95f-a99ed03fad62"},{"id":"9064494c-eb96-4715-a7eb-71420b4603a4","q":"What is KRaft?","a":"Kafka's own Raft-based metadata quorum, replacing ZooKeeper. Production-ready since 3.3 and ZooKeeper was removed entirely in Kafka 4.0. id: ea87c892-b2df-4b07-a241-6afd1ffa6504"},{"id":"9e38e65c-327e-454b-8f96-ab764c1297fa","q":"What is tiered storage (KIP-405)?","a":"Brokers keep recent segments on local disk and offload older ones to object storage, so retention is no longer bounded by broker disk. GA in Kafka 3.9. id: db5ee616-49de-45f0-af4d-07993250f9f4"},{"id":"0ccdddef-8d54-4b38-b5d3-7d4926c594f6","q":"Two producer-side performance levers?","a":"Batching (group records per send to amortise network overhead) and compression (GZIP, Snappy, LZ4). Both trade a little latency for a lot of throughput. id: 67758d0f-5870-4df6-b488-0094605ddd6a"},{"id":"98838250-cf02-4289-a3af-85b91c8c8150","q":"When do you reach for Kafka as a queue in an interview?","a":"Asynchronous work such as transcoding after upload, work that must stay ordered such as a waiting queue, or when producer and consumer must scale independently. id: b532cdc5-dd3d-4fe5-869d-4b4360ea00c4"},{"id":"b5eee806-1f3f-4222-b63c-42353d287a1e","q":"When do you reach for it as a stream?","a":"Continuous real-time processing, such as aggregating ad clicks as they arrive, or fan-out where many independent consumers need the same messages. id: 161ffec7-8ec2-4585-8199-5d9bb3b70f79"},{"id":"66230d2d-7ac9-4dc0-bcdf-1d221ee711c9","q":"\"Always available, sometimes consistent\" - so what?","a":"Replication and leader failover make cluster-wide outage an unrealistic premise; redirect the question. The interesting failure is a consumer dying."}]},"index":0},{"id":"05661cc8-6421-4e40-9cb7-97d941ba5d34","q":"Define broker, partition and topic.","a":"A broker is a server in the cluster. A partition is an ordered, immutable, append-only log on a broker. A topic is a logical grouping of partitions. id: 8271ae2f-f90f-435e-a468-2fc34531cb64","deck":"$5:props:children:1:props:cards:104:deck","index":1},{"id":"4ad91798-3f09-48ec-b8a9-0d94023a2f53","q":"Topic vs partition - the actual difference?","a":"A topic is a logical grouping; a partition is the physical one. Partitions are the unit of parallelism and the only place ordering is guaranteed. id: afe12183-dcaf-40d6-800c-74654f19c720","deck":"$5:props:children:1:props:cards:104:deck","index":2},{"id":"8da56c70-8f91-4cde-a58f-398d5b3121d7","q":"What are the fields of a Kafka message?","a":"Value (payload), key, timestamp and headers - all technically optional. Headers are key-value metadata, like HTTP headers. id: a4a48271-4068-4b53-ba64-e6dfd7d6b633","deck":"$5:props:children:1:props:cards:104:deck","index":3},{"id":"cb23f290-383c-43bc-ab61-fbfc678f9ba4","q":"What does the message key do, and what if you omit it?","a":"It is hashed to pick the partition, so equal keys stay together and stay ordered. With no key, modern clients use a sticky partitioner and you lose related-message ordering. id: a86b124b-728c-4edf-b163-1cc642c93b78","deck":"$5:props:children:1:props:cards:104:deck","index":4},{"id":"11903748-b166-4ad2-8552-e0a76ac44257","q":"What is an offset?","a":"A sequential ID marking a message's position within a partition. Consumers commit offsets so they can resume where they left off after a restart. id: 8a2d7768-62e9-429f-9ba3-2d76ff4e9fe2","deck":"$5:props:children:1:props:cards:104:deck","index":5},{"id":"81afa632-4674-4751-9fac-f8224a917aeb","q":"What is a consumer group and what does it guarantee?","a":"Consumers sharing a topic's partitions - each partition goes to exactly one consumer in the group. Separate groups read the same topic independently. id: 61dcc3d1-2774-4860-86ff-b8e0367f1445","deck":"$5:props:children:1:props:cards:104:deck","index":6},{"id":"9e391eb0-8361-4948-aee7-0d5d7385e24c","q":"Kafka as a message queue vs as a stream?","a":"Same mechanics, different consumption pattern: a queue has one consumer per message; a stream retains the log for replay and multiple independent groups. id: 7fa0f7f4-9e5d-45dd-b961-a3a02d99ffc3","deck":"$5:props:children:1:props:cards:104:deck","index":7},{"id":"6087092b-fadb-45ed-9370-7e232e9bd3c4","q":"What two steps happen when a producer publishes?","a":"Partition determination (hash the key, or default partitioner), then broker assignment - the client uses cluster metadata to reach that partition's leader. id: 40a7e1f8-7363-4df3-837d-6b2591ca6669","deck":"$5:props:children:1:props:cards:104:deck","index":8},{"id":"254c6849-48e1-41d8-bb1e-3c0f391c3495","q":"Why is an append-only log the right structure?","a":"Immutability simplifies replication and recovery, appending avoids disk seeks, and the simplicity makes scaling by adding partitions straightforward. id: f23f1aaa-a870-4d52-b50b-cf4a809bc7ee","deck":"$5:props:children:1:props:cards:104:deck","index":9},{"id":"dd8e552c-7270-4f8f-9315-790b8dc66468","q":"How does Kafka replicate a partition?","a":"Leader-follower: one replica takes writes, followers on other brokers sync passively. The controller promotes an in-sync follower when a leader dies. id: 84f9936f-ec3d-4568-b570-1094042de155","deck":"$5:props:children:1:props:cards:104:deck","index":10},{"id":"8b8d6ca0-cd3f-4239-a88a-1e85239e13a1","q":"What is the ISR, and what does acks=all buy you?","a":"In-sync replicas are the followers fully caught up. acks=all acknowledges only once every ISR has the message - strongest durability, at the cost of latency. id: bc17a2c4-9c7a-4bd0-af19-a0318f321fe4","deck":"$5:props:children:1:props:cards:104:deck","index":11},{"id":"a1a01924-99ff-4a1e-a7a2-487a8b167be9","q":"Watch-outs when using Kafka from a Node/Next.js app?","a":"Clients hold long-lived connections and group membership, which fits badly with serverless handlers. Run producers and consumers in a persistent process or behind a REST proxy. id: eaa802a0-ecf2-48c3-878f-536ef669f2d0","deck":"$5:props:children:1:props:cards:104:deck","index":12},{"id":"3cd92559-e418-43f1-8ccf-cb2151d7bf74","q":"Do consumers push or pull? Why?","a":"Pull - consumers poll at their own rate. Slow consumers self-limit, failure handling is simpler, and batching becomes efficient. id: 25751c6d-d9c6-4617-8089-56c82fb883b8","deck":"$5:props:children:1:props:cards:104:deck","index":13},{"id":"da08b2ae-a98b-4e19-af07-8f1bac41ffcc","q":"What ordering guarantee does Kafka actually give?","a":"Ordering within a partition only, by offset - not by timestamp, not across a topic. Global ordering means one partition, which means no parallelism. id: d1d67056-53a0-446c-b8c4-d7cae26371bb","deck":"$5:props:children:1:props:cards:104:deck","index":14},{"id":"cc2ca34a-515b-4282-aaa7-c87661c81f6a","q":"Default delivery semantics, and how do you get exactly-once?","a":"At-least-once by default. Exactly-once needs idempotent producers plus the transactional API - usually better to assume duplicates and make consumers idempotent. id: 1d36be4b-d5d6-4716-9f4d-9fd635bae586","deck":"$5:props:children:1:props:cards:104:deck","index":15},{"id":"7e518842-8fda-4bcb-8ca4-24ca7434bc5a","q":"What happens when a consumer crashes?","a":"It resumes from its last committed offset on restart, and the group rebalances so remaining consumers pick up the orphaned partitions. Nothing is missed; some work is redone. id: 7434e18b-9e0a-44c9-a68f-a707c11fcd85","deck":"$5:props:children:1:props:cards:104:deck","index":16},{"id":"990cb464-dc3f-45f1-9f78-2cc0cd4a2dff","q":"When should you commit the offset?","a":"Only after the work is durably done, or you silently drop messages. The more a consumer does per message, the more is redone on failure - so keep consumers small. id: 25a97ecf-42e8-4aa8-ba63-c8a7312b33f2","deck":"$5:props:children:1:props:cards:104:deck","index":17},{"id":"54fe5636-ce58-433d-a77e-ff905beb7d11","q":"How do producer retries work, and what is the gotcha?","a":"Producers retry transient failures automatically. Enable idempotent mode alongside retries, or a retried send that actually succeeded becomes a duplicate. id: 974896ab-58b4-4b7e-868f-3a94f0640776","deck":"$5:props:children:1:props:cards:104:deck","index":18},{"id":"965f9e85-6210-43b7-9628-d232148919ba","q":"What does Kafka give you for consumer-side retries?","a":"Nothing built in, unlike SQS. The pattern is a retry topic consumed separately, then a dead letter queue after N failures - a fair reason to pick SQS for simple worker queues. id: 6e26d304-6252-4cb5-b713-e5e8f6e1ea39","deck":"$5:props:children:1:props:cards:104:deck","index":19},{"id":"39bc2380-89be-4c00-97fb-22ff0f7ba361","q":"Rough single-broker capacity for back-of-envelope maths?","a":"Very hand-wavy, but ~1TB storage and up to ~1M messages/sec on good hardware, with messages under ~1MB. Below that, scaling is not the conversation. id: 4c7af18c-4472-466b-aad2-92d49311db66","deck":"$5:props:children:1:props:cards:104:deck","index":20},{"id":"163feeaa-b7bd-41d0-afb8-6dba8b0e7387","q":"Two ways to scale Kafka.","a":"Add brokers, and partition properly. Brokers alone do nothing if topics are under-partitioned - scale the topic, not just the cluster. id: 4305bd52-29cc-4a84-8e67-d74b43e45950","deck":"$5:props:children:1:props:cards:104:deck","index":21},{"id":"af015ce1-063a-41ba-8ae5-ee56a6fc3a36","q":"How is a partition chosen from a key?","a":"partition = hash(key) % num_partitions, murmur2 by default. Changing the partition count therefore reshuffles which partition a key maps to. id: b05959f5-ad81-46ec-b997-c665ee61b229","deck":"$5:props:children:1:props:cards:104:deck","index":22},{"id":"e6686e7e-1829-450e-b7fe-dc0ab481e8df","q":"Four ways to fix a hot partition.","a":"Drop the key and spread load (losing ordering); salt the key with a random suffix; use a compound key such as ad ID + region; or apply back pressure and slow the producer. id: f79a2b13-9898-48bb-aef9-9f5bcb2398d3","deck":"$5:props:children:1:props:cards:104:deck","index":23},{"id":"4a2b8190-524d-477f-9601-08d87f2c12d8","q":"Why are large payloads an anti-pattern, and what instead?","a":"Kafka is not a blob store - big messages hurt memory and network throughput. Write the object to S3 and put a pointer in the message: the claim-check pattern. id: acac941e-5132-4c0d-a306-4a1484d3376a","deck":"$5:props:children:1:props:cards:104:deck","index":24},{"id":"a633ee47-f991-45a7-a2d2-acb63ec1f5fc","q":"How does retention work, and what is log compaction?","a":"Messages expire by retention.ms (7 days default) or retention.bytes. Compaction instead keeps the latest value per key forever, making the topic a replayable snapshot. id: 33a07f7c-24c1-4f16-b95f-a99ed03fad62","deck":"$5:props:children:1:props:cards:104:deck","index":25},{"id":"9064494c-eb96-4715-a7eb-71420b4603a4","q":"What is KRaft?","a":"Kafka's own Raft-based metadata quorum, replacing ZooKeeper. Production-ready since 3.3 and ZooKeeper was removed entirely in Kafka 4.0. id: ea87c892-b2df-4b07-a241-6afd1ffa6504","deck":"$5:props:children:1:props:cards:104:deck","index":26},{"id":"9e38e65c-327e-454b-8f96-ab764c1297fa","q":"What is tiered storage (KIP-405)?","a":"Brokers keep recent segments on local disk and offload older ones to object storage, so retention is no longer bounded by broker disk. GA in Kafka 3.9. id: db5ee616-49de-45f0-af4d-07993250f9f4","deck":"$5:props:children:1:props:cards:104:deck","index":27},{"id":"0ccdddef-8d54-4b38-b5d3-7d4926c594f6","q":"Two producer-side performance levers?","a":"Batching (group records per send to amortise network overhead) and compression (GZIP, Snappy, LZ4). Both trade a little latency for a lot of throughput. id: 67758d0f-5870-4df6-b488-0094605ddd6a","deck":"$5:props:children:1:props:cards:104:deck","index":28},{"id":"98838250-cf02-4289-a3af-85b91c8c8150","q":"When do you reach for Kafka as a queue in an interview?","a":"Asynchronous work such as transcoding after upload, work that must stay ordered such as a waiting queue, or when producer and consumer must scale independently. id: b532cdc5-dd3d-4fe5-869d-4b4360ea00c4","deck":"$5:props:children:1:props:cards:104:deck","index":29},{"id":"b5eee806-1f3f-4222-b63c-42353d287a1e","q":"When do you reach for it as a stream?","a":"Continuous real-time processing, such as aggregating ad clicks as they arrive, or fan-out where many independent consumers need the same messages. id: 161ffec7-8ec2-4585-8199-5d9bb3b70f79","deck":"$5:props:children:1:props:cards:104:deck","index":30},{"id":"66230d2d-7ac9-4dc0-bcdf-1d221ee711c9","q":"\"Always available, sometimes consistent\" - so what?","a":"Replication and leader failover make cluster-wide outage an unrealistic premise; redirect the question. The interesting failure is a consumer dying.","deck":"$5:props:children:1:props:cards:104:deck","index":31},{"id":"42575223-35e4-4cf8-b145-3a8bd3112785","q":"When did the App Router become stable, and what is the current Next.js version?","a":"Stable in 13.4 (May 2023). The current line is 16.3, released August 2026; there is no Next.js 17. id: 32ca8c2c-7c0d-4335-bb8a-aec348f17396","deck":{"slug":"next-js-app-router","name":"Next.js App Router","blurb":"Routing, rendering and file conventions in the App Router, weighted to 15→16.3.","tint":"#F2F0CA","ink":"#9B9527","cards":[{"id":"42575223-35e4-4cf8-b145-3a8bd3112785","q":"When did the App Router become stable, and what is the current Next.js version?","a":"Stable in 13.4 (May 2023). The current line is 16.3, released August 2026; there is no Next.js 17. id: 32ca8c2c-7c0d-4335-bb8a-aec348f17396"},{"id":"a03d1d74-74ed-4a23-9c69-aab958d3a330","q":"What is the default component type in the App Router?","a":"Server Components. They run only on the server, can be async, and ship no JavaScript to the browser. id: 7c8b40b4-95c1-4677-8963-bed88a552f34"},{"id":"c67ae708-d0b8-4bae-a17a-cd6c1a58011b","q":"What does 'use client' actually mark?","a":"The boundary where the client bundle begins. Every module imported below it becomes client code too. id: 29070b96-b8f1-4766-9c37-50803e7df536"},{"id":"e9dc7034-7f9e-4a55-bd44-ead8d082cddf","q":"Name the special files that define a route segment.","a":"layout, page, loading, error, not-found, template, route, and default (for parallel route slots). id: e1beb9a1-ba1a-40b4-ac42-62cee4415382"},{"id":"24ca1c76-59c0-48e3-b791-7fc99d199762","q":"layout.tsx vs template.tsx?","a":"Layouts persist across navigation and keep state; templates remount and reset state on every navigation. id: 71b81f07-cc59-4cf9-b191-cf4304a05257"},{"id":"008c1b80-aa05-4ae4-8f9f-b1540a332186","q":"What are route groups and private folders?","a":"(marketing) groups routes without adding a URL segment; _lib opts a folder out of routing entirely. id: 5091e51d-4fae-4aed-a483-24d7aab50906"},{"id":"7022f217-274b-45e8-9220-4d56bfdbb14d","q":"How do you write dynamic, catch-all and optional catch-all segments?","a":"[id], [...slug] and [[...slug]] — the last also matches the parent path with no segments at all. id: 61daaf88-4538-402f-a676-63245add0129"},{"id":"32cc1b1d-fe5d-4378-af70-87a1edca25eb","q":"What does generateStaticParams do?","a":"Lists the dynamic params to prerender at build time — the App Router replacement for getStaticPaths. id: 055c1eaf-5abc-4147-9915-c8b3eeae5d1c"},{"id":"c8ff3b91-0b89-4d09-9f67-5d4f91da5e97","q":"What changed about params, searchParams, cookies() and headers()?","a":"They became async in Next 15 and must be awaited. This is the most common upgrade break from 14. id: c1d4da39-292c-46c6-8241-914bed8ebdf8"},{"id":"1d93d888-7208-4060-8222-9a814b84bb8e","q":"How does streaming work in the App Router?","a":"A loading.tsx or <Suspense> boundary lets the shell flush immediately while slower data streams in after. id: 31112f6b-35e3-42ce-8605-85d2e3f63dff"},{"id":"9927ed30-ba91-47a1-a42e-e97f905eb5e3","q":"Route Handler vs Server Action — when do you use each?","a":"Route Handlers expose a real HTTP endpoint for external callers; Server Actions are RPC for your own UI. id: 879b33d3-9a13-4683-85c2-920874376b11"},{"id":"f94f4781-4db0-4e41-8431-4b5c83b8c479","q":"What replaced middleware.ts in Next 16?","a":"proxy.ts, renamed to make it clear the file is a network-boundary concern, not general app middleware. id: b89e1761-7b29-4d86-941f-8d94cba01938"},{"id":"9b24b772-12c9-4b8b-8018-3399d2ee8ecd","q":"What are Cache Components and 'use cache'?","a":"An opt-in model (cacheComponents: true) where nothing caches unless a function or component is marked cacheable. id: 43818909-a4a9-4a0c-9570-48ca378335c5"},{"id":"44f0a06b-0fe3-4b29-80d9-14bafa52d5a8","q":"How did caching defaults shift across 14 → 15 → 16?","a":"14 cached fetch and GET handlers implicitly; 15 turned those off by default; 16 makes caching explicit opt-in. id: 6e385274-c2f9-4209-881a-56e8dc11e801"},{"id":"7d57e1d8-cd84-484c-a900-b14cf4884da5","q":"How do you invalidate cached data on demand?","a":"revalidatePath and revalidateTag from a Server Action or Route Handler, with cacheTag marking what to bust. id: d189eb16-3379-474f-940e-f5a7746e8156"},{"id":"722f8b83-7988-4b8a-8a5b-9bce4046bb4e","q":"What makes a route render dynamically?","a":"Reading request data — cookies, headers, searchParams — or opting out via dynamic = 'force-dynamic'. id: 21ed2d23-ff7f-48e4-b385-8e4fb9134e21"},{"id":"a3e0939e-8fc3-47bf-9294-90c6163d7fe6","q":"What is Partial Prerendering, and where did it land?","a":"Serving a static shell with dynamic holes streamed in. It shipped folded into the Cache Components model in 16. id: e3946fed-ed3f-4ef1-aa3c-7230c2162313"},{"id":"ca4b8e18-3f72-4469-b79e-ab9d27475fc7","q":"What are Instant Navigations (16.3)?","a":"An opt-in suite — partial prefetching, extracted loading shells, Instant Insights — for SPA-feel routing. id: 0ee4bd31-3505-4894-8400-9e4344ac5493"},{"id":"02799246-7758-49ec-9d65-cd78453691a1","q":"What problem do root params (16.3) solve?","a":"Reading a root-level param like [lang] from any Server Component, instead of prop-drilling it down the tree. id: 6ab944e9-1bb1-426d-a7a8-dcf7f2e32abe"},{"id":"053baf6a-038e-4492-a4d7-a49e287de469","q":"How does error handling work in the App Router?","a":"error.tsx catches a segment's render errors, global-error wraps the root, notFound() renders 404. id: f09b5d3b-4045-43bb-9f71-1315ca05f623"},{"id":"5866b2f8-036b-47ae-a5b2-88ac27a54d8c","q":"What are parallel and intercepting routes?","a":"@slot folders render several pages into one layout; (.) and (..) intercept a route to show it as a modal. id: 94dd7854-9bf5-43e8-8afe-a317bee7fc60"},{"id":"d33e85a6-dba9-4214-802a-e2c46c8ec309","q":"How do you set page metadata?","a":"Export a static metadata object or an async generateMetadata from a layout or page. id: 33f43377-f78a-4f79-9c89-428d9f5a7840"},{"id":"16fa7a65-d181-4802-acae-46eece4a2ad0","q":"What is the bundler story in Next 16?","a":"Turbopack is the default for dev and build; webpack config is deprecated with a temporary --webpack fallback. id: 9bee220e-0bbc-4757-973d-6bf2a9473b5d"},{"id":"28b2a42a-9995-40f8-93a3-caeb9d49f8a4","q":"Interview one-liner: what is the App Router's architectural theme?","a":"Rendering moves to the server by default and caching moves from implicit to explicit, opt-in and per-component."}]},"index":0},{"id":"a03d1d74-74ed-4a23-9c69-aab958d3a330","q":"What is the default component type in the App Router?","a":"Server Components. They run only on the server, can be async, and ship no JavaScript to the browser. id: 7c8b40b4-95c1-4677-8963-bed88a552f34","deck":"$5:props:children:1:props:cards:136:deck","index":1},{"id":"c67ae708-d0b8-4bae-a17a-cd6c1a58011b","q":"What does 'use client' actually mark?","a":"The boundary where the client bundle begins. Every module imported below it becomes client code too. id: 29070b96-b8f1-4766-9c37-50803e7df536","deck":"$5:props:children:1:props:cards:136:deck","index":2},{"id":"e9dc7034-7f9e-4a55-bd44-ead8d082cddf","q":"Name the special files that define a route segment.","a":"layout, page, loading, error, not-found, template, route, and default (for parallel route slots). id: e1beb9a1-ba1a-40b4-ac42-62cee4415382","deck":"$5:props:children:1:props:cards:136:deck","index":3},{"id":"24ca1c76-59c0-48e3-b791-7fc99d199762","q":"layout.tsx vs template.tsx?","a":"Layouts persist across navigation and keep state; templates remount and reset state on every navigation. id: 71b81f07-cc59-4cf9-b191-cf4304a05257","deck":"$5:props:children:1:props:cards:136:deck","index":4},{"id":"008c1b80-aa05-4ae4-8f9f-b1540a332186","q":"What are route groups and private folders?","a":"(marketing) groups routes without adding a URL segment; _lib opts a folder out of routing entirely. id: 5091e51d-4fae-4aed-a483-24d7aab50906","deck":"$5:props:children:1:props:cards:136:deck","index":5},{"id":"7022f217-274b-45e8-9220-4d56bfdbb14d","q":"How do you write dynamic, catch-all and optional catch-all segments?","a":"[id], [...slug] and [[...slug]] — the last also matches the parent path with no segments at all. id: 61daaf88-4538-402f-a676-63245add0129","deck":"$5:props:children:1:props:cards:136:deck","index":6},{"id":"32cc1b1d-fe5d-4378-af70-87a1edca25eb","q":"What does generateStaticParams do?","a":"Lists the dynamic params to prerender at build time — the App Router replacement for getStaticPaths. id: 055c1eaf-5abc-4147-9915-c8b3eeae5d1c","deck":"$5:props:children:1:props:cards:136:deck","index":7},{"id":"c8ff3b91-0b89-4d09-9f67-5d4f91da5e97","q":"What changed about params, searchParams, cookies() and headers()?","a":"They became async in Next 15 and must be awaited. This is the most common upgrade break from 14. id: c1d4da39-292c-46c6-8241-914bed8ebdf8","deck":"$5:props:children:1:props:cards:136:deck","index":8},{"id":"1d93d888-7208-4060-8222-9a814b84bb8e","q":"How does streaming work in the App Router?","a":"A loading.tsx or <Suspense> boundary lets the shell flush immediately while slower data streams in after. id: 31112f6b-35e3-42ce-8605-85d2e3f63dff","deck":"$5:props:children:1:props:cards:136:deck","index":9},{"id":"9927ed30-ba91-47a1-a42e-e97f905eb5e3","q":"Route Handler vs Server Action — when do you use each?","a":"Route Handlers expose a real HTTP endpoint for external callers; Server Actions are RPC for your own UI. id: 879b33d3-9a13-4683-85c2-920874376b11","deck":"$5:props:children:1:props:cards:136:deck","index":10},{"id":"f94f4781-4db0-4e41-8431-4b5c83b8c479","q":"What replaced middleware.ts in Next 16?","a":"proxy.ts, renamed to make it clear the file is a network-boundary concern, not general app middleware. id: b89e1761-7b29-4d86-941f-8d94cba01938","deck":"$5:props:children:1:props:cards:136:deck","index":11},{"id":"9b24b772-12c9-4b8b-8018-3399d2ee8ecd","q":"What are Cache Components and 'use cache'?","a":"An opt-in model (cacheComponents: true) where nothing caches unless a function or component is marked cacheable. id: 43818909-a4a9-4a0c-9570-48ca378335c5","deck":"$5:props:children:1:props:cards:136:deck","index":12},{"id":"44f0a06b-0fe3-4b29-80d9-14bafa52d5a8","q":"How did caching defaults shift across 14 → 15 → 16?","a":"14 cached fetch and GET handlers implicitly; 15 turned those off by default; 16 makes caching explicit opt-in. id: 6e385274-c2f9-4209-881a-56e8dc11e801","deck":"$5:props:children:1:props:cards:136:deck","index":13},{"id":"7d57e1d8-cd84-484c-a900-b14cf4884da5","q":"How do you invalidate cached data on demand?","a":"revalidatePath and revalidateTag from a Server Action or Route Handler, with cacheTag marking what to bust. id: d189eb16-3379-474f-940e-f5a7746e8156","deck":"$5:props:children:1:props:cards:136:deck","index":14},{"id":"722f8b83-7988-4b8a-8a5b-9bce4046bb4e","q":"What makes a route render dynamically?","a":"Reading request data — cookies, headers, searchParams — or opting out via dynamic = 'force-dynamic'. id: 21ed2d23-ff7f-48e4-b385-8e4fb9134e21","deck":"$5:props:children:1:props:cards:136:deck","index":15},{"id":"a3e0939e-8fc3-47bf-9294-90c6163d7fe6","q":"What is Partial Prerendering, and where did it land?","a":"Serving a static shell with dynamic holes streamed in. It shipped folded into the Cache Components model in 16. id: e3946fed-ed3f-4ef1-aa3c-7230c2162313","deck":"$5:props:children:1:props:cards:136:deck","index":16},{"id":"ca4b8e18-3f72-4469-b79e-ab9d27475fc7","q":"What are Instant Navigations (16.3)?","a":"An opt-in suite — partial prefetching, extracted loading shells, Instant Insights — for SPA-feel routing. id: 0ee4bd31-3505-4894-8400-9e4344ac5493","deck":"$5:props:children:1:props:cards:136:deck","index":17},{"id":"02799246-7758-49ec-9d65-cd78453691a1","q":"What problem do root params (16.3) solve?","a":"Reading a root-level param like [lang] from any Server Component, instead of prop-drilling it down the tree. id: 6ab944e9-1bb1-426d-a7a8-dcf7f2e32abe","deck":"$5:props:children:1:props:cards:136:deck","index":18},{"id":"053baf6a-038e-4492-a4d7-a49e287de469","q":"How does error handling work in the App Router?","a":"error.tsx catches a segment's render errors, global-error wraps the root, notFound() renders 404. id: f09b5d3b-4045-43bb-9f71-1315ca05f623","deck":"$5:props:children:1:props:cards:136:deck","index":19},{"id":"5866b2f8-036b-47ae-a5b2-88ac27a54d8c","q":"What are parallel and intercepting routes?","a":"@slot folders render several pages into one layout; (.) and (..) intercept a route to show it as a modal. id: 94dd7854-9bf5-43e8-8afe-a317bee7fc60","deck":"$5:props:children:1:props:cards:136:deck","index":20},{"id":"d33e85a6-dba9-4214-802a-e2c46c8ec309","q":"How do you set page metadata?","a":"Export a static metadata object or an async generateMetadata from a layout or page. id: 33f43377-f78a-4f79-9c89-428d9f5a7840","deck":"$5:props:children:1:props:cards:136:deck","index":21},{"id":"16fa7a65-d181-4802-acae-46eece4a2ad0","q":"What is the bundler story in Next 16?","a":"Turbopack is the default for dev and build; webpack config is deprecated with a temporary --webpack fallback. id: 9bee220e-0bbc-4757-973d-6bf2a9473b5d","deck":"$5:props:children:1:props:cards:136:deck","index":22},{"id":"28b2a42a-9995-40f8-93a3-caeb9d49f8a4","q":"Interview one-liner: what is the App Router's architectural theme?","a":"Rendering moves to the server by default and caching moves from implicit to explicit, opt-in and per-component.","deck":"$5:props:children:1:props:cards:136:deck","index":23},{"id":"a3b1d931-696c-42d7-a4fd-e5c695f4e374","q":"Name the four caching layers of the App Router.","a":"Request memoization, the Data Cache, the Full Route Cache, and the client-side Router Cache. id: ea06e171-c0c8-48ab-adc3-c97f335c593b","deck":{"slug":"next-js-caching-and-data-fetching","name":"Next.js caching and data fetching","blurb":"The caching layers, the use cache model, and fetching patterns from 15 to 16.3.","tint":"#CBF2CA","ink":"#2A9B27","cards":[{"id":"a3b1d931-696c-42d7-a4fd-e5c695f4e374","q":"Name the four caching layers of the App Router.","a":"Request memoization, the Data Cache, the Full Route Cache, and the client-side Router Cache. id: ea06e171-c0c8-48ab-adc3-c97f335c593b"},{"id":"51ca58ff-71f8-4701-bc61-0195ce638044","q":"What is request memoization?","a":"React dedupes identical fetches within a single render pass, so shared components can each fetch what they need. id: a7ef8893-81c9-4394-b0f8-ba63fa142f68"},{"id":"c1d8d113-7dc4-453f-8396-57184bb69b20","q":"What is the Data Cache?","a":"A persistent server-side store of fetch results that survives requests and deploys until revalidated. id: 934eae2b-099e-43e8-9c80-aa6d6a393fc2"},{"id":"9fbb0014-40c7-418e-9473-a547809d9dd2","q":"What is the Full Route Cache?","a":"The prerendered HTML and RSC payload for a static route, held on the server and served without rendering. id: 11212494-5b2d-4da7-aa11-4aa317c298f2"},{"id":"0a7d6be7-8827-4f48-ba9a-ac8fe00f8bc0","q":"What is the Router Cache?","a":"An in-memory client cache of RSC payloads for visited and prefetched routes, so back-navigation is instant. id: c159d16a-2e9c-4514-8050-64653f105394"},{"id":"eb8b3dbd-d92c-4b1e-9e2d-ea2a603d0da8","q":"Is fetch cached by default?","a":"No. Since 15 fetch defaults to no-store; you opt in with force-cache, next.revalidate, or use cache. id: 53dcfceb-ffa4-4a8b-a3b9-06299ceddfa6"},{"id":"2864a395-9cd4-4d6d-8cea-af19e9328f1a","q":"What does the 'use cache' directive do?","a":"Marks a file, component or function as cacheable, so its result is stored and reused rather than recomputed. id: aa451521-2c38-4943-9c6e-dfe9898743fa"},{"id":"df783804-f5a7-4975-93da-8169afe5594c","q":"What do cacheTag and cacheLife add to 'use cache'?","a":"cacheTag labels an entry for targeted invalidation; cacheLife sets how long it stays fresh and stale. id: 19c872cf-615e-45fd-91c9-77ca1299c341"},{"id":"90b6fb75-79cc-4605-b54d-7659c67d0256","q":"What does the cacheComponents flag change?","a":"It switches the app to the explicit model: nothing is cached unless you mark it, and dynamic is the default. id: abb3bd9a-58f0-4b11-9999-5ae0bc6c829e"},{"id":"aa5bd4b1-8b0d-4d1d-9f95-c70b8f1c3ae5","q":"revalidatePath vs revalidateTag?","a":"revalidatePath busts everything for a route; tags bust just the entries you labelled, across every route. id: ab6622d9-23da-4b32-aba1-cb9f101c8893"},{"id":"ce9c5600-2be2-402d-92a9-8ebd5c5ce4f8","q":"How do you handle on-demand invalidation from a CMS?","a":"Expose a route handler, verify the webhook signature, then call revalidateTag for the affected content tags. id: 0e981e8e-bb42-47fd-8e6e-bd01cfc65fbe"},{"id":"6500ca71-2711-49e2-be7e-b2d1a70af0c7","q":"What is ISR in App Router terms?","a":"Time-based revalidation of a prerendered route: serve the cached version, regenerate in the background. id: 650de55e-a972-4985-8584-c925cddc310a"},{"id":"7758a96c-a38f-4210-9515-1db6770517c3","q":"What does the segment export revalidate = 60 mean?","a":"The route's cached output is considered fresh for 60 seconds, then regenerated on the next request after that. id: c12987b2-3c77-4a1a-b894-38168d644bc2"},{"id":"22c86c2c-aaa5-4321-b7f5-e4f0620764dc","q":"How do you force a route static or dynamic?","a":"The segment config dynamic = 'force-static' or 'force-dynamic', overriding what Next.js infers. id: c84268bf-fb1c-42b7-ac12-d69cbee29cb1"},{"id":"4c0ccc66-2849-4555-a36f-00dd9224339a","q":"What silently makes a route dynamic?","a":"Reading cookies, headers, searchParams or connection — any request-time input opts the whole segment out. id: 4c628480-1b00-423a-98e1-1a4db8915386"},{"id":"ead290c0-4c5e-45a3-9c84-56aa3175a6f1","q":"How do you avoid a request waterfall between fetches?","a":"Start independent fetches together and await them with Promise.all, rather than awaiting each in sequence. id: d983c381-bcb4-4daf-a4a8-01daee5feddc"},{"id":"d51d3009-ce2d-4827-80b3-48b2874d2f03","q":"What is the preload pattern?","a":"Kick off a data fetch in the parent before rendering a child, so the request is already in flight on render. id: 78375417-4401-4937-8de3-5ec09d695ba8"},{"id":"3c173246-d13f-486e-a000-d84fdb8065d7","q":"When do you reach for React's cache() function?","a":"To dedupe non-fetch work like a database query across one render pass, since only fetch is memoized natively. id: 8c1ead4c-5307-4b6c-ae6b-d74681da1985"},{"id":"92c6282e-6adf-4910-820e-0808ac5e9633","q":"Where does client-side data fetching still belong?","a":"Anything request-specific and interactive — polling, infinite scroll, optimistic UI — via SWR or TanStack Query. id: c5f5d873-da69-429c-87b7-c1db6a691080"},{"id":"5a0bfed7-6600-495f-af9e-a376cb3f8a0f","q":"How do you cache a Route Handler response?","a":"Set Cache-Control headers yourself, or use cache inside it; GET handlers stopped caching by default in 15. id: 4ccfdf9d-4ffb-45a7-afb6-e0e15114f9c1"},{"id":"cb19602f-0c50-4f83-bd55-2c6ec68f6be1","q":"What did 16.3 add to the caching story?","a":"'use cache' gained client-side caching, letting a route serve a prefetched shell before its data arrives. id: c6fc6f69-9293-4bd6-a912-16dad7991ffe"},{"id":"5f0fdf1d-f357-489f-a432-0edbc5a021fb","q":"What is partial prefetching?","a":"Per-link control over how much of a target route to prefetch, instead of all-or-nothing prefetch={true}. id: b4156d56-2bf2-4f36-99b6-a8e86f8fb065"},{"id":"1e82c5d0-47ab-4191-a8af-12ba3360797c","q":"How does the CDN relate to these caches?","a":"It sits in front of them, caching full responses by URL; a stale CDN entry survives a revalidateTag. id: 85ff2982-2790-4ae7-8fe9-03481770172d"},{"id":"ff67b2ee-7671-437b-ae7f-63e620f63bff","q":"Interview one-liner: how would you explain the caching model to a sceptic?","a":"It moved from four implicit layers you fought against to one explicit directive you opt into, per unit of work."}]},"index":0},{"id":"51ca58ff-71f8-4701-bc61-0195ce638044","q":"What is request memoization?","a":"React dedupes identical fetches within a single render pass, so shared components can each fetch what they need. id: a7ef8893-81c9-4394-b0f8-ba63fa142f68","deck":"$5:props:children:1:props:cards:160:deck","index":1},{"id":"c1d8d113-7dc4-453f-8396-57184bb69b20","q":"What is the Data Cache?","a":"A persistent server-side store of fetch results that survives requests and deploys until revalidated. id: 934eae2b-099e-43e8-9c80-aa6d6a393fc2","deck":"$5:props:children:1:props:cards:160:deck","index":2},{"id":"9fbb0014-40c7-418e-9473-a547809d9dd2","q":"What is the Full Route Cache?","a":"The prerendered HTML and RSC payload for a static route, held on the server and served without rendering. id: 11212494-5b2d-4da7-aa11-4aa317c298f2","deck":"$5:props:children:1:props:cards:160:deck","index":3},{"id":"0a7d6be7-8827-4f48-ba9a-ac8fe00f8bc0","q":"What is the Router Cache?","a":"An in-memory client cache of RSC payloads for visited and prefetched routes, so back-navigation is instant. id: c159d16a-2e9c-4514-8050-64653f105394","deck":"$5:props:children:1:props:cards:160:deck","index":4},{"id":"eb8b3dbd-d92c-4b1e-9e2d-ea2a603d0da8","q":"Is fetch cached by default?","a":"No. Since 15 fetch defaults to no-store; you opt in with force-cache, next.revalidate, or use cache. id: 53dcfceb-ffa4-4a8b-a3b9-06299ceddfa6","deck":"$5:props:children:1:props:cards:160:deck","index":5},{"id":"2864a395-9cd4-4d6d-8cea-af19e9328f1a","q":"What does the 'use cache' directive do?","a":"Marks a file, component or function as cacheable, so its result is stored and reused rather than recomputed. id: aa451521-2c38-4943-9c6e-dfe9898743fa","deck":"$5:props:children:1:props:cards:160:deck","index":6},{"id":"df783804-f5a7-4975-93da-8169afe5594c","q":"What do cacheTag and cacheLife add to 'use cache'?","a":"cacheTag labels an entry for targeted invalidation; cacheLife sets how long it stays fresh and stale. id: 19c872cf-615e-45fd-91c9-77ca1299c341","deck":"$5:props:children:1:props:cards:160:deck","index":7},{"id":"90b6fb75-79cc-4605-b54d-7659c67d0256","q":"What does the cacheComponents flag change?","a":"It switches the app to the explicit model: nothing is cached unless you mark it, and dynamic is the default. id: abb3bd9a-58f0-4b11-9999-5ae0bc6c829e","deck":"$5:props:children:1:props:cards:160:deck","index":8},{"id":"aa5bd4b1-8b0d-4d1d-9f95-c70b8f1c3ae5","q":"revalidatePath vs revalidateTag?","a":"revalidatePath busts everything for a route; tags bust just the entries you labelled, across every route. id: ab6622d9-23da-4b32-aba1-cb9f101c8893","deck":"$5:props:children:1:props:cards:160:deck","index":9},{"id":"ce9c5600-2be2-402d-92a9-8ebd5c5ce4f8","q":"How do you handle on-demand invalidation from a CMS?","a":"Expose a route handler, verify the webhook signature, then call revalidateTag for the affected content tags. id: 0e981e8e-bb42-47fd-8e6e-bd01cfc65fbe","deck":"$5:props:children:1:props:cards:160:deck","index":10},{"id":"6500ca71-2711-49e2-be7e-b2d1a70af0c7","q":"What is ISR in App Router terms?","a":"Time-based revalidation of a prerendered route: serve the cached version, regenerate in the background. id: 650de55e-a972-4985-8584-c925cddc310a","deck":"$5:props:children:1:props:cards:160:deck","index":11},{"id":"7758a96c-a38f-4210-9515-1db6770517c3","q":"What does the segment export revalidate = 60 mean?","a":"The route's cached output is considered fresh for 60 seconds, then regenerated on the next request after that. id: c12987b2-3c77-4a1a-b894-38168d644bc2","deck":"$5:props:children:1:props:cards:160:deck","index":12},{"id":"22c86c2c-aaa5-4321-b7f5-e4f0620764dc","q":"How do you force a route static or dynamic?","a":"The segment config dynamic = 'force-static' or 'force-dynamic', overriding what Next.js infers. id: c84268bf-fb1c-42b7-ac12-d69cbee29cb1","deck":"$5:props:children:1:props:cards:160:deck","index":13},{"id":"4c0ccc66-2849-4555-a36f-00dd9224339a","q":"What silently makes a route dynamic?","a":"Reading cookies, headers, searchParams or connection — any request-time input opts the whole segment out. id: 4c628480-1b00-423a-98e1-1a4db8915386","deck":"$5:props:children:1:props:cards:160:deck","index":14},{"id":"ead290c0-4c5e-45a3-9c84-56aa3175a6f1","q":"How do you avoid a request waterfall between fetches?","a":"Start independent fetches together and await them with Promise.all, rather than awaiting each in sequence. id: d983c381-bcb4-4daf-a4a8-01daee5feddc","deck":"$5:props:children:1:props:cards:160:deck","index":15},{"id":"d51d3009-ce2d-4827-80b3-48b2874d2f03","q":"What is the preload pattern?","a":"Kick off a data fetch in the parent before rendering a child, so the request is already in flight on render. id: 78375417-4401-4937-8de3-5ec09d695ba8","deck":"$5:props:children:1:props:cards:160:deck","index":16},{"id":"3c173246-d13f-486e-a000-d84fdb8065d7","q":"When do you reach for React's cache() function?","a":"To dedupe non-fetch work like a database query across one render pass, since only fetch is memoized natively. id: 8c1ead4c-5307-4b6c-ae6b-d74681da1985","deck":"$5:props:children:1:props:cards:160:deck","index":17},{"id":"92c6282e-6adf-4910-820e-0808ac5e9633","q":"Where does client-side data fetching still belong?","a":"Anything request-specific and interactive — polling, infinite scroll, optimistic UI — via SWR or TanStack Query. id: c5f5d873-da69-429c-87b7-c1db6a691080","deck":"$5:props:children:1:props:cards:160:deck","index":18},{"id":"5a0bfed7-6600-495f-af9e-a376cb3f8a0f","q":"How do you cache a Route Handler response?","a":"Set Cache-Control headers yourself, or use cache inside it; GET handlers stopped caching by default in 15. id: 4ccfdf9d-4ffb-45a7-afb6-e0e15114f9c1","deck":"$5:props:children:1:props:cards:160:deck","index":19},{"id":"cb19602f-0c50-4f83-bd55-2c6ec68f6be1","q":"What did 16.3 add to the caching story?","a":"'use cache' gained client-side caching, letting a route serve a prefetched shell before its data arrives. id: c6fc6f69-9293-4bd6-a912-16dad7991ffe","deck":"$5:props:children:1:props:cards:160:deck","index":20},{"id":"5f0fdf1d-f357-489f-a432-0edbc5a021fb","q":"What is partial prefetching?","a":"Per-link control over how much of a target route to prefetch, instead of all-or-nothing prefetch={true}. id: b4156d56-2bf2-4f36-99b6-a8e86f8fb065","deck":"$5:props:children:1:props:cards:160:deck","index":21},{"id":"1e82c5d0-47ab-4191-a8af-12ba3360797c","q":"How does the CDN relate to these caches?","a":"It sits in front of them, caching full responses by URL; a stale CDN entry survives a revalidateTag. id: 85ff2982-2790-4ae7-8fe9-03481770172d","deck":"$5:props:children:1:props:cards:160:deck","index":22},{"id":"ff67b2ee-7671-437b-ae7f-63e620f63bff","q":"Interview one-liner: how would you explain the caching model to a sceptic?","a":"It moved from four implicit layers you fought against to one explicit directive you opt into, per unit of work.","deck":"$5:props:children:1:props:cards:160:deck","index":23},{"id":"ff487b75-ae21-40c9-a7fc-0faf4cb364da","q":"Composition over prop drilling: what's the first tool you reach for?","a":"Pass JSX as children or as a prop instead of threading data down. The component that owns the state renders the leaf and hands it over, so the components in between never see the prop at all. id: 3b3733de-b24f-49db-8389-d4b4d98fb3b2","deck":{"slug":"react-in-practice","name":"React in Practice","blurb":"Patterns and conventions for senior React work","tint":"#CAF2EF","ink":"#279B92","cards":[{"id":"ff487b75-ae21-40c9-a7fc-0faf4cb364da","q":"Composition over prop drilling: what's the first tool you reach for?","a":"Pass JSX as children or as a prop instead of threading data down. The component that owns the state renders the leaf and hands it over, so the components in between never see the prop at all. id: 3b3733de-b24f-49db-8389-d4b4d98fb3b2"},{"id":"8e6ff784-1933-4ec7-8903-55e04802861f","q":"When do you NOT need a useEffect?","a":"Whenever the value can be derived during render or computed in an event handler. Effects are for synchronising with something outside React — the DOM, a subscription, the network — not for reacting to your own state changes. id: 5ce50e43-231c-4489-8b63-c699e8ce79ba"},{"id":"c9857d22-fd01-45ca-b102-12f703645220","q":"A prop changes and you want the component's state to reset. What's the idiomatic fix?","a":"Give the component a key tied to that prop so React remounts it with fresh state. Mirroring the prop into state and resetting it in an effect renders stale values first and is the classic anti-pattern. id: bce9ddb8-a165-4035-8ee3-81211d9f58a3"},{"id":"590cbae3-1116-4081-a5d3-958fec15376a","q":"Why is array index a bad key, and when is it fine?","a":"Index keys make React reuse the wrong instance when items are inserted, removed or reordered, so state and DOM stick to the wrong row. Fine only for a static list that is never reordered and holds no state. id: a9b08119-0a28-477c-ac59-e4577582e9e5"},{"id":"7bf8f0d9-e1c1-4640-bafb-299265e5d61d","q":"What does \"colocate state\" mean, and what's the rule for lifting it?","a":"Keep state in the lowest component that uses it, and lift it only as far as the closest common ancestor of the components that need it. Lifting higher than necessary re-renders half the tree for no reason. id: cdfff9b7-7010-49c0-b442-8245d47d99cc"},{"id":"57597be1-6eb4-40c4-8ec2-b3124e63af89","q":"Controlled vs uncontrolled inputs — when do you pick each?","a":"Controlled when you need to react to every keystroke: live validation, formatting, dependent fields. Uncontrolled with defaultValue plus a ref or FormData when you only care at submit time — cheaper and the default for Actions. id: 6efacdec-267a-4798-b45f-334451780ee4"},{"id":"0680e3a0-a4a8-4c3e-b4f3-b96ae20090e8","q":"What are the two main costs of Context, and how do you mitigate them?","a":"Every consumer re-renders whenever the value identity changes, and consumers become coupled to a provider being present. Split contexts by update frequency, memoise the value, and prefer passing children through over pushing everything into context. id: f6e93796-f76a-4ab7-a015-e6659eddfa00"},{"id":"ea62072d-5620-4068-a5f5-60db33081a4a","q":"Server state vs client state: why treat them differently?","a":"Server state is a cache of data you do not own — it goes stale and needs fetching, deduping, revalidation and error states, so use RSC or a query library. Client state is UI state you do own, where useState or the URL is enough. id: 9c66eb52-2596-4c77-8de2-59c0ae5849a5"},{"id":"6973626d-af01-41fd-b052-f67e15483f3f","q":"useState vs useReducer — where's the line?","a":"Reach for useReducer once several pieces of state change together, or when the next state depends on what happened rather than on one new value. It moves transitions into a single pure function you can test and read in one place. id: e82642cb-4fe7-4886-8444-2c486f4c2f6e"},{"id":"4d764b91-4ad7-47b6-940c-656f8f1d26da","q":"What makes a good custom hook, and what are the Rules of Hooks?","a":"It names one behaviour, composes other hooks, and returns values rather than JSX. Hooks must be called unconditionally at the top level of a component or another hook — never inside loops, conditions, or callbacks. id: 71cb2ffa-f40e-4964-a2f5-532bac15daa7"},{"id":"110ace84-00e1-43e7-b7c0-ca2e03b242f6","q":"An effect fetches data and the props change mid-flight. What goes wrong and how do you fix it?","a":"Responses can resolve out of order and the stale one overwrites the fresh one. Fix it in the cleanup function: abort with an AbortController or flip an ignore flag — or hand fetching to a library that already does this. id: dfdd9ee1-bb3b-46b1-a69f-df8d1f421178"},{"id":"2de68bcb-9377-4f0a-a4a0-ae0d35c36e9b","q":"Why does StrictMode run effects twice in development?","a":"It mounts, unmounts and remounts to surface effects that are not safely repeatable, so a missing or wrong cleanup fails loudly. It is development-only, and the fix is correct cleanup rather than a \"has run\" guard. id: ee89d004-f770-438a-86eb-0d401f6bbafe"},{"id":"87e668ff-e0f0-4ac8-9bd2-061b42da1ad7","q":"useRef vs useState — what belongs in a ref?","a":"A ref holds a mutable value that does not affect the rendered output: DOM nodes, timer and subscription ids, previous values. Writing to it does not re-render, and you should not read or write it during render. id: ec530534-eb3b-4fbd-ba6e-982c7d1fd9cf"},{"id":"da83456d-fa0e-40e8-bff7-daeb9d1d53d2","q":"When should you still hand-write useMemo, useCallback and memo?","a":"For genuinely expensive computations, for stable identities crossing a boundary you do not control such as effect dependencies or a third-party library, and for re-render problems you have actually measured. The React Compiler covers the routine cases. id: da6c1495-1b16-496a-9fb6-3f63cc1af25c"},{"id":"cb1b9dc5-c32a-4911-86b0-67db494e4eac","q":"What is an error boundary, and what does it NOT catch?","a":"A component that catches errors thrown while rendering its subtree and shows a fallback instead of unmounting the app. It does not catch errors in event handlers, async callbacks, or ones thrown by itself. id: 079a4fc6-5a88-44ac-9010-3232fada356b"},{"id":"42a26feb-18fc-4427-b812-c585cd638b4f","q":"What does Suspense actually do, and what triggers it?","a":"It renders a fallback while something below it suspends — a lazily loaded component, or a promise read with use() or a Suspense-aware data source. On the server it also marks the boundary where streaming can flush. id: 8ac7f30b-1768-4e77-af72-6af244cae02b"},{"id":"ebd76008-5c05-4d4a-b16f-81d1d80cf565","q":"Server Components vs Client Components: where does the boundary go?","a":"Server is the default: data access, secrets and heavy dependencies stay there and ship no JavaScript. Push 'use client' down to the leaves that need state, effects or event handlers, and pass server data in as serialisable props. id: 50dc249f-4a8b-496e-9c0f-e6bcc7d3691d"},{"id":"86698f29-0c90-411c-adaa-a7acd54cbfbe","q":"How do you build a form with Server Actions in React 19?","a":"Pass an async function to form action. Wrap it in useActionState to get state, formAction and isPending, read the pending state inside children with useFormStatus, and add useOptimistic when you want instant feedback. id: 38eef364-ec5a-4fea-b595-f1bdc986d2a9"},{"id":"9a7c03c9-1b55-45c8-9741-7a55cdfbb92c","q":"What is the compound component pattern, and when is it worth it?","a":"Related parts such as Tabs, TabList and TabPanel share implicit state through context, so the consumer controls the markup and ordering. Worth it when a component has many valid arrangements that would otherwise become a pile of configuration props. id: 8e51b0ce-ddb0-46ef-b7b0-b918b33335cb"},{"id":"53041d4e-cedf-4c7c-9916-dd44356168da","q":"What does \"headless\" mean for a UI component, and how do you build one?","a":"Behaviour, state and accessibility with no styling: expose a hook or prop getters and let the caller render the markup. It is how Radix, Headless UI and TanStack work, and it has largely replaced render props. id: 9bf2a456-ced1-452e-8366-0e0873802cee"},{"id":"1e23fb62-35b1-451c-8970-2e0a4a58c17d","q":"How should you type component props in TypeScript today?","a":"Declare a props type and annotate the parameter rather than using React.FC. Inherit native props with ComponentProps<'button'>, type children as ReactNode, and use discriminated unions so impossible prop combinations will not compile. id: 3415e1ca-554d-464d-995d-f3d9dc565581"},{"id":"82dff9ab-7535-47bf-8ead-93d380329f9b","q":"You're wrapping a native button. What does the wrapper need to get right?","a":"Spread the remaining props through, forward ref — a plain prop in React 19 — default type to \"button\", and merge className instead of overwriting it, typically with clsx plus tailwind-merge. id: 2f17606d-90f5-4886-9422-c60edb36ad5e"},{"id":"538283ba-a21f-4a4c-828e-30c362587119","q":"What accessibility basics does a custom interactive component owe the user?","a":"A real semantic element where one exists, full keyboard operation with visible focus, an accessible name, ARIA state that tracks reality such as aria-expanded, and focus management for overlays including returning focus on close. id: 869efde8-8eb7-49d9-b4a2-5ed3405cf6fe"},{"id":"97836e2e-7126-441d-8687-3547e631a892","q":"What are the conventions for testing React components with Testing Library?","a":"Query the way a user would — role, then label, then text, with test ids as the last resort — drive interactions with user-event, assert on rendered output rather than state or props, and use findBy queries for anything async."}]},"index":0},{"id":"8e6ff784-1933-4ec7-8903-55e04802861f","q":"When do you NOT need a useEffect?","a":"Whenever the value can be derived during render or computed in an event handler. Effects are for synchronising with something outside React — the DOM, a subscription, the network — not for reacting to your own state changes. id: 5ce50e43-231c-4489-8b63-c699e8ce79ba","deck":"$5:props:children:1:props:cards:184:deck","index":1},{"id":"c9857d22-fd01-45ca-b102-12f703645220","q":"A prop changes and you want the component's state to reset. What's the idiomatic fix?","a":"Give the component a key tied to that prop so React remounts it with fresh state. Mirroring the prop into state and resetting it in an effect renders stale values first and is the classic anti-pattern. id: bce9ddb8-a165-4035-8ee3-81211d9f58a3","deck":"$5:props:children:1:props:cards:184:deck","index":2},{"id":"590cbae3-1116-4081-a5d3-958fec15376a","q":"Why is array index a bad key, and when is it fine?","a":"Index keys make React reuse the wrong instance when items are inserted, removed or reordered, so state and DOM stick to the wrong row. Fine only for a static list that is never reordered and holds no state. id: a9b08119-0a28-477c-ac59-e4577582e9e5","deck":"$5:props:children:1:props:cards:184:deck","index":3},{"id":"7bf8f0d9-e1c1-4640-bafb-299265e5d61d","q":"What does \"colocate state\" mean, and what's the rule for lifting it?","a":"Keep state in the lowest component that uses it, and lift it only as far as the closest common ancestor of the components that need it. Lifting higher than necessary re-renders half the tree for no reason. id: cdfff9b7-7010-49c0-b442-8245d47d99cc","deck":"$5:props:children:1:props:cards:184:deck","index":4},{"id":"57597be1-6eb4-40c4-8ec2-b3124e63af89","q":"Controlled vs uncontrolled inputs — when do you pick each?","a":"Controlled when you need to react to every keystroke: live validation, formatting, dependent fields. Uncontrolled with defaultValue plus a ref or FormData when you only care at submit time — cheaper and the default for Actions. id: 6efacdec-267a-4798-b45f-334451780ee4","deck":"$5:props:children:1:props:cards:184:deck","index":5},{"id":"0680e3a0-a4a8-4c3e-b4f3-b96ae20090e8","q":"What are the two main costs of Context, and how do you mitigate them?","a":"Every consumer re-renders whenever the value identity changes, and consumers become coupled to a provider being present. Split contexts by update frequency, memoise the value, and prefer passing children through over pushing everything into context. id: f6e93796-f76a-4ab7-a015-e6659eddfa00","deck":"$5:props:children:1:props:cards:184:deck","index":6},{"id":"ea62072d-5620-4068-a5f5-60db33081a4a","q":"Server state vs client state: why treat them differently?","a":"Server state is a cache of data you do not own — it goes stale and needs fetching, deduping, revalidation and error states, so use RSC or a query library. Client state is UI state you do own, where useState or the URL is enough. id: 9c66eb52-2596-4c77-8de2-59c0ae5849a5","deck":"$5:props:children:1:props:cards:184:deck","index":7},{"id":"6973626d-af01-41fd-b052-f67e15483f3f","q":"useState vs useReducer — where's the line?","a":"Reach for useReducer once several pieces of state change together, or when the next state depends on what happened rather than on one new value. It moves transitions into a single pure function you can test and read in one place. id: e82642cb-4fe7-4886-8444-2c486f4c2f6e","deck":"$5:props:children:1:props:cards:184:deck","index":8},{"id":"4d764b91-4ad7-47b6-940c-656f8f1d26da","q":"What makes a good custom hook, and what are the Rules of Hooks?","a":"It names one behaviour, composes other hooks, and returns values rather than JSX. Hooks must be called unconditionally at the top level of a component or another hook — never inside loops, conditions, or callbacks. id: 71cb2ffa-f40e-4964-a2f5-532bac15daa7","deck":"$5:props:children:1:props:cards:184:deck","index":9},{"id":"110ace84-00e1-43e7-b7c0-ca2e03b242f6","q":"An effect fetches data and the props change mid-flight. What goes wrong and how do you fix it?","a":"Responses can resolve out of order and the stale one overwrites the fresh one. Fix it in the cleanup function: abort with an AbortController or flip an ignore flag — or hand fetching to a library that already does this. id: dfdd9ee1-bb3b-46b1-a69f-df8d1f421178","deck":"$5:props:children:1:props:cards:184:deck","index":10},{"id":"2de68bcb-9377-4f0a-a4a0-ae0d35c36e9b","q":"Why does StrictMode run effects twice in development?","a":"It mounts, unmounts and remounts to surface effects that are not safely repeatable, so a missing or wrong cleanup fails loudly. It is development-only, and the fix is correct cleanup rather than a \"has run\" guard. id: ee89d004-f770-438a-86eb-0d401f6bbafe","deck":"$5:props:children:1:props:cards:184:deck","index":11},{"id":"87e668ff-e0f0-4ac8-9bd2-061b42da1ad7","q":"useRef vs useState — what belongs in a ref?","a":"A ref holds a mutable value that does not affect the rendered output: DOM nodes, timer and subscription ids, previous values. Writing to it does not re-render, and you should not read or write it during render. id: ec530534-eb3b-4fbd-ba6e-982c7d1fd9cf","deck":"$5:props:children:1:props:cards:184:deck","index":12},{"id":"da83456d-fa0e-40e8-bff7-daeb9d1d53d2","q":"When should you still hand-write useMemo, useCallback and memo?","a":"For genuinely expensive computations, for stable identities crossing a boundary you do not control such as effect dependencies or a third-party library, and for re-render problems you have actually measured. The React Compiler covers the routine cases. id: da6c1495-1b16-496a-9fb6-3f63cc1af25c","deck":"$5:props:children:1:props:cards:184:deck","index":13},{"id":"cb1b9dc5-c32a-4911-86b0-67db494e4eac","q":"What is an error boundary, and what does it NOT catch?","a":"A component that catches errors thrown while rendering its subtree and shows a fallback instead of unmounting the app. It does not catch errors in event handlers, async callbacks, or ones thrown by itself. id: 079a4fc6-5a88-44ac-9010-3232fada356b","deck":"$5:props:children:1:props:cards:184:deck","index":14},{"id":"42a26feb-18fc-4427-b812-c585cd638b4f","q":"What does Suspense actually do, and what triggers it?","a":"It renders a fallback while something below it suspends — a lazily loaded component, or a promise read with use() or a Suspense-aware data source. On the server it also marks the boundary where streaming can flush. id: 8ac7f30b-1768-4e77-af72-6af244cae02b","deck":"$5:props:children:1:props:cards:184:deck","index":15},{"id":"ebd76008-5c05-4d4a-b16f-81d1d80cf565","q":"Server Components vs Client Components: where does the boundary go?","a":"Server is the default: data access, secrets and heavy dependencies stay there and ship no JavaScript. Push 'use client' down to the leaves that need state, effects or event handlers, and pass server data in as serialisable props. id: 50dc249f-4a8b-496e-9c0f-e6bcc7d3691d","deck":"$5:props:children:1:props:cards:184:deck","index":16},{"id":"86698f29-0c90-411c-adaa-a7acd54cbfbe","q":"How do you build a form with Server Actions in React 19?","a":"Pass an async function to form action. Wrap it in useActionState to get state, formAction and isPending, read the pending state inside children with useFormStatus, and add useOptimistic when you want instant feedback. id: 38eef364-ec5a-4fea-b595-f1bdc986d2a9","deck":"$5:props:children:1:props:cards:184:deck","index":17},{"id":"9a7c03c9-1b55-45c8-9741-7a55cdfbb92c","q":"What is the compound component pattern, and when is it worth it?","a":"Related parts such as Tabs, TabList and TabPanel share implicit state through context, so the consumer controls the markup and ordering. Worth it when a component has many valid arrangements that would otherwise become a pile of configuration props. id: 8e51b0ce-ddb0-46ef-b7b0-b918b33335cb","deck":"$5:props:children:1:props:cards:184:deck","index":18},{"id":"53041d4e-cedf-4c7c-9916-dd44356168da","q":"What does \"headless\" mean for a UI component, and how do you build one?","a":"Behaviour, state and accessibility with no styling: expose a hook or prop getters and let the caller render the markup. It is how Radix, Headless UI and TanStack work, and it has largely replaced render props. id: 9bf2a456-ced1-452e-8366-0e0873802cee","deck":"$5:props:children:1:props:cards:184:deck","index":19},{"id":"1e23fb62-35b1-451c-8970-2e0a4a58c17d","q":"How should you type component props in TypeScript today?","a":"Declare a props type and annotate the parameter rather than using React.FC. Inherit native props with ComponentProps<'button'>, type children as ReactNode, and use discriminated unions so impossible prop combinations will not compile. id: 3415e1ca-554d-464d-995d-f3d9dc565581","deck":"$5:props:children:1:props:cards:184:deck","index":20},{"id":"82dff9ab-7535-47bf-8ead-93d380329f9b","q":"You're wrapping a native button. What does the wrapper need to get right?","a":"Spread the remaining props through, forward ref — a plain prop in React 19 — default type to \"button\", and merge className instead of overwriting it, typically with clsx plus tailwind-merge. id: 2f17606d-90f5-4886-9422-c60edb36ad5e","deck":"$5:props:children:1:props:cards:184:deck","index":21},{"id":"538283ba-a21f-4a4c-828e-30c362587119","q":"What accessibility basics does a custom interactive component owe the user?","a":"A real semantic element where one exists, full keyboard operation with visible focus, an accessible name, ARIA state that tracks reality such as aria-expanded, and focus management for overlays including returning focus on close. id: 869efde8-8eb7-49d9-b4a2-5ed3405cf6fe","deck":"$5:props:children:1:props:cards:184:deck","index":22},{"id":"97836e2e-7126-441d-8687-3547e631a892","q":"What are the conventions for testing React components with Testing Library?","a":"Query the way a user would — role, then label, then text, with test ids as the last resort — drive interactions with user-event, assert on rendered output rather than state or props, and use findBy queries for anything async.","deck":"$5:props:children:1:props:cards:184:deck","index":23},{"id":"36560cec-d8b8-4c87-a4c4-251caecfb8fa","q":"When did TypeScript 5.8, 5.9, 6.0 and 7.0 ship?","a":"5.8 on 28 Feb 2025, 5.9 on 1 Aug 2025, 6.0 on 23 Mar 2026 and 7.0 on 8 Jul 2026. The 5.x line ran on a roughly 3-month cadence; 6.0 and 7.0 arrived four months apart in 2026. id: 1a9f8837-47fd-4a22-8801-273a713f4749","deck":{"slug":"typescript-5-8-7-0","name":"TypeScript 5.8-7.0","blurb":"Releases, dates, breaking changes and what's next","tint":"#CAD3F2","ink":"#27419B","cards":[{"id":"36560cec-d8b8-4c87-a4c4-251caecfb8fa","q":"When did TypeScript 5.8, 5.9, 6.0 and 7.0 ship?","a":"5.8 on 28 Feb 2025, 5.9 on 1 Aug 2025, 6.0 on 23 Mar 2026 and 7.0 on 8 Jul 2026. The 5.x line ran on a roughly 3-month cadence; 6.0 and 7.0 arrived four months apart in 2026. id: 1a9f8837-47fd-4a22-8801-273a713f4749"},{"id":"5bff8dda-0e15-4bcc-90d5-42c550f8567e","q":"What is TypeScript 7.0, and why is it a landmark release?","a":"It is the compiler and language service ported from JavaScript to Go, released 8 Jul 2026. Microsoft measured 7.7x-11.9x faster builds on real codebases with 6-26% lower memory use. id: 93a025f0-b6df-4153-8773-53d6f611032f"},{"id":"6168a21e-a0cb-4653-adf1-7aac88a13751","q":"Is TypeScript 7 a new language or type system?","a":"No - it is a port, not a redesign. The syntax, type system and checking semantics are the same as 6.0; what changed is the implementation, the supported config surface and the tooling around it. id: c5641be1-503d-4cda-b1df-cd6213ada69e"},{"id":"a5b86837-b828-41f6-a6f8-6c653941470c","q":"How does TypeScript 7 use multiple cores?","a":"New --checkers flag (default 4) runs type-checking across parallel workers and --builders parallelises project-reference builds; --singleThreaded turns parallelism off. id: 3ce72215-5be1-46f8-9319-49ceb655f045"},{"id":"be43a0a6-ae05-4314-8b5d-b7252493efdb","q":"What happened to tsc's watch mode and editor support in 7.0?","a":"--watch was rebuilt on a Go port of Parcel's file watcher, and the language server was rewritten on LSP - over 80% fewer failing commands and 60% fewer server crashes than 6.0. id: 19cff139-825b-4f1c-8cd9-132385e4d551"},{"id":"8f86d6bd-e680-4f45-9939-df6bd3129ab6","q":"Which tsconfig defaults changed on the way to 7.0?","a":"strict is now true, module defaults to esnext, target to es2025 (6.0), rootDir to the tsconfig's own directory, and types to an empty array. id: f39d0975-4ad7-4cf5-adf3-fa923cf30460"},{"id":"89b1ba4a-3129-4cc7-a0f1-039bfaa81e0e","q":"Why does \"types\": [] as a default break so many projects?","a":"Previously every package under node_modules/@types was auto-included. Now you must list them explicitly, e.g. \"types\": [\"node\"], or globals like process and __dirname stop resolving. id: 0d3a8992-5664-412a-beda-511caf888e3c"},{"id":"1914b6f8-1bac-41ba-8fb8-c4110a0d0527","q":"What did TypeScript 6.0 deprecate?","a":"target es5, downlevelIteration, moduleResolution node10 and classic, module amd/umd/system/none, baseUrl, outFile, esModuleInterop false, legacy module namespace syntax and import assert. id: 33dc3048-438d-46ff-b841-8da90696bcf5"},{"id":"05b12c4b-7c8b-4512-a3f0-df5f803fcb5d","q":"What does \"ignoreDeprecations\": \"6.0\" do?","a":"It downgrades 6.0's deprecation errors back to warnings so a project can keep building on the old options - an escape hatch for migration, not a long-term setting, since 7.0 removes them outright. id: 04e9a4ea-7122-4511-8789-2eefe56af5bb"},{"id":"4f4032e4-f46a-4878-b800-8de57e00094f","q":"Why did TypeScript 6.0 exist at all?","a":"It is the bridge release: the last JavaScript-based compiler, whose job was to surface 7.0's breaking changes as deprecations while you were still on the familiar codebase. id: 67c35cf7-9d5f-43f9-bc8e-2ec358fcfcf9"},{"id":"44b5c76a-5b3c-43c5-8693-bed2be5344f9","q":"Which options are gone for good in TypeScript 7.0?","a":"target es5 and downlevelIteration, moduleResolution node10/classic, module amd/umd/systemjs/none, baseUrl, and esModuleInterop or allowSyntheticDefaultImports set to false. id: d9bd7254-8f89-4cc3-82e0-84651025c365"},{"id":"fcbbe690-3056-4f31-9e31-5d3fff7a9ba6","q":"How did TypeScript 7 change checking of plain JavaScript files?","a":"JS support was tightened to match TS rules: values can no longer stand in for types, Closure-style annotations are no longer recognised, and postfix ! is unsupported. id: 5299219e-b8dc-4ba5-888a-bfbd8d32de2e"},{"id":"ef93af1a-1e64-4a0d-bb71-4156a18ef9f6","q":"Can Vue, Svelte, Angular, Astro or MDX use TypeScript 7 today?","a":"Not yet. Embedded-language tooling depends on the compiler API, which is only stabilised in 7.1 - until then those frameworks stay on the 6.0 toolchain. id: a4727286-ba89-414a-8c17-aac9ce14d717"},{"id":"63cc50d6-3f6f-4b61-a053-1d4aaa093db0","q":"What was tsgo, and what does TypeScript 7 ship as now?","a":"tsgo was the preview executable in the @typescript/native-preview package. Stable 7.0 ships in the normal typescript package and is invoked as tsc. id: 94de8bec-36b1-4514-9c6a-48a8d5f7ea63"},{"id":"fe66aecb-8920-420e-b010-612bf060b45a","q":"How do you run TypeScript 6 and 7 side by side?","a":"Install the @typescript/typescript6 compatibility package, which lets both compilers coexist without name collisions while you migrate parts of a repo. id: 14ce4da3-676e-46d0-b2d2-429a5098d129"},{"id":"603642b3-de8d-4fe8-ad7e-2ad2a4937dd6","q":"What is planned for TypeScript 7.1, and when?","a":"Per the published iteration plan: beta 9 Sep 2026, RC 20 Oct, stable 10 Nov 2026. Headline item is the stable programmatic API, plus ES2026 lib/target and type on import attributes. id: 42b50981-9920-4870-ba9e-fb1b68218d10"},{"id":"a5a47e30-7380-4806-aa02-45db8f3cd007","q":"Why does the missing programmatic API in 7.0 matter?","a":"Everything built on the old JS compiler API - typed ESLint rules, ts-jest, bundler plugins, framework language tooling - cannot target the Go compiler until 7.1 stabilises that API. id: cadcffef-ab0d-4672-93b4-11d139a00262"},{"id":"48444bfa-20e8-41a6-80ea-816bbb43b483","q":"What release cadence has the team signalled after 7.0?","a":"A return to the pre-7.0 rhythm: featureful releases roughly every 3-4 months. id: d805fc6e-8fdb-45a2-b5ca-f42115292ecf"},{"id":"60760412-ef11-48fe-93bb-2713396c9202","q":"What is import defer, added in 5.9?","a":"Syntax like import defer * as ns from \"./m\" loads a module but delays evaluating it until one of its exports is actually touched - a startup-cost optimisation. 5.9 added the type-checking for it. id: 007ee4bd-0a15-4966-af4b-3afac5e73e63"},{"id":"5383af90-cf43-455a-ad49-3d17c8ac78b7","q":"Why did 5.9 add --module node20 when nodenext exists?","a":"nodenext floats: its behaviour shifts as Node evolves. node20 pins the semantics of Node 20 so builds stay reproducible, exactly as node18 did in 5.8. id: c2e93e14-6681-4bfa-a073-3bbaf2aef407"},{"id":"733ba477-1f83-401f-8580-ec7a1e3ca92e","q":"What else did 5.9 bring to everyday DX?","a":"A much leaner, more prescriptive tsc --init output, MDN-sourced summaries on DOM APIs, and expandable +/- quick-info hovers with a configurable length limit. id: ba71b7d6-4194-48cc-8f50-ff0154573852"},{"id":"2a561e66-775d-4984-8f87-2e0bb8c13caa","q":"What is --erasableSyntaxOnly (5.8) for?","a":"It errors on TypeScript constructs that emit runtime code - enums, namespaces, parameter properties - so the file is valid under Node's type-stripping, where types are simply erased. id: b4dad803-a465-4944-8c30-6bcf09740a42"},{"id":"f59f5e52-9ecd-4c7e-a26d-b4f156689323","q":"What return-type bug did 5.8 start catching?","a":"For a conditional expression in a return statement, each branch is now checked against the declared return type, instead of only the union-ed result. id: a2d80053-92da-48a3-b265-6546c25690a7"},{"id":"be4a193b-18f8-4424-8488-32a8c6f4e376","q":"What did 5.8 change about requiring ESM?","a":"Under --module nodenext, require() of an ES module is allowed, matching Node 22. The new --module node18 keeps the older rules for projects still on Node 18."}]},"index":0},{"id":"5bff8dda-0e15-4bcc-90d5-42c550f8567e","q":"What is TypeScript 7.0, and why is it a landmark release?","a":"It is the compiler and language service ported from JavaScript to Go, released 8 Jul 2026. Microsoft measured 7.7x-11.9x faster builds on real codebases with 6-26% lower memory use. id: 93a025f0-b6df-4153-8773-53d6f611032f","deck":"$5:props:children:1:props:cards:208:deck","index":1},{"id":"6168a21e-a0cb-4653-adf1-7aac88a13751","q":"Is TypeScript 7 a new language or type system?","a":"No - it is a port, not a redesign. The syntax, type system and checking semantics are the same as 6.0; what changed is the implementation, the supported config surface and the tooling around it. id: c5641be1-503d-4cda-b1df-cd6213ada69e","deck":"$5:props:children:1:props:cards:208:deck","index":2},{"id":"a5b86837-b828-41f6-a6f8-6c653941470c","q":"How does TypeScript 7 use multiple cores?","a":"New --checkers flag (default 4) runs type-checking across parallel workers and --builders parallelises project-reference builds; --singleThreaded turns parallelism off. id: 3ce72215-5be1-46f8-9319-49ceb655f045","deck":"$5:props:children:1:props:cards:208:deck","index":3},{"id":"be43a0a6-ae05-4314-8b5d-b7252493efdb","q":"What happened to tsc's watch mode and editor support in 7.0?","a":"--watch was rebuilt on a Go port of Parcel's file watcher, and the language server was rewritten on LSP - over 80% fewer failing commands and 60% fewer server crashes than 6.0. id: 19cff139-825b-4f1c-8cd9-132385e4d551","deck":"$5:props:children:1:props:cards:208:deck","index":4},{"id":"8f86d6bd-e680-4f45-9939-df6bd3129ab6","q":"Which tsconfig defaults changed on the way to 7.0?","a":"strict is now true, module defaults to esnext, target to es2025 (6.0), rootDir to the tsconfig's own directory, and types to an empty array. id: f39d0975-4ad7-4cf5-adf3-fa923cf30460","deck":"$5:props:children:1:props:cards:208:deck","index":5},{"id":"89b1ba4a-3129-4cc7-a0f1-039bfaa81e0e","q":"Why does \"types\": [] as a default break so many projects?","a":"Previously every package under node_modules/@types was auto-included. Now you must list them explicitly, e.g. \"types\": [\"node\"], or globals like process and __dirname stop resolving. id: 0d3a8992-5664-412a-beda-511caf888e3c","deck":"$5:props:children:1:props:cards:208:deck","index":6},{"id":"1914b6f8-1bac-41ba-8fb8-c4110a0d0527","q":"What did TypeScript 6.0 deprecate?","a":"target es5, downlevelIteration, moduleResolution node10 and classic, module amd/umd/system/none, baseUrl, outFile, esModuleInterop false, legacy module namespace syntax and import assert. id: 33dc3048-438d-46ff-b841-8da90696bcf5","deck":"$5:props:children:1:props:cards:208:deck","index":7},{"id":"05b12c4b-7c8b-4512-a3f0-df5f803fcb5d","q":"What does \"ignoreDeprecations\": \"6.0\" do?","a":"It downgrades 6.0's deprecation errors back to warnings so a project can keep building on the old options - an escape hatch for migration, not a long-term setting, since 7.0 removes them outright. id: 04e9a4ea-7122-4511-8789-2eefe56af5bb","deck":"$5:props:children:1:props:cards:208:deck","index":8},{"id":"4f4032e4-f46a-4878-b800-8de57e00094f","q":"Why did TypeScript 6.0 exist at all?","a":"It is the bridge release: the last JavaScript-based compiler, whose job was to surface 7.0's breaking changes as deprecations while you were still on the familiar codebase. id: 67c35cf7-9d5f-43f9-bc8e-2ec358fcfcf9","deck":"$5:props:children:1:props:cards:208:deck","index":9},{"id":"44b5c76a-5b3c-43c5-8693-bed2be5344f9","q":"Which options are gone for good in TypeScript 7.0?","a":"target es5 and downlevelIteration, moduleResolution node10/classic, module amd/umd/systemjs/none, baseUrl, and esModuleInterop or allowSyntheticDefaultImports set to false. id: d9bd7254-8f89-4cc3-82e0-84651025c365","deck":"$5:props:children:1:props:cards:208:deck","index":10},{"id":"fcbbe690-3056-4f31-9e31-5d3fff7a9ba6","q":"How did TypeScript 7 change checking of plain JavaScript files?","a":"JS support was tightened to match TS rules: values can no longer stand in for types, Closure-style annotations are no longer recognised, and postfix ! is unsupported. id: 5299219e-b8dc-4ba5-888a-bfbd8d32de2e","deck":"$5:props:children:1:props:cards:208:deck","index":11},{"id":"ef93af1a-1e64-4a0d-bb71-4156a18ef9f6","q":"Can Vue, Svelte, Angular, Astro or MDX use TypeScript 7 today?","a":"Not yet. Embedded-language tooling depends on the compiler API, which is only stabilised in 7.1 - until then those frameworks stay on the 6.0 toolchain. id: a4727286-ba89-414a-8c17-aac9ce14d717","deck":"$5:props:children:1:props:cards:208:deck","index":12},{"id":"63cc50d6-3f6f-4b61-a053-1d4aaa093db0","q":"What was tsgo, and what does TypeScript 7 ship as now?","a":"tsgo was the preview executable in the @typescript/native-preview package. Stable 7.0 ships in the normal typescript package and is invoked as tsc. id: 94de8bec-36b1-4514-9c6a-48a8d5f7ea63","deck":"$5:props:children:1:props:cards:208:deck","index":13},{"id":"fe66aecb-8920-420e-b010-612bf060b45a","q":"How do you run TypeScript 6 and 7 side by side?","a":"Install the @typescript/typescript6 compatibility package, which lets both compilers coexist without name collisions while you migrate parts of a repo. id: 14ce4da3-676e-46d0-b2d2-429a5098d129","deck":"$5:props:children:1:props:cards:208:deck","index":14},{"id":"603642b3-de8d-4fe8-ad7e-2ad2a4937dd6","q":"What is planned for TypeScript 7.1, and when?","a":"Per the published iteration plan: beta 9 Sep 2026, RC 20 Oct, stable 10 Nov 2026. Headline item is the stable programmatic API, plus ES2026 lib/target and type on import attributes. id: 42b50981-9920-4870-ba9e-fb1b68218d10","deck":"$5:props:children:1:props:cards:208:deck","index":15},{"id":"a5a47e30-7380-4806-aa02-45db8f3cd007","q":"Why does the missing programmatic API in 7.0 matter?","a":"Everything built on the old JS compiler API - typed ESLint rules, ts-jest, bundler plugins, framework language tooling - cannot target the Go compiler until 7.1 stabilises that API. id: cadcffef-ab0d-4672-93b4-11d139a00262","deck":"$5:props:children:1:props:cards:208:deck","index":16},{"id":"48444bfa-20e8-41a6-80ea-816bbb43b483","q":"What release cadence has the team signalled after 7.0?","a":"A return to the pre-7.0 rhythm: featureful releases roughly every 3-4 months. id: d805fc6e-8fdb-45a2-b5ca-f42115292ecf","deck":"$5:props:children:1:props:cards:208:deck","index":17},{"id":"60760412-ef11-48fe-93bb-2713396c9202","q":"What is import defer, added in 5.9?","a":"Syntax like import defer * as ns from \"./m\" loads a module but delays evaluating it until one of its exports is actually touched - a startup-cost optimisation. 5.9 added the type-checking for it. id: 007ee4bd-0a15-4966-af4b-3afac5e73e63","deck":"$5:props:children:1:props:cards:208:deck","index":18},{"id":"5383af90-cf43-455a-ad49-3d17c8ac78b7","q":"Why did 5.9 add --module node20 when nodenext exists?","a":"nodenext floats: its behaviour shifts as Node evolves. node20 pins the semantics of Node 20 so builds stay reproducible, exactly as node18 did in 5.8. id: c2e93e14-6681-4bfa-a073-3bbaf2aef407","deck":"$5:props:children:1:props:cards:208:deck","index":19},{"id":"733ba477-1f83-401f-8580-ec7a1e3ca92e","q":"What else did 5.9 bring to everyday DX?","a":"A much leaner, more prescriptive tsc --init output, MDN-sourced summaries on DOM APIs, and expandable +/- quick-info hovers with a configurable length limit. id: ba71b7d6-4194-48cc-8f50-ff0154573852","deck":"$5:props:children:1:props:cards:208:deck","index":20},{"id":"2a561e66-775d-4984-8f87-2e0bb8c13caa","q":"What is --erasableSyntaxOnly (5.8) for?","a":"It errors on TypeScript constructs that emit runtime code - enums, namespaces, parameter properties - so the file is valid under Node's type-stripping, where types are simply erased. id: b4dad803-a465-4944-8c30-6bcf09740a42","deck":"$5:props:children:1:props:cards:208:deck","index":21},{"id":"f59f5e52-9ecd-4c7e-a26d-b4f156689323","q":"What return-type bug did 5.8 start catching?","a":"For a conditional expression in a return statement, each branch is now checked against the declared return type, instead of only the union-ed result. id: a2d80053-92da-48a3-b265-6546c25690a7","deck":"$5:props:children:1:props:cards:208:deck","index":22},{"id":"be4a193b-18f8-4424-8488-32a8c6f4e376","q":"What did 5.8 change about requiring ESM?","a":"Under --module nodenext, require() of an ES module is allowed, matching Node 22. The new --module node18 keeps the older rules for projects still on Node 18.","deck":"$5:props:children:1:props:cards:208:deck","index":23},{"id":"c9dbc60f-ea49-4f63-a2d9-c1ccd532014b","q":"unknown vs any vs never - when do you reach for each?","a":"any switches checking off and infects everything it touches; unknown is the safe top type you must narrow before use; never is the empty type returned by functions that never return and left over from exhaustive narrowing. Type external input as unknown, never any. id: b8d77ea2-5677-4eb2-bd9a-d40594866c50","deck":{"slug":"typescript-in-practice","name":"TypeScript in practice","blurb":"Type-system mechanics and applied React/Next.js typing","tint":"#F2CDCA","ink":"#9B2F27","cards":[{"id":"c9dbc60f-ea49-4f63-a2d9-c1ccd532014b","q":"unknown vs any vs never - when do you reach for each?","a":"any switches checking off and infects everything it touches; unknown is the safe top type you must narrow before use; never is the empty type returned by functions that never return and left over from exhaustive narrowing. Type external input as unknown, never any. id: b8d77ea2-5677-4eb2-bd9a-d40594866c50"},{"id":"2ba5d820-fe27-40a3-a903-1f65fb9119b7","q":"What does satisfies do that a type annotation does not?","a":"satisfies checks a value against a type without widening it, so you keep the literal inference. const routes = {...} satisfies Record<string, Route> validates the shape but keeps the exact keys for autocomplete. id: 57f4a6ed-1dca-44c8-b5d1-25c8ea740e14"},{"id":"cffb7093-84d1-416d-beb5-2b7e9c424e1d","q":"How do you get exhaustiveness checking on a discriminated union?","a":"In the default branch assign the value to never: const _x: never = value. If a new variant is added the assignment stops compiling, so the switch fails at build time rather than silently falling through. id: f86ebffe-788b-4f48-bc68-395d13f69b00"},{"id":"f10ade39-e8df-489a-a8cb-ffcdd56b030c","q":"What is a user-defined type guard, and what changed in 5.5?","a":"A function returning x is Foo that narrows at call sites. Since 5.5 TypeScript infers those predicates for simple functions, so a filter callback like x => x !== null can narrow without the manual annotation. id: ffb5b613-0135-4442-b78d-58d48c085441"},{"id":"a9668684-1e1b-4565-90d6-3fa78ba6a58b","q":"Explain conditional types and infer in one breath.","a":"T extends U ? A : B picks a branch per type, and infer names a type captured during that match: type El<T> = T extends (infer U)[] ? U : never. Over a union the conditional distributes member by member. id: c8183ba5-ee71-40d3-9a7e-03324002865a"},{"id":"29515817-33ba-41b3-9c8e-86e4a86509d9","q":"What is a mapped type, and what does key remapping add?","a":"{ [K in keyof T]: ... } rebuilds a type key by key; as in the key position renames or drops keys, e.g. { [K in keyof T as `get${Capitalize<K & string>}`]: () => T[K] } to generate getters. id: 0a438d6f-3b64-4d99-9279-71e0ea1312ee"},{"id":"91faffd2-c202-4f62-bbdc-89c0d6787f38","q":"Which built-in utility types should be reflexive for you?","a":"Partial, Required, Readonly, Pick, Omit, Record, Exclude, Extract, NonNullable, ReturnType, Parameters, Awaited. Most are a mapped or conditional type you could write yourself in one line. id: 674406a5-ba7e-4f01-a52f-872bdefd0aad"},{"id":"5376378c-ca18-4c12-ae2a-4d005abd649e","q":"interface vs type alias - what actually differs?","a":"Interfaces support declaration merging and are used for augmenting other modules' types; type aliases can express unions, tuples, conditionals and mapped types. Use interface for object contracts, type for anything computed. id: d1662558-132b-47f2-936b-d997d36c7929"},{"id":"b1a778f5-80e2-466e-8d7d-15f58398736b","q":"What is structural typing, and where does it bite?","a":"Compatibility is by shape, not by name, so any object with the right members fits. The exception is excess property checking on fresh object literals, which is why an inline literal errors but the same value assigned via a variable does not. id: cefb6c2b-3491-4c44-aaaf-532f235bac87"},{"id":"b46ca36a-a004-43bf-95c8-38e072f235bd","q":"How do you get nominal typing in a structural system?","a":"Brand the type: type UserId = string & { readonly __brand: 'UserId' }. A plain string no longer assigns, so you cannot pass an OrderId where a UserId belongs - useful for ids, currency and unvalidated input. id: 87669230-5bc8-49b7-9816-767f460a3f4c"},{"id":"bce6e970-7f7b-493c-be4c-2fffdacfabd2","q":"keyof, typeof and T[K] - what does each give you?","a":"typeof lifts a value into its type, keyof gives the union of a type's keys, and T[K] is indexed access. Together: typeof config, keyof typeof config, and config[keyof typeof config] for the union of its values. id: 0f71b44b-074f-4b71-80af-dd80460fbb46"},{"id":"d9cd7567-3052-4a10-b0aa-5c76f226d872","q":"What does as const do?","a":"It makes an object or array deeply readonly and infers literal types instead of widened ones, so ['a','b'] as const becomes readonly ['a','b'] - the usual way to derive a union of literals from a value. id: 84378703-2c28-4994-ad81-6aca8a13a226"},{"id":"bb6582ab-17e7-4bb0-9f5f-8a6f0e3f2b71","q":"What is a const type parameter, and why does it matter?","a":"<const T> on a generic makes call-site arguments infer as literals without the caller writing as const, so a helper can return precise literal types from a plain inline array or object. id: 8c015200-4cfb-432c-9d7d-94315d7e40c7"},{"id":"5862e8c0-1920-4dcb-83cd-71ec048b2175","q":"Template literal types - give a real use.","a":"They build string types from other types: type Ev = `on${Capitalize<'click' | 'focus'>}` gives 'onClick' | 'onFocus'. Common for event names, route paths and CSS-in-TS keys. id: c514b9eb-ce9f-46a6-81a9-2cbb2f1527e0"},{"id":"563d4b6a-ed41-4567-8cca-0da5d854c6b2","q":"Why can index signatures lie, and what fixes it?","a":"Record<string, T> claims every key exists, so obj['missing'] types as T but is at runtime undefined. --noUncheckedIndexedAccess adds | undefined to indexed reads and forces you to check. id: 2b610f9f-f8ca-4723-aa33-9915ebb459ed"},{"id":"a096684d-2a65-4ab6-9130-f6f5fe11e8da","q":"When are function overloads the right tool?","a":"When the return type depends on the argument shape in a way a union cannot express. Otherwise prefer a union parameter or a generic - overloads are unchecked against each other and easy to get wrong. id: 76539078-1131-4e81-a6f5-9dbfd843bfb1"},{"id":"4bff6723-1afa-4329-be6d-850ad2d08741","q":"Why do people avoid enums, and what replaces them?","a":"Enums emit runtime code, break under Node's type-stripping and --erasableSyntaxOnly, and numeric enums accept any number. Use a const object plus typeof obj[keyof typeof obj], or a plain string union. id: c467dcdd-5d9c-4b6e-954a-944ac94d309f"},{"id":"7a6f4b7e-5b9c-4183-9f3e-a4fc29ea576c","q":"What is strictFunctionTypes actually protecting you from?","a":"It checks function parameters contravariantly, so a handler taking a narrower parameter cannot be assigned where a wider one is expected. Method-shorthand parameters stay bivariant, which is why the same bug slips through on interfaces declared with method syntax. id: 1a508d35-3d3e-4b6b-b38a-db9fc4ee6c05"},{"id":"fb5bcc49-0075-4b33-ae02-052c88cd8a71","q":"Why import type, and what does isolatedModules demand?","a":"import type marks an import as erasable so bundlers and single-file transpilers do not keep a runtime import. isolatedModules requires every file to be transpilable alone, which is what Next.js, esbuild and SWC do. id: b10e2203-0fb7-4df1-8a31-a3fa3352d081"},{"id":"dffcbfa0-67b7-4e1b-a803-51cd7c265334","q":"What is declaration merging / module augmentation for?","a":"declare module '...' reopens another package's types to add your own - extending Express's Request, next-auth's Session, or adding keys to ProcessEnv - without forking the package. id: c864349b-ef3b-4ac2-b06b-623a5bcbc602"},{"id":"34e0b43c-342c-49c0-b15c-b9b6a5efeb0a","q":"How should types cross a network boundary?","a":"Do not assert. Parse at the edge with a runtime validator (zod, valibot) and infer the static type from the schema, so one definition guards both runtime and compile time. as Response is a lie the compiler cannot check. id: 2c196974-34da-4687-a702-427ff12c090e"},{"id":"12e47fce-f963-442d-b821-518c4826f598","q":"ts-ignore vs ts-expect-error - which and why?","a":"@ts-expect-error, because it errors when the line stops failing, so the suppression gets cleaned up. @ts-ignore stays silent forever and hides the next real bug on that line. id: 840f1859-3b08-4bbf-9516-77414d90ff04"},{"id":"e3ddb575-9df6-4c8e-8e7a-72a38572ba5e","q":"What is NoInfer<T> for?","a":"It blocks a type parameter from being inferred from that position, so one argument drives inference and another is only checked against it - e.g. a default value that must match the options array, not widen it. id: 1caa3471-733e-413e-9a61-2d8265e4b2ef"},{"id":"3117a26d-42ae-49a5-b1c4-c30f7736faf7","q":"You inherit a large JS codebase. How do you get it to strict TS?","a":"Turn on allowJs and checkJs with strict off, rename leaf modules first, type the boundaries (API, config, shared models) before internals, then enable strict flags one at a time - strictNullChecks last and loudest. id: 0df5f104-fd37-4ffb-88f3-f2e41ae9c16e"},{"id":"67250a73-ccf8-49a9-a22b-7cf173076962","q":"How do you type a React component's props well?","a":"Declare an explicit props type and destructure; use React.ReactNode for renderable children and ComponentProps<'button'> to inherit native props. Avoid React.FC - it adds little and complicates generics. id: 7de8559c-2da5-4c68-ab61-8272d2576db3"},{"id":"9a7df371-04d5-4c11-920d-027598343e6c","q":"useState and useRef - where does inference fail?","a":"useState(null) infers null, so pass the generic: useState<User | null>(null). For DOM refs use useRef<HTMLInputElement>(null) which gives the readonly ref React assigns; useRef<number>(0) gives a mutable box. id: daed2ef5-f046-4618-b086-6c505f5d99ea"},{"id":"091e151a-1661-4981-a18b-03283c4aa4ca","q":"How do you write a generic React component?","a":"Type the props with a parameter and let inference flow from the props: function List<T>({ items, render }: { items: T[]; render: (item: T) => ReactNode }). The caller gets T inferred from items. id: 587d069c-f13d-4f8a-b455-8efe4f1debf9"},{"id":"5daaacaa-6f59-47ec-8ee7-2cd0e6f36d21","q":"Why is useReducer a showcase for discriminated unions?","a":"Actions are a union tagged by type, so the reducer's switch narrows the payload per case and a never default makes new actions a compile error - a state machine the compiler checks for you. id: d6c62020-f2e1-4e01-b32f-cc23c458e774"},{"id":"c97512c6-66f1-4d88-b387-8fc93daf1324","q":"How do you type event handlers without guessing?","a":"Take the type from the element: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement>. Better still, type the handler by the prop - ComponentProps<'input'>['onChange'] - and let the parameter infer. id: d6fc881a-4eb2-4fd8-a8d3-755e7b8fae4d"},{"id":"8803e489-4360-42c5-85a6-3573ca5e18ef","q":"What does the Server/Client boundary mean for types?","a":"Anything passed from a Server Component to a Client Component must be serializable, so the type system will let you pass a function or Date shape that fails at runtime. Keep the boundary props to plain data. id: 08393373-a5c4-4ff0-8847-8ccfdd974d57"},{"id":"54632168-80fd-43a2-a7fd-486c51685d28","q":"How do you get end-to-end type safety from route to component?","a":"Define the model once, derive everything else: infer the response type from the schema or handler, export it, and have the client import that type instead of redeclaring it. Duplicate interfaces are how drift starts. id: e074cdb9-3b1f-4aea-91d6-e3b1b2a0b20a"},{"id":"5d66ce83-2d48-470b-b732-43f6abf615ef","q":"Which strict flags do you turn on beyond strict: true?","a":"noUncheckedIndexedAccess, exactOptionalPropertyTypes and noImplicitOverride are not in the strict bundle. Say why you would add them - and why exactOptionalPropertyTypes is the one that breaks the most existing code."}]},"index":0},{"id":"2ba5d820-fe27-40a3-a903-1f65fb9119b7","q":"What does satisfies do that a type annotation does not?","a":"satisfies checks a value against a type without widening it, so you keep the literal inference. const routes = {...} satisfies Record<string, Route> validates the shape but keeps the exact keys for autocomplete. id: 57f4a6ed-1dca-44c8-b5d1-25c8ea740e14","deck":"$5:props:children:1:props:cards:232:deck","index":1},{"id":"cffb7093-84d1-416d-beb5-2b7e9c424e1d","q":"How do you get exhaustiveness checking on a discriminated union?","a":"In the default branch assign the value to never: const _x: never = value. If a new variant is added the assignment stops compiling, so the switch fails at build time rather than silently falling through. id: f86ebffe-788b-4f48-bc68-395d13f69b00","deck":"$5:props:children:1:props:cards:232:deck","index":2},{"id":"f10ade39-e8df-489a-a8cb-ffcdd56b030c","q":"What is a user-defined type guard, and what changed in 5.5?","a":"A function returning x is Foo that narrows at call sites. Since 5.5 TypeScript infers those predicates for simple functions, so a filter callback like x => x !== null can narrow without the manual annotation. id: ffb5b613-0135-4442-b78d-58d48c085441","deck":"$5:props:children:1:props:cards:232:deck","index":3},{"id":"a9668684-1e1b-4565-90d6-3fa78ba6a58b","q":"Explain conditional types and infer in one breath.","a":"T extends U ? A : B picks a branch per type, and infer names a type captured during that match: type El<T> = T extends (infer U)[] ? U : never. Over a union the conditional distributes member by member. id: c8183ba5-ee71-40d3-9a7e-03324002865a","deck":"$5:props:children:1:props:cards:232:deck","index":4},{"id":"29515817-33ba-41b3-9c8e-86e4a86509d9","q":"What is a mapped type, and what does key remapping add?","a":"{ [K in keyof T]: ... } rebuilds a type key by key; as in the key position renames or drops keys, e.g. { [K in keyof T as `get${Capitalize<K & string>}`]: () => T[K] } to generate getters. id: 0a438d6f-3b64-4d99-9279-71e0ea1312ee","deck":"$5:props:children:1:props:cards:232:deck","index":5},{"id":"91faffd2-c202-4f62-bbdc-89c0d6787f38","q":"Which built-in utility types should be reflexive for you?","a":"Partial, Required, Readonly, Pick, Omit, Record, Exclude, Extract, NonNullable, ReturnType, Parameters, Awaited. Most are a mapped or conditional type you could write yourself in one line. id: 674406a5-ba7e-4f01-a52f-872bdefd0aad","deck":"$5:props:children:1:props:cards:232:deck","index":6},{"id":"5376378c-ca18-4c12-ae2a-4d005abd649e","q":"interface vs type alias - what actually differs?","a":"Interfaces support declaration merging and are used for augmenting other modules' types; type aliases can express unions, tuples, conditionals and mapped types. Use interface for object contracts, type for anything computed. id: d1662558-132b-47f2-936b-d997d36c7929","deck":"$5:props:children:1:props:cards:232:deck","index":7},{"id":"b1a778f5-80e2-466e-8d7d-15f58398736b","q":"What is structural typing, and where does it bite?","a":"Compatibility is by shape, not by name, so any object with the right members fits. The exception is excess property checking on fresh object literals, which is why an inline literal errors but the same value assigned via a variable does not. id: cefb6c2b-3491-4c44-aaaf-532f235bac87","deck":"$5:props:children:1:props:cards:232:deck","index":8},{"id":"b46ca36a-a004-43bf-95c8-38e072f235bd","q":"How do you get nominal typing in a structural system?","a":"Brand the type: type UserId = string & { readonly __brand: 'UserId' }. A plain string no longer assigns, so you cannot pass an OrderId where a UserId belongs - useful for ids, currency and unvalidated input. id: 87669230-5bc8-49b7-9816-767f460a3f4c","deck":"$5:props:children:1:props:cards:232:deck","index":9},{"id":"bce6e970-7f7b-493c-be4c-2fffdacfabd2","q":"keyof, typeof and T[K] - what does each give you?","a":"typeof lifts a value into its type, keyof gives the union of a type's keys, and T[K] is indexed access. Together: typeof config, keyof typeof config, and config[keyof typeof config] for the union of its values. id: 0f71b44b-074f-4b71-80af-dd80460fbb46","deck":"$5:props:children:1:props:cards:232:deck","index":10},{"id":"d9cd7567-3052-4a10-b0aa-5c76f226d872","q":"What does as const do?","a":"It makes an object or array deeply readonly and infers literal types instead of widened ones, so ['a','b'] as const becomes readonly ['a','b'] - the usual way to derive a union of literals from a value. id: 84378703-2c28-4994-ad81-6aca8a13a226","deck":"$5:props:children:1:props:cards:232:deck","index":11},{"id":"bb6582ab-17e7-4bb0-9f5f-8a6f0e3f2b71","q":"What is a const type parameter, and why does it matter?","a":"<const T> on a generic makes call-site arguments infer as literals without the caller writing as const, so a helper can return precise literal types from a plain inline array or object. id: 8c015200-4cfb-432c-9d7d-94315d7e40c7","deck":"$5:props:children:1:props:cards:232:deck","index":12},{"id":"5862e8c0-1920-4dcb-83cd-71ec048b2175","q":"Template literal types - give a real use.","a":"They build string types from other types: type Ev = `on${Capitalize<'click' | 'focus'>}` gives 'onClick' | 'onFocus'. Common for event names, route paths and CSS-in-TS keys. id: c514b9eb-ce9f-46a6-81a9-2cbb2f1527e0","deck":"$5:props:children:1:props:cards:232:deck","index":13},{"id":"563d4b6a-ed41-4567-8cca-0da5d854c6b2","q":"Why can index signatures lie, and what fixes it?","a":"Record<string, T> claims every key exists, so obj['missing'] types as T but is at runtime undefined. --noUncheckedIndexedAccess adds | undefined to indexed reads and forces you to check. id: 2b610f9f-f8ca-4723-aa33-9915ebb459ed","deck":"$5:props:children:1:props:cards:232:deck","index":14},{"id":"a096684d-2a65-4ab6-9130-f6f5fe11e8da","q":"When are function overloads the right tool?","a":"When the return type depends on the argument shape in a way a union cannot express. Otherwise prefer a union parameter or a generic - overloads are unchecked against each other and easy to get wrong. id: 76539078-1131-4e81-a6f5-9dbfd843bfb1","deck":"$5:props:children:1:props:cards:232:deck","index":15},{"id":"4bff6723-1afa-4329-be6d-850ad2d08741","q":"Why do people avoid enums, and what replaces them?","a":"Enums emit runtime code, break under Node's type-stripping and --erasableSyntaxOnly, and numeric enums accept any number. Use a const object plus typeof obj[keyof typeof obj], or a plain string union. id: c467dcdd-5d9c-4b6e-954a-944ac94d309f","deck":"$5:props:children:1:props:cards:232:deck","index":16},{"id":"7a6f4b7e-5b9c-4183-9f3e-a4fc29ea576c","q":"What is strictFunctionTypes actually protecting you from?","a":"It checks function parameters contravariantly, so a handler taking a narrower parameter cannot be assigned where a wider one is expected. Method-shorthand parameters stay bivariant, which is why the same bug slips through on interfaces declared with method syntax. id: 1a508d35-3d3e-4b6b-b38a-db9fc4ee6c05","deck":"$5:props:children:1:props:cards:232:deck","index":17},{"id":"fb5bcc49-0075-4b33-ae02-052c88cd8a71","q":"Why import type, and what does isolatedModules demand?","a":"import type marks an import as erasable so bundlers and single-file transpilers do not keep a runtime import. isolatedModules requires every file to be transpilable alone, which is what Next.js, esbuild and SWC do. id: b10e2203-0fb7-4df1-8a31-a3fa3352d081","deck":"$5:props:children:1:props:cards:232:deck","index":18},{"id":"dffcbfa0-67b7-4e1b-a803-51cd7c265334","q":"What is declaration merging / module augmentation for?","a":"declare module '...' reopens another package's types to add your own - extending Express's Request, next-auth's Session, or adding keys to ProcessEnv - without forking the package. id: c864349b-ef3b-4ac2-b06b-623a5bcbc602","deck":"$5:props:children:1:props:cards:232:deck","index":19},{"id":"34e0b43c-342c-49c0-b15c-b9b6a5efeb0a","q":"How should types cross a network boundary?","a":"Do not assert. Parse at the edge with a runtime validator (zod, valibot) and infer the static type from the schema, so one definition guards both runtime and compile time. as Response is a lie the compiler cannot check. id: 2c196974-34da-4687-a702-427ff12c090e","deck":"$5:props:children:1:props:cards:232:deck","index":20},{"id":"12e47fce-f963-442d-b821-518c4826f598","q":"ts-ignore vs ts-expect-error - which and why?","a":"@ts-expect-error, because it errors when the line stops failing, so the suppression gets cleaned up. @ts-ignore stays silent forever and hides the next real bug on that line. id: 840f1859-3b08-4bbf-9516-77414d90ff04","deck":"$5:props:children:1:props:cards:232:deck","index":21},{"id":"e3ddb575-9df6-4c8e-8e7a-72a38572ba5e","q":"What is NoInfer<T> for?","a":"It blocks a type parameter from being inferred from that position, so one argument drives inference and another is only checked against it - e.g. a default value that must match the options array, not widen it. id: 1caa3471-733e-413e-9a61-2d8265e4b2ef","deck":"$5:props:children:1:props:cards:232:deck","index":22},{"id":"3117a26d-42ae-49a5-b1c4-c30f7736faf7","q":"You inherit a large JS codebase. How do you get it to strict TS?","a":"Turn on allowJs and checkJs with strict off, rename leaf modules first, type the boundaries (API, config, shared models) before internals, then enable strict flags one at a time - strictNullChecks last and loudest. id: 0df5f104-fd37-4ffb-88f3-f2e41ae9c16e","deck":"$5:props:children:1:props:cards:232:deck","index":23},{"id":"67250a73-ccf8-49a9-a22b-7cf173076962","q":"How do you type a React component's props well?","a":"Declare an explicit props type and destructure; use React.ReactNode for renderable children and ComponentProps<'button'> to inherit native props. Avoid React.FC - it adds little and complicates generics. id: 7de8559c-2da5-4c68-ab61-8272d2576db3","deck":"$5:props:children:1:props:cards:232:deck","index":24},{"id":"9a7df371-04d5-4c11-920d-027598343e6c","q":"useState and useRef - where does inference fail?","a":"useState(null) infers null, so pass the generic: useState<User | null>(null). For DOM refs use useRef<HTMLInputElement>(null) which gives the readonly ref React assigns; useRef<number>(0) gives a mutable box. id: daed2ef5-f046-4618-b086-6c505f5d99ea","deck":"$5:props:children:1:props:cards:232:deck","index":25},{"id":"091e151a-1661-4981-a18b-03283c4aa4ca","q":"How do you write a generic React component?","a":"Type the props with a parameter and let inference flow from the props: function List<T>({ items, render }: { items: T[]; render: (item: T) => ReactNode }). The caller gets T inferred from items. id: 587d069c-f13d-4f8a-b455-8efe4f1debf9","deck":"$5:props:children:1:props:cards:232:deck","index":26},{"id":"5daaacaa-6f59-47ec-8ee7-2cd0e6f36d21","q":"Why is useReducer a showcase for discriminated unions?","a":"Actions are a union tagged by type, so the reducer's switch narrows the payload per case and a never default makes new actions a compile error - a state machine the compiler checks for you. id: d6c62020-f2e1-4e01-b32f-cc23c458e774","deck":"$5:props:children:1:props:cards:232:deck","index":27},{"id":"c97512c6-66f1-4d88-b387-8fc93daf1324","q":"How do you type event handlers without guessing?","a":"Take the type from the element: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement>. Better still, type the handler by the prop - ComponentProps<'input'>['onChange'] - and let the parameter infer. id: d6fc881a-4eb2-4fd8-a8d3-755e7b8fae4d","deck":"$5:props:children:1:props:cards:232:deck","index":28},{"id":"8803e489-4360-42c5-85a6-3573ca5e18ef","q":"What does the Server/Client boundary mean for types?","a":"Anything passed from a Server Component to a Client Component must be serializable, so the type system will let you pass a function or Date shape that fails at runtime. Keep the boundary props to plain data. id: 08393373-a5c4-4ff0-8847-8ccfdd974d57","deck":"$5:props:children:1:props:cards:232:deck","index":29},{"id":"54632168-80fd-43a2-a7fd-486c51685d28","q":"How do you get end-to-end type safety from route to component?","a":"Define the model once, derive everything else: infer the response type from the schema or handler, export it, and have the client import that type instead of redeclaring it. Duplicate interfaces are how drift starts. id: e074cdb9-3b1f-4aea-91d6-e3b1b2a0b20a","deck":"$5:props:children:1:props:cards:232:deck","index":30},{"id":"5d66ce83-2d48-470b-b732-43f6abf615ef","q":"Which strict flags do you turn on beyond strict: true?","a":"noUncheckedIndexedAccess, exactOptionalPropertyTypes and noImplicitOverride are not in the strict bundle. Say why you would add them - and why exactOptionalPropertyTypes is the one that breaks the most existing code.","deck":"$5:props:children:1:props:cards:232:deck","index":31}],"slugs":["react19","cap","acid","solid","auth-and-sessions","idempotency-retries-and-webhooks","kafka","next-js-app-router","next-js-caching-and-data-fetching","react-in-practice","typescript-5-8-7-0","typescript-in-practice"],"mode":"study","title":"Everything"}]]}] </article></body></html>