Meta

Closures

A closure is a function that retains access to variables from its outer (enclosing) scope even after the outer function has returned, enabled by JavaScript's lexical scoping.

Event Loop & Runtime

JavaScript is single-threaded with one call stack — the event loop enables async behavior by processing microtasks (promises) before macrotasks (setTimeout) between each cycle of the call stack.

Currying & Partial Application

Currying transforms a function with multiple arguments into a sequence of single-argument functions, while partial application fixes some arguments upfront and returns a function expecting the rest.

Hooks

Hooks let functional components manage state (useState), run side effects (useEffect), access refs (useRef), and extract reusable logic into custom hooks — all following strict rules about call order.

Context API

Context provides data to any descendant component without passing props through every level — it solves prop drilling but is not state management, and context value changes re-render all consumers.

State

State is internal, mutable data owned by a component — updates must be immutable (creating new objects, not mutating existing ones) and are batched asynchronously in React 18+ for performance.

Performance Optimization

React.memo skips re-renders when props haven't changed, useMemo caches computed values, and useCallback caches function references — but these are targeted optimizations, not defaults for every component.

React Internals

React's reconciliation algorithm diffs virtual DOM trees in O(n) using two heuristics — different element types tear down the subtree, same types compare attributes — while the Fiber architecture makes this work interruptible so the browser stays responsive during large updates.

Concurrent React

Concurrent rendering lets React interrupt and prioritize work — Suspense provides declarative loading states, useTransition marks updates as non-urgent, and useDeferredValue defers expensive re-renders.

Advanced Patterns

React patterns evolved from mixins to HOCs to render props to hooks — compound components share implicit state for flexible APIs, while custom hooks have replaced most logic-sharing patterns.

TypeScript Fundamentals

TypeScript is a typed superset of JavaScript that compiles to plain JS — it catches type errors at compile time rather than runtime, enables intelligent IDE tooling (autocomplete, refactoring, go-to-definition), and has become the industry standard for production JavaScript applications.

React Performance Optimization

React performance optimization involves preventing unnecessary re-renders with memoization, virtualizing long lists, splitting context providers, and profiling with React DevTools to identify actual bottlenecks before optimizing.