Browser and UI

Question 1

A fitness tracker sorts a large workout log inside a click handler. The sort takes about 400 ms, and during that time the pressed button shows no visual change. What is the most likely reason?

Accepted Answer

The sort blocks the main thread, so the browser cannot paint until it ends.

Question 2

What does this code log? console.log('A'); setTimeout(() => console.log('B'), 0); Promise.resolve().then(() => console.log('C')); console.log('D');

Accepted Answer

A, D, C, B

Question 3

A seed catalog renders 2,000 rows, each with its own click listener. Rows added later by infinite scroll do not respond to clicks. What is the cleanest fix?

Accepted Answer

Attach one listener to the list container and check which row was clicked.

Question 4

In a ferry ticket app, a link's click handler calls event.stopPropagation(), yet the browser still navigates to the link's URL. Why?

Accepted Answer

stopPropagation stops bubbling but does not cancel the link's default action.

Question 5

A bakery order tracker animates a progress bar with setInterval every 16 ms. The motion looks uneven on several laptops. What is the better approach?

Accepted Answer

Use requestAnimationFrame so each update lines up with the browser's frames.

Question 6

A developer writes a function that calls Promise.resolve().then(itself) in a loop to process a queue. The page freezes and never repaints. Why?

Accepted Answer

Microtasks all run before rendering, so a chain that keeps queuing never yields.

Question 7

A tax estimate tool parses a 30 MB CSV file in the browser, and the whole page freezes for several seconds. What is the most effective change?

Accepted Answer

Move the parsing into a Web Worker and post the results back to the page.

Question 8

A trail map page has a touchmove listener that only sends analytics and never calls preventDefault. Scrolling on phones feels sticky. What helps most?

Accepted Answer

Mark the listener passive so scrolling need not wait for it.

Question 9

A county library search box sends a request on every keystroke. A teammate suggests debouncing the input. What does debouncing do?

Accepted Answer

It waits until typing pauses for a set time, then runs the handler once.

Question 10

A recipe site loops over 500 cards. For each card it reads offsetHeight, then sets style.height. The loop takes over a second. What is the main cause?

Accepted Answer

Each read after a write forces the browser to recompute layout inside the loop.

Question 11

A property listing page reads and writes element sizes in the same loop, causing layout thrashing. What is the most direct fix?

Accepted Answer

Read every size in one pass, then apply every write in a second pass.

Question 12

A hotel booking site slides a side drawer open by animating its CSS left property. The motion stutters on mid-range phones. What should change?

Accepted Answer

Animate transform instead, which the compositor can move without layout.

Question 13

After a style change, in what order does a browser typically do the work needed to update the screen?

Accepted Answer

Style, layout, paint, composite

Question 14

Changing which of these CSS properties usually triggers paint but not layout?

Accepted Answer

background-color

Question 15

A museum website puts a 400 KB stylesheet in the head. On slow connections, users stare at a blank screen for seconds. Why does the stylesheet cause this?

Accepted Answer

Browsers hold off rendering until stylesheets in the head load and parse.

Question 16

A dental clinic site loads a 200 KB script with a plain script tag in the head, and the page content appears late. What change lets the HTML render sooner while keeping script order?

Accepted Answer

Add the defer attribute so it downloads in parallel and runs after parsing.

Question 17

To make a news feed feel smoother, a developer adds will-change: transform to every element. Memory use on phones jumps and some tabs crash. Why?

Accepted Answer

Each promoted element can get its own layer, and layers use GPU memory.

Question 18

A co-op accounting ledger renders 20,000 rows at once. Scrolling is slow and the first render takes several seconds. What is the most effective approach?

Accepted Answer

Virtualize the list so only rows near the viewport exist in the DOM.

Question 19

What does the Largest Contentful Paint (LCP) metric measure?

Accepted Answer

When the largest image or text block in the viewport finishes rendering.

Question 20

On a cooking blog, the article text jumps down when an ad loads above it. Which Core Web Vital does this hurt, and what is the usual fix?

Accepted Answer

Cumulative Layout Shift; reserve the ad slot's space with set dimensions.

Question 21

In a grocery delivery app, tapping Add to cart runs 600 ms of work before the button updates. Which Core Web Vital will flag this, and what helps?

Accepted Answer

Interaction to Next Paint; split the work so the next frame paints sooner.

Question 22

A travel site's hero photo is the Largest Contentful Paint (LCP) element, and it has loading="lazy". LCP is poor. What should change first?

Accepted Answer

Remove lazy loading from the hero and give it a high fetch priority.

Question 23

A lab audit of a university admissions portal scores 98, but field data from real users shows poor Largest Contentful Paint. What best explains the gap?

Accepted Answer

The lab test uses one device and network, while real users vary widely.

Question 24

On a law firm blog, paragraphs reflow when the custom web font replaces the fallback font, causing layout shift. What reduces this most?

Accepted Answer

Tune the fallback font with metric overrides such as size-adjust.

Question 25

The marketing team says a bike-share signup page feels slow, but nobody knows why. What should you do first?

Accepted Answer

Look at field metrics to see which measure is poor and on which pages.

Question 26

A permit portal has slow Largest Contentful Paint. The network waterfall shows the HTML document itself takes 2.1 seconds to arrive. Where should you focus?

Accepted Answer

Server response time, such as slow queries or uncached HTML pages.

Question 27

In browser performance tools, what counts as a long task?

Accepted Answer

A main-thread task that runs for more than 50 milliseconds.

Question 28

A utility billing site embeds a third-party chat widget that adds 300 KB of script and blocks the main thread on load. What is the best change?

Accepted Answer

Load the widget after the page is usable, or when the user asks for help.

Question 29

A school district app bundles a large charting library into the main bundle, but charts appear only on the reports page. What is the best fix?

Accepted Answer

Load the chart library with a dynamic import on the reports route.

Question 30

A team imports one helper function from a utility library, yet the bundle still contains the whole library. What is a likely reason?

Accepted Answer

The library ships as CommonJS, which bundlers cannot tree-shake well.

Question 31

After a merge, a shop's main JavaScript bundle grows from 180 KB to 900 KB and the size check in CI fails. What do you do first?

Accepted Answer

Run a bundle analyzer to see which modules account for the growth.

Question 32

On a real estate site, phones download a 3,000-pixel-wide photo for a slot that displays at 400 pixels wide. What fixes this?

Accepted Answer

Provide srcset and sizes so the browser can pick a fitting file.

Question 33

Why set width and height attributes on img tags even when CSS makes the images responsive?

Accepted Answer

The browser can reserve the right aspect ratio before the image loads.

Question 34

A photography club gallery serves large JPEG files. Which change usually cuts the most bytes with little visible loss?

Accepted Answer

Serve AVIF or WebP versions with a JPEG fallback.

Question 35

On slow networks, a pottery studio site shows blank space where text should be for up to three seconds while its web font loads. What fixes this?

Accepted Answer

Set font-display: swap so fallback text shows while the font loads.

Question 36

A web font is referenced only from a stylesheet that is itself imported by another stylesheet, so the browser finds it late. What speeds up its arrival?

Accepted Answer

Preload the font with a link tag that includes the crossorigin attribute.

Question 37

A hiking blog's long article loads 40 images as soon as the page opens. What improves initial load the most without hurting the main image?

Accepted Answer

Add loading=lazy to the images that sit below the fold.

Question 38

After each release of a pet adoption site, some users keep running old JavaScript for days. What caching setup prevents this?

Accepted Answer

Use content-hashed file names with long caching, and keep HTML caching short.

Question 39

What best describes the difference between server state and client UI state in a frontend app?

Accepted Answer

Server state is owned remotely and can go stale; UI state lives only in the browser.

Question 40

A hardware store app keeps both items and filteredItems in component state. After edits, the two lists often disagree. What is the best fix?

Accepted Answer

Store items and the filter, and compute the filtered list during render.

Question 41

A React child wrapped in React.memo still re-renders every time its parent does. The parent passes style={{ margin: 8 }}. Why?

Accepted Answer

The parent makes a new object each render, so the shallow prop check fails.

Question 42

A teammate wraps nearly every calculation in a React component with useMemo. How do you respond in code review?

Accepted Answer

Measure first; memoize only costly work or props for memoized children.

Question 43

A volunteer roster renders editable rows using the array index as the key. Deleting the second row makes the third row's input show the deleted row's text. Why?

Accepted Answer

Index keys shift on delete, so React keeps state with the wrong row.

Question 44

A quiz app keeps the theme and a once-per-second countdown in the same React context. The whole app re-renders every second. What fixes this?

Accepted Answer

Give the countdown its own context, or keep it where it is shown.

Question 45

Two sibling components on a parking permit form both need the currently selected zone. Where should that state live?

Accepted Answer

In their closest common parent, passed down to both as props.

Question 46

Inside useEffect with an empty dependency array, a component starts setInterval that logs count. The log always shows 0, even after count changes. Why?

Accepted Answer

The callback captured count from the first render and never sees updates.

Question 47

A handler calls setCount(count + 1) three times in a row, but count goes up by only one. What explains this, and what fixes it?

Accepted Answer

Each call reads the same count from this render; use setCount(c => c + 1).

Question 48

A form component uses useEffect to set fullName whenever firstName or lastName changes. What is the better approach?

Accepted Answer

Compute fullName directly during render from the two names.

Question 49

What makes a text input controlled in React?

Accepted Answer

Its value comes from state and changes only through its change handler.

Question 50

A credit union profile form shows a warning that an input changed from uncontrolled to controlled. Its value prop comes from state that starts as undefined. What fixes it?

Accepted Answer

Initialize the state to an empty string instead of undefined.

Question 51

A shipping form shows red errors under every empty field as soon as the page loads. What is a better validation timing?

Accepted Answer

Validate a field when it loses focus or on submit, then live after that.

Question 52

A charity site relies on client-side checks to block negative donation amounts. Why is this not enough?

Accepted Answer

Anyone can skip the page and send a request straight to the API.

Question 53

On a ticket resale site, some users are charged twice when they double-click Pay. What combination best prevents duplicate charges?

Accepted Answer

Disable Pay while pending and send an idempotency key the server checks.

Question 54

On a garden center site, pressing Enter in the search field does nothing. The search control is a div with an onClick handler. What is the right fix?

Accepted Answer

Use a form element with a submit button and handle its submit event.

Question 55

An insurance claim form has 200 controlled fields whose state lives in the top-level component. Typing in any field lags. What helps most?

Accepted Answer

Keep each field's state local, or read uncontrolled inputs on submit.

Question 56

Password managers fail to offer to fill or save credentials on a gym membership signup form. What should you check first?

Accepted Answer

That inputs have proper autocomplete values like email and new-password.

Question 57

In a movie theater app, typing "ca" then "cat" quickly sometimes leaves results for "ca" on screen. What is the correct fix?

Accepted Answer

Cancel or ignore stale requests so only the latest response is applied.

Question 58

A React effect fetches profile data whenever the selected user changes. What should the effect's cleanup function do?

Accepted Answer

Abort the request in flight or mark it ignored so it cannot set state.

Question 59

A bike repair shop dashboard briefly shows "No orders found" before the real orders appear. What is the best fix?

Accepted Answer

Track loading on its own, and show the empty message only once loaded.

Question 60

A weather app shows a blank panel instead of an error message when the API returns HTTP 500. The code wraps fetch in try/catch. Why is no error shown?

Accepted Answer

fetch resolves on HTTP error codes, so the code must check response.ok.

Question 61

A page fetches the user, then a child component fetches orders once it renders, then a grandchild fetches shipping info. None of these depend on each other. What helps most?

Accepted Answer

Start the independent requests in parallel instead of one after another.

Question 62

A photo club site updates the like count right away when a user taps Like. The server request then fails. What should the UI do?

Accepted Answer

Roll back the count and tell the user the like did not save.

Question 63

What does a stale-while-revalidate strategy do in a client data cache?

Accepted Answer

Shows cached data at once, then refetches and swaps in fresh data.

Question 64

A classifieds board uses infinite scroll with page numbers and offsets. When new listings are posted, users see duplicate items while scrolling. Why?

Accepted Answer

New items shift the offsets so pages repeat items; use a cursor instead.