List built in components in react.
- 1
<Fragment>, alternatively written as <>...</>, lets you group multiple JSX nodes together.
- 2
<Profiler> lets you measure the rendering performance of a React tree programmatically.
- 3
<Suspense> lets you display a fallback while the child components are loading.
- 4
<StrictMode> enables extra development-only checks that help you find bugs early.
- 5
<DeferredValue> While primarily used as a hook (useDeferredValue), the concept is built into the React engine to help you defer updating a non-urgent part of the UI. This is often used to keep an input field responsive while a heavy list filters in the background.
- 6
Metadata Components React 19 introduced built-in support for rendering document metadata tags anywhere in your component tree. React will automatically hoist these to the <head> of the HTML document.
Scenario Questions
0-2 years experience
- 1How would you use React.Fragment to return multiple sibling elements without adding extra DOM nodes?
- 2If you wrap a lazily loaded component with <Suspense>, what does the fallback prop do, and when does it appear?
- 3What happens if you pass a non‑standard HTML attribute to a built‑in element like <div>?
2-5 years experience
- 1You added a <Suspense> wrapper around a lazy component but the fallback never shows during a slow network request. What could be causing this and how would you fix it?
- 2When you enable <StrictMode> in development, certain lifecycle methods run twice. Explain why this happens and how you would adjust your code if needed.
- 3You need to measure render performance of a component. Which built‑in component would you use and what steps would you take to interpret its data?
5-8 years experience
- 1Your application uses many portals for modals and tooltips, and you start seeing memory leaks after navigating between routes. How would you investigate and resolve portal‑related leaks?
- 2The team wants to adopt React.StrictMode globally across a large codebase. What trade‑offs should you consider, and how would you ensure existing components continue to work correctly?
- 3You are collecting performance metrics with <Profiler> across multiple pages. How would you design a system to aggregate this data without impacting user experience?
8+ years experience
- 1Across several repositories, the organization wants to standardize the use of React.Fragment versus the <> shorthand. What guidelines would you establish and how would you enforce them at scale?
- 2Looking ahead to future React releases, how would you plan for potential deprecation or changes to built‑in components like SuspenseList in a legacy codebase?
- 3When migrating a large legacy application from class components to functional components, how would you decide which built‑in components to replace with newer APIs (e.g., using Suspense for data fetching) while minimizing risk?
Follow-up Questions
- What are the differences between <> shorthand and <Fragment>?
- When would you choose StrictMode over a custom debugging solution?
- How does Suspense interact with lazy‑loaded components?