HTML, CSS, JavaScript and React interview questions

React compares the new element tree with the previous one by type and key.

Inserting or reordering makes React reuse the wrong component instance, so inputs keep the wrong text.

The effect closes over stale props or state from the render that created it.

UseMemo memoizes a computed value.

It skips a re-render when props are shallow-equal.

For low-frequency data like theme or auth user, Context is enough.

Context re-renders all consumers when the provider value changes, so putting a rapidly updating cart in a huge provider is costly.

Controlled means every keystroke goes through React state, which is required for instant validation and disabling submit.

Only call hooks at the top level of a React function, not in loops or conditions, so the order stays stable.

React relies on call order to match state cells.

The UI dispatches an action object.

A reducer is a function of previous state and action that returns the next state.

Classic Redux needed hand-written action types, switch statements, and spread copies.

I pick interface for object shapes that might be extended or merged in declaration files.

I define a Props interface and annotate the function parameter.

Any turns off checking, so I can access any property and hide bugs.

I model idle, loading, success with data, and error with a message as a discriminated union.

I preload or prioritize the hero image, set explicit dimensions, and avoid lazy-loading that above-the-fold asset.

Media without reserved space, webfonts swapping late, and inserting UI above existing content.

React.lazy plus dynamic import creates a separate chunk loaded when the component first renders.