Step-by-step articles on Frontend Interviews, part of our Interview Questions collection.
Showing 20 articles
Short answer: a closure is a function together with the variables from the scope where it was created. The function keeps access to those variables even after the outer function has returned. function makeCounter() { let count = 0; // captured by the inner fun...
Short answer: when state changes, React calls your components to produce a new tree of plain JavaScript objects describing the UI (often called the virtual DOM). It compares this tree with the previous one ( reconciliation ) and applies only the necessary chan...
Short answer: JavaScript runs on a single thread with a call stack. Async work (timers, network, I/O) is handled by the environment, which queues callbacks. The event loop takes the next callback when the stack is empty, always draining all microtasks before t...
Short answer: keys tell React which list item is which between renders. With stable keys, React can move, insert and remove items correctly, keeping each item's DOM node and state attached to the right data. {todos.map((todo) => ( <TodoItem key={todo.id} todo=...
Short answer: === (strict equality) compares value and type with no conversion. == (loose equality) converts the operands to a common type first, which leads to surprising results. 1 === '1' // false - different types 1 == '1' // true - '1' converted to 1 0 ==...
Short answer: useEffect runs after React has committed the render to the screen. With no dependency array it runs after every render; with [] only after mount; with [a, b] after mount and whenever a or b changed. The cleanup runs before the next effect and on...
Short answer: var is function-scoped and hoisted with the value undefined . let and const are block-scoped and can't be used before their declaration (the temporal dead zone). const can't be reassigned. Scope if (true) { var a = 1; let b = 2; } console.log(a);...
Short answer: a controlled input's value comes from React state and changes through onChange . An uncontrolled input keeps its own value in the DOM; you read it when needed (via a ref or FormData ). Controlled function Search() { const [query, setQuery] = useS...
Short answer: for regular functions, this is decided by how the function is called , not where it's defined. Arrow functions don't have their own this ; they use the this of the surrounding scope. The rules, in order new : new User() - this is the new object....
Short answer: useMemo caches a computed value , useCallback caches a function , and React.memo skips re-rendering a component when its props haven't changed. const visible = useMemo(() => products.filter((p) => p.inStock), [products]); // value const onSelect...
Short answer: a promise represents a value that will be available later; it's pending, then fulfilled or rejected. async / await is syntax on top of promises: an async function always returns a promise, and await pauses the function until a promise settles. Sa...
Short answer: a component re-renders when its own state changes, when its parent re-renders, when a context it reads changes, or when a hook it uses triggers an update. 1. Its state changes const [count, setCount] = useState(0); setCount(1); // re-render setCo...
Short answer: every JavaScript object has an internal link to another object, its prototype . When you read a property that the object doesn't have, JavaScript looks it up along this prototype chain until it finds it or reaches null . const animal = { speak()...
Short answer: props are inputs passed from a parent; a component can't change them. State is data a component owns and updates over time, which triggers a re-render. function Counter({ step }) { // step is a prop const [count, setCount] = useState(0); // count...
Short answer: a shallow copy duplicates only the top level; nested objects are still shared. A deep copy duplicates every level, so changing the copy never affects the original. const original = { name: 'Asha', address: { city: 'Pune' } }; const shallow = { .....
Short answer: Server Components render only on the server. They can be async , read databases and files directly, and their code is never sent to the browser. Client Components (marked 'use client' ) handle interactivity with state, effects and event handlers....
Task: write debounce(fn, wait) that returns a function which only calls fn after it stops being called for wait milliseconds. Typical use: search-as-you-type. Solution function debounce(fn, wait) { let timer; return function (...args) { clearTimeout(timer); //...
Short answer: prop drilling is passing props through several intermediate components that don't use them, just to reach a deeply nested child. Fix it with composition first, then Context , then a state library for complex shared state. The problem <App user={u...
Short answer: event delegation means attaching one listener to a parent element instead of one per child. It works because most DOM events bubble up from the element where they happened through its ancestors. <ul id="todo-list"> <li data-id="1">Buy milk <butto...
Short answer: useRef returns an object { current } that persists for the component's lifetime. Changing ref.current does not cause a re-render. It's used for DOM access and for mutable values that aren't part of what's displayed. 1. Accessing DOM elements func...
