yoklainterview sim
ProgressHistory

Frontend Rendering Reactivity Interview Questions

75 verified Frontend Rendering Reactivity interview questions — solve with answers, learn from explanations, test yourself in a real simulation.

Try the real simulation →

Sample questions

Rendering ReactivityDifficulty 1
In UI development, what is a component?
  • aA CSS stylesheet that controls the colors and spacing across every page of the app
  • bA global function that runs exactly once when the whole application starts up
  • cA reusable, self-contained piece of UI that can be combined to build a screen✓
  • dA database table that holds the rows a particular screen needs to display
Explanation:A component packages markup, and often its own logic and styling, into a named unit you can reuse and nest — the basic building block of a UI. Option (a) confuses a component with styling, and (d) confuses it with the data layer; a component may use data but is not where it is stored.
Rendering ReactivityDifficulty 1
What best describes a declarative approach to building UI?
  • aYou describe what the UI should look like for a given state, and the system updates the DOM to match✓
  • bYou write step-by-step DOM instructions that the browser records and automatically replays later
  • cYou style the UI entirely with CSS and deliberately avoid writing any JavaScript at all
  • dYou manually read and then update each individual DOM node yourself every time the underlying data changes
Explanation:Declarative UI means you express the target state ("here is what it should look like now") and let the framework or your render function reconcile the actual DOM. Option (d) is the imperative style — the opposite — where you hand-write each DOM mutation; (b) is not a real model of how declarative rendering works.
Rendering ReactivityDifficulty 2
You build a Toggle component. The text label shown on it is supplied by whichever screen uses the toggle, while whether it is currently on or off is tracked by the toggle itself. How are these two pieces of data classified?
  • aBoth the label and the on/off value are state, because the component is the thing that displays both of them
  • bThe label is state and the on/off value is a prop passed down from the parent
  • cBoth are props, because a component never owns any of the data it renders
  • dThe label is a prop passed in from outside, and the on/off value is the component's own state✓
Explanation:Props are inputs handed to a component from outside and owned by the parent; state is data the component creates and controls over its own lifetime. The label comes from the parent (a prop), while the on/off status is internal, so it is state. Option (c) is wrong because components very often own local state.
Rendering ReactivityDifficulty 2
A parent passes a list of items down to a child, and the child needs to remove one of them. In a one-way (unidirectional) data flow, how should the removal happen?
  • aThe child deletes the item straight from the array it received, since it already holds a reference to it
  • bThe child notifies the parent, and the parent updates the list, which then flows back down to the child✓
  • cThe child keeps its own private copy of the list and edits that, ignoring the parent's version entirely
  • dThe child reaches into the parent and reassigns the parent's list variable directly
Explanation:Unidirectional flow means data moves down through props and changes travel back up through events/callbacks; the owner of the data (the parent) is the only place that mutates it. Option (a) mutates data the child does not own and breaks the single source of truth, and (c) creates two diverging copies of the same list.
Rendering ReactivityDifficulty 1
Modern UI is often summarized by the idea 'UI is a function of state'. What does this mean?
  • aThe UI can only be written inside functions, never using classes or objects
  • bEvery function in the app must return a piece of the user interface
  • cThe application keeps exactly one function whose only responsibility is to fetch the state from the server
  • dFor a given state, the rendered UI is determined by that state — the same state produces the same UI✓
Explanation:The slogan means the view is derived from state: describe how state maps to output, and the same state always yields the same view. It is not a claim about avoiding classes (a) or about every function returning UI (b); those confuse the metaphor with a literal coding rule.
Rendering ReactivityDifficulty 2
let count = 0

function render() {
  screen.innerHTML = `<p>Count: ${count}</p>`
}

function increment() {
  count = count + 1
}

render() is called once at startup. You then call increment() several times, but the screen still shows Count: 0. Why?
  • acount is a local variable, so increment() ends up updating a different copy than the one render() reads
  • binnerHTML caches its first value and refuses to change after the initial assignment
  • cNothing re-runs render() after the data changes, so the displayed text is never regenerated✓
  • dTemplate strings are evaluated only once, so ${count} is frozen at its first value
Explanation:In plain imperative code, updating the data does nothing to the DOM on its own — you must call render() again to reflect the new value. This is exactly the gap reactivity closes: a reactive system re-runs rendering for you when the data it depends on changes. innerHTML (b) and template strings (d) are re-evaluated fine every time render() runs.

By specialization

Angular 450JavaScript 450React 450TypeScript 450Vue 450

By seniority

Frontend JuniorFrontend MidFrontend Senior

Other fields

BackendFullstackDevOps / CloudAI EngineerDatabaseMobileSecurityQA / Test AutomationData EngineerGame DevelopmentML Engineer

Test yourself against the 2925-question Frontend bank.

Start interview