React Advanced Features — Interview Questions & Answers

Ques 1: What are React Portals?

Ans: React Portals provide a way to render children into a DOM node outside the root component. They’re useful for modals, tooltips, and dropdowns.

ReactDOM.createPortal(
  <div>Portal Content</div>,
  document.getElementById('portal-root')
);

Ques 2: Why use Portals in React?

• Avoid CSS stacking/context issues.
• Render elements outside parent hierarchy.
• Great for popups, modals, and overlays.

Ques 3: What is React Suspense?

Ans: Suspense is used to wait for some code or data to load before rendering the component.

<Suspense fallback={<p>Loading...</p>}>
  <MyLazyComponent />
</Suspense>

Ques 4: What are React lazy-loaded components?

Ans: Components that are loaded only when needed using React.lazy().

const MyComponent = React.lazy(() => import('./MyComponent'));

Ques 5: What is the purpose of React Suspense?

Ans: To show a fallback UI (like a loader) while waiting for a lazy component or asynchronous data to load.

Ques 6: What is React Forward Ref?

Ans: It allows passing a ref through a component to one of its child DOM elements.

const Input = React.forwardRef((props, ref) => (
  <input ref={ref} {...props} />
));

Ques 7: Why use Forward Refs?

• Access child DOM elements from a parent.
• Useful for focusing input fields or integrating third-party libraries.

Ques 8: What are Higher-Order Components (HOCs)?

Ans: A function that takes a component and returns a new component with additional functionality.

const withLogger = (Component) => (props) => {
  console.log('Props:', props);
  return <Component {...props} />;
};

Ques 9: Why use Higher-Order Components?

• Reuse logic across components.
• Handle cross-cutting concerns like logging, authorization, etc.

Ques 10: What are the drawbacks of HOCs?

• Props collisions.
• Harder debugging (nested wrappers).
• Can affect component hierarchy readability.

Ques 11: What are Render Props in React?

Ans: A technique for sharing logic between components using a prop whose value is a function.

<MouseTracker render={(mouse) => (
  <p>The mouse position is {mouse.x}, {mouse.y}</p>
)} />

Ques 12: Difference between HOC and Render Props?

Feature	HOC	Render Props
Logic sharing	Uses wrapper function	Uses function as a prop
Composition style	Wrapper pattern	Inline render function
Readability	May cause wrapper hell	More readable but verbose

Ques 13: What is React Router?

Ans: React Router is a library for handling navigation and routing in React applications.

import { BrowserRouter, Route, Routes } from "react-router-dom";

Ques 14: What are the main components of React Router?

• <BrowserRouter> – Wraps your app and enables routing.
• <Routes> – Groups all routes.
• <Route> – Defines individual routes.
• <Link> / <NavLink> – Navigation links.
• useNavigate() – For programmatic navigation.

Ques 15: How do you create a simple route in React Router?

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

Ques 16: How can you navigate programmatically in React Router?

const navigate = useNavigate();
navigate("/home");

Ques 17: What are route parameters in React Router?

Ans: Dynamic segments in routes used to pass data via the URL.

<Route path="/user/:id" element={<User />} />

Access using:

const { id } = useParams();

Ques 18: What is React Transition Group?

Ans: A library for adding animations and transitions to React components when they enter or leave the DOM.

<CSSTransition in={show} timeout={300} classNames="fade">
  <div>Fades in and out</div>
</CSSTransition>

Ques 19: What is the difference between React.lazy and React.Suspense?

• React.lazy() dynamically loads a component.
• React.Suspense shows a fallback UI while loading.

Ques 20: What is Code Splitting in React?

Ans: Breaking the app into smaller bundles that can be loaded on demand for faster performance.

Implemented using React.lazy() and dynamic imports.

Ques 21: What is an Error Boundary in React?

Ans: A class component that catches JavaScript errors in child components and displays a fallback UI.

componentDidCatch(error, info) {
  this.setState({ hasError: true });
}

Ques 22: When should you use Error Boundaries?

• Catch runtime errors in rendering.
• Prevent the app from crashing entirely.

Ques 23: What are Fragments in React?

Ans: A way to group multiple elements without adding extra DOM nodes.

<>
  <h1>Hello</h1>
  <p>World</p>
</>

Ques 24: What is React’s StrictMode used for?

Ans: Helps identify potential issues by running extra checks and warnings during development.

<React.StrictMode>
  <App />
</React.StrictMode>

Ques 25: What are the advantages of React Advanced Features?

• Better code organization.
• Improved performance.
• Cleaner logic sharing.
• Enhanced UI/UX via transitions and modals.