React
34 questions | entry to principal | answers written to be said out loud, not read
entry
Why const, let, and not var?
I default to const because it prevents reassignment and makes intent clear. I use let when reassignment is required. I generally avoid var because it is function-scoped and its hoisting behavior can make code less predictable. let and const are block-scoped.
What is scope?
Scope determines where a variable can be accessed. JavaScript has global, function, and block scope. let and const respect block scope, which helps keep values limited to where they belong.
What is a closure?
A closure is when a function keeps access to variables from the scope where it was created, even after that outer scope has finished. Closures matter heavily in React because event handlers, effects, and Hooks capture values from renders.
What is hoisting?
JavaScript creates bindings for declarations before normal execution. Function declarations can be used before their declaration. var is hoisted and initialized to undefined. let and const exist before initialization too, but accessing them early throws because of the temporal dead zone.
What does the spread operator do?
Spread expands values from an array or object. In React I commonly use it to make shallow copies for immutable updates, such as setUser({ ...user, name: 'Mike' }) or setUsers([...users, newUser]).
What is destructuring?
Destructuring extracts values from arrays or objects into variables. React uses it constantly for props and Hooks, such as const [count, setCount] = useState(0) or const { name } = user.
What is a React component?
I think of a function component as a function of props and state that describes UI. Components should stay predictable during rendering and can be composed into larger components and applications.
Props vs state?
Props are read-only inputs supplied by a parent. State is data owned by a component that can change over time. I keep state local when possible and lift it when multiple components need to coordinate around it.
What is a controlled input?
A controlled input gets its displayed value from React state and reports changes through an event handler. This makes validation, formatting, conditional UI, and submission behavior straightforward to coordinate.
What is a side effect?
A side effect interacts with something outside the pure calculation of UI, such as a network request, subscription, timer, DOM API, analytics call, or storage write. Side effects are necessary, but I keep them controlled and separate from rendering.
junior
Explain map, filter, find, and reduce.
map transforms every item and returns a new array. filter returns a new array containing matching items. find returns the first matching item or undefined. reduce accumulates a collection into one result such as a number, object, grouped structure, or another array.
Why is immutability important?
I avoid changing existing state in place. Instead I create a new object or array. That preserves previous state snapshots, makes changes predictable, and gives React clean reference changes it can reason about.
Explain Promises and async/await.
A Promise represents an asynchronous result that may eventually resolve or reject. async/await is syntax built on Promises that makes asynchronous flows easier to read. I handle failures explicitly and decide whether work should run sequentially or concurrently.
What is an ES module?
A module is a JavaScript or TypeScript file with explicit imports and exports. Static imports let tooling understand dependencies ahead of execution, enabling bundling and tree-shaking. Dynamic import() is used when code should be loaded lazily.
What happens when state changes?
Calling a state setter schedules a render. React calls the component again to calculate the next UI, reconciles that result with the previous tree, and commits the necessary changes. A render does not mean the entire DOM is rewritten.
Why shouldn't you mutate React state?
React treats state as snapshots. Mutating an existing object or array destroys that clean snapshot model and can preserve the same reference. I create a new value and pass it to the setter so updates stay predictable.
What is useState?
useState adds state to a function component. It returns the current state and a setter. When the next value depends on previous state, I use the functional form, such as setCount(c => c + 1), to avoid stale-state problems.
What is useEffect?
useEffect is for synchronizing React with systems outside rendering, such as subscriptions, browser APIs, timers, or external resources. I avoid effects for values I can derive during render, declare dependencies correctly, and clean up resources when necessary.
What is useRef?
useRef stores a mutable value across renders without causing a render when current changes. I use it for DOM elements and for persistent values that are not part of what the UI displays.
Why do React lists need keys?
Keys give sibling elements stable identities during reconciliation. I prefer stable IDs from the data. I avoid array indexes when items can be inserted, deleted, sorted, or reordered because identity can shift.
What is Context?
Context lets a value be available to descendants without manually passing it through every intermediate component. I use it for genuinely shared concerns, but I do not automatically treat Context as a replacement for all state management.
What is a custom Hook?
A custom Hook extracts reusable stateful behavior into a function whose name starts with use. Components can reuse the logic while each call still owns its own Hook state.
senior
Explain the JavaScript event loop.
JavaScript executes synchronous work on the call stack. Asynchronous operations complete outside that stack and schedule callbacks. Promise reactions use the microtask queue, which is processed before the next task such as a timer callback.
useMemo vs useCallback vs React.memo?
useMemo memoizes a calculated value. useCallback preserves a function reference. React.memo can skip a component render when its props are unchanged. I use all three selectively when identity or expensive work is actually causing a performance problem, not by default.
Client state vs server state?
Client state describes local UI behavior, such as an open modal or selected tab. Server state comes from remote systems and introduces caching, freshness, retries, invalidation, deduplication, and synchronization. I treat those as different problems.
How do you approach React performance?
I measure first. I look for expensive calculations, unnecessary renders, unstable props, oversized component boundaries, excessive network work, and large bundles. Then I optimize the actual bottleneck with techniques such as memoization, code splitting, virtualization, caching, or better state placement.
What is reconciliation?
Reconciliation is React determining how the newly rendered element tree differs from the previous one. Component types and keys help React preserve identity. React then commits the required host changes, such as DOM updates.
How do you handle React errors?
I distinguish expected application errors from unexpected rendering failures. I handle API failures close to the data flow, expose useful loading and error states, and use error boundaries where a rendering failure should be isolated instead of taking down a larger UI.
Explain React in 30 seconds.
I think of React components as functions of props and state that describe UI. State updates schedule renders, React calculates the next tree, reconciles it with the previous tree, and commits the necessary changes. I keep rendering pure, update state immutably, use stable keys, keep effects for external synchronization, and place state according to ownership.
staff
Where should state live?
I keep state as close as possible to the components that consume it. If siblings need the same state, I lift it to their closest common parent. For wider concerns I evaluate Context, URL state, a store, or a server-state library based on ownership and lifecycle.
What are SSR, CSR, and hydration?
CSR renders the application primarily in the browser. SSR generates HTML on the server so useful content can arrive earlier. Hydration is React attaching client behavior to server-rendered HTML. I choose rendering strategies based on UX, SEO, caching, personalization, and operational tradeoffs.
How do you test React applications?
I focus on observable user behavior rather than implementation details. Unit tests cover isolated logic, component tests cover meaningful interactions and states, and E2E tests protect critical user journeys. I prioritize high-value coverage over chasing a percentage.
principal
What React security concerns do you think about?
I never trust the browser as a security boundary. Authorization is enforced server-side. On the frontend I think about XSS, unsafe HTML, token handling, dependency risk, CSP, untrusted URLs and inputs, and making sure secrets never ship in client bundles.
What makes someone senior in React?
For me, senior React work is less about knowing every Hook and more about making good boundaries and tradeoffs: state ownership, data flow, rendering strategy, performance, accessibility, testing, security, maintainability, and knowing when not to add complexity.
Fast recall
map = transform | filter = keep | find = first match | reduce = accumulate | props = parent input | state = changing component data | ref = persistent value without render | render = calculate UI | reconcile = determine changes | commit = apply changes | effect = external synchronization | immutable update = create new value