FE Foundations

Question 1

Type Narrowing

Answer 1

Definition: The process of moving from a broad type (like string | number) to a more specific one. Key Concept: Evaluators check if the AI handles truthiness vs. actual types. Use Case: Using if (typeof value === ‘string’) allows the compiler to safely call .toUpperCase() inside that block.

Question 2

Type Inference

Answer 2

Definition: The TypeScript compiler’s ability to “guess” and assign a type based on the value provided without explicit annotations.Key Concept: Senior code avoids “redundant types.” Evaluator Tip: If an AI explicitly types a variable like const x: number = 5;, it’s a sign of junior-level “noise.” Inference should be trusted for simple assignments.

Question 3

Template Literal Types

Answer 3

Definition: Types that use string interpolation to create complex sets of strings.Use Case: type Color = ‘red’ | ‘blue’; type Shade = ‘light’ | ‘dark’; type Palette = `${Shade{Color};results in a type that only allows'light-red', 'dark-blue', etc. Evaluator Tip: Great for identifying AI “hallucinations” in CSS-in-JS or API route naming patterns.

Question 4

Reconciliation (Diffing)

Answer 4

The process by which React updates the Browser DOM by comparing the new Virtual DOM tree with the old one.Key Concept: React uses a “Heuristic” approach (O(n)). Evaluator Tip: This is why Stable Keys are vital. Unstable keys force React to destroy and recreate nodes rather than reordering them, causing massive performance hits.

Question 5

Component Lifecycle

Answer 5

The sequence of Render (pure, no side effects), Pre-commit (reading DOM), and Commit (applying changes/running effects).Evaluator Tip: AI often puts heavy logic in the “Render” phase (body of the component), which is dangerous because Render must be idempotent (predictable and side-effect-free).

Question 6

useLayoutEffect

Answer 6

Similar to useEffect, but fires synchronously after all DOM mutations but before the browser paints.Use Case: Use this for measuring DOM nodes (e.g., tooltips, popups) to prevent “UI flickering.”Evaluator Tip: If an AI uses useEffect for tooltip positioning, the user will see a visible “jump.” Senior code uses useLayoutEffect.

Question 7

useTransition

Answer 7

A hook that allows you to mark state updates as “non-urgent” transitions.Use Case: Filtering a large list while a user types. The typing (urgent) stays responsive, while the list update (non-urgent) happens in the background.Evaluator Tip: This is a “Senior Tier” optimization for React 18+.

Question 8

Stale Closures in Hooks

Answer 8

When a function inside a hook (like useEffect) “remembers” values from a previous render because they weren’t listed in the dependency array.Evaluator Tip: This is the #1 mistake AI makes. Always check if a function inside an effect uses a variable that isn’t in the array.