Windowing is a technique that only renders a small subset of rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. This technique is recommended if there is a long list of data to be rendered.

Purpose: Long lists are by definition memory hogs. However, extracting part of a list and updating the necessary state variables might lead to even worse performance. This question allows us to understand how the candidate can leverage memoisation in conjunction with state updates on a long list to achieve both reactivity and performance boost.

We use it when we want to read, manipulate or observe the DOM. It also helps in preventing FOUC (Flash Of Unstyled Content).

Purpose: This question allows us to understand how the candidate can structure a side-effect so that there is no FOUC.

By wrapping multiple components using the same layout in one HOC and dynamically injecting specific components in that layout as children tied to a specific route, we create a layout-route.

Purpose: This question allows us to understand how competent the candidate is in code-structuring, applying HOCs and also in routing.

Although Context API alleviates the problem of prop-drilling, a context having structured data intended to be consumed by respective Components doesn’t prevent an entire component-tree re-render even if a partial update is applied and that update is not even related to or consumed by the component. A base component wrapped with a context provider will always re-render all components in that hierarchy irrespective of whether a component consumes part or entire context’s structured data.

Purpose: This question allows us to understand whether the candidate knows the pitfalls of Context API if used blindly as an alternative to global state management libraries.

Use ref on the component you want to access

Purpose: This question allows us to understand whether the candidate can leverage React-provided raw DOM access mechanism instead of Document APIs to increase performance and/or also prevent unnecessary create/delete operation for small actions like customisable downloads, setting viewport dimensions, etc.

Use the homepage attribute and set it to ‘.’

Purpose: This question allows us to understand whether the candidate knows how to deploy a new React app as an add-on to an existing App. This helps in gauging the capabilities of the candidate with reference to deploying in brownfield projects or for projects requiring migration yet keeping backwards compatibility.