Web UI Developer Interview Questions for AI Training Work

State that only one component and its direct children need stays local, since lifting it unnecessarily adds complexity without benefit. It moves to a global store when multiple, unrelated parts of the component tree need to read or update it, or when the state needs to survive a component unmounting, like user session data.

Common causes are passing new object or function references as props on every render, or a context provider re-rendering all consumers when only part of its value changed. I diagnose it with the React profiler to see which components re-render and why, rather than guessing, since intuition about re-render causes is often wrong.

I define a small set of design tokens for spacing, color, and typography that every component pulls from by default, so consistency comes for free. Customization is exposed through a constrained API, like specific style props or theme overrides, rather than allowing arbitrary style overrides that would undermine the consistency the token system is meant to provide.

I keep server state in a dedicated data-fetching layer that handles caching, revalidation, and loading states, separate from the state management used for purely client-side UI concerns like whether a modal is open. Treating server state as just another piece of local state usually leads to stale data bugs and duplicated fetching logic.

I watch for styles being recomputed on every render because they're defined inline inside the component function rather than memoized or extracted to module scope. For large applications, I also evaluate whether a zero-runtime or build-time CSS-in-JS approach is a better fit, since some libraries shift the cost from the browser to the build step, which scales better.

I'd profile the rendering work that happens after the data arrives, since a fast network response followed by a slow interaction usually points to expensive re-renders or layout thrashing rather than a network problem. Checking whether a large list is rendering without virtualization, or whether state updates are triggering a full tree re-render, is usually where the answer is.

I wouldn't do a big-bang rewrite, since that risks breaking working functionality for the sake of consistency alone. I'd establish one preferred pattern going forward for new work, and migrate existing areas opportunistically when they're already being touched for other reasons, so the codebase converges gradually instead of through a risky wholesale rewrite.

I'd focus on making the state flow legible, since that's usually where new developers get lost fastest, through clear naming, colocated logic, and reducing the number of places a given piece of state can be modified from. Documentation helps, but a codebase where the architecture is self-evident from reading it matters more than documentation that can drift out of sync.

An animation-heavy interaction looked great but was causing noticeable jank on lower-end devices, so I simplified the animation and reduced the number of simultaneously animated elements rather than dropping it entirely. The reduced version kept most of the visual intent while staying smooth across the device range we actually needed to support.

A design called for a layout that would have required significant custom logic to handle dynamic content lengths gracefully, so I brought it back to the designer with the specific constraint and a couple of alternative layouts that achieved the same intent within that constraint, rather than either silently implementing a compromised version or just building it as-is and dealing with edge cases later.