React & JavaScript Interview Questions and Answers (2026)

JavaScript runs on a single thread with a call stack. When the stack is empty, the loop takes the next task from the queues: microtasks (promise callbacks, queueMicrotask) are drained completely before the next macrotask (timers, I/O, events). This is why a promise chain resolves before a setTimeout(fn, 0).

var is function-scoped and hoisted (initialised to undefined). let and const are block-scoped and in a "temporal dead zone" until declared. const prevents reassignment of the binding, not mutation of the object it points to.

A function together with the variables from the scope where it was created, which stay alive as long as the function does. It is how hooks like useState remember values between renders and how you make private state.

this is determined by how a function is called: the object before the dot for a method call, the new target for a constructor, the first argument of call/apply/bind, undefined (or the global object) for a plain call, and lexically inherited for arrow functions.

=== compares type and value with no coercion. == coerces operands to a common type first, which produces surprising results (0 == '', null == undefined). Use === unless you specifically want the == null check for null-or-undefined.

async/await is syntax over promises. await pauses the async function until the promise settles; a rejection becomes a thrown error you catch with try/catch. Promise.all fails fast on the first rejection; Promise.allSettled waits for all.

When a component's state or props change, React re-runs that component and its children, builds a new virtual tree, diffs it against the previous one, and applies the minimal set of DOM updates. React.memo, useMemo and useCallback let you skip work when inputs are unchanged.

Call hooks only at the top level (not in conditions or loops) and only from React functions. React tracks hook state by call order, so a conditional hook would desynchronise that order between renders.

Every value from the component scope that the effect reads. Missing a dependency gives you stale values; adding an unstable one (a new object/function every render) makes the effect run every time. The lint rule catches most mistakes.

useMemo caches a computed value. useCallback caches a function identity. React.memo skips re-rendering a component when its props are shallow-equal. They only help if the thing you are stabilising is actually causing expensive work or breaking a memoised child.

Controlled: the value lives in React state and the input reflects it (value + onChange). Uncontrolled: the DOM holds the value and you read it with a ref. Controlled is the default choice; uncontrolled is fine for simple forms or integrating non-React widgets.

key tells React which list items are the same across renders so it can move rather than recreate DOM. Using the index breaks when the list reorders or items are inserted/removed, causing wrong state to stick to the wrong row. Use a stable unique id.

When state is shared widely, updated often, or needs derived/async handling that Context re-renders make expensive. Server state (data from an API) belongs in a data-fetching library like TanStack Query; client state that is genuinely global can go in Redux Toolkit or Zustand.

Caching, deduplication, background refetching, stale-while-revalidate and request state (loading/error) for server data — things people used to hand-roll badly with useEffect + useState.

Passing a prop through many intermediate components that do not use it. Fixes: component composition (pass JSX as children), Context for truly cross-cutting values, or a state library for genuinely global state. Do not reach for Context for everything.

Use the Profiler in React DevTools to see which components render and how long they take. Common causes: rendering thousands of rows without virtualisation, creating new object/array props each render, missing key stability, or expensive work in render that should be memoised or moved out.

Usually an effect that subscribes (timer, event listener, websocket) without cleaning up in its return function, or setting state after unmount. StrictMode double-invokes effects in development specifically to surface missing cleanup.

It runs before the effect re-runs and on unmount. Use it to unsubscribe, clear timers, abort fetches and remove listeners — anything the effect set up.

Both describe object shapes. interface supports declaration merging and is idiomatic for public object contracts. type also does unions, intersections, mapped and conditional types. Pick one style and be consistent; type is more flexible.

any disables type checking entirely and spreads. unknown is the safe top type — you can hold anything but must narrow it (with a type guard) before using it. Prefer unknown for genuinely dynamic values.