1. What is prop drilling in React?
Prop drilling happens when you pass data through many nested components just to reach a deeply nested child. It can make code harder to maintain and understand.
Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
React · Question Set
React Advanced Concepts interview questions for placements and exams.
Questions
15
Included in this set
Subject
React
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for React.
Prop drilling happens when you pass data through many nested components just to reach a deeply nested child. It can make code harder to maintain and understand.
For complete preparation, combine this set with full subject-wise practice for React. You can also explore other subjects and sets from the links below.
Fragments let you group multiple elements without adding extra nodes to the DOM. They help keep your DOM clean and lightweight.
<> <h1>Title</h1> <p>Content</p> </>
Portals let you render components outside the main DOM hierarchy, useful for modals or tooltips that need to escape parent overflow or z-index issues.
ReactDOM.createPortal(<Modal />, document.getElementById('portal-root'));You can avoid prop drilling by using React Context API, Redux, Zustand, or custom hooks. These allow you to share data globally without passing props through multiple levels.
Context API provides a Provider and Consumer pattern that lets you store and access global data. Components can subscribe to context updates directly, avoiding prop drilling.
A Higher-Order Component is a function that takes a component and returns a new component with extra functionality. It’s often used for cross-cutting concerns like logging or authentication.
function withLogger(Wrapped) {
return function(props) {
console.log('Props:', props);
return <Wrapped {...props} />;
};
}Both reuse logic across components. HOCs wrap components and add behavior, while custom hooks share logic using functions. Hooks are simpler and avoid nesting issues caused by HOCs.
Render props is a technique for sharing logic using a prop whose value is a function. The function returns UI based on data passed to it.
<DataProvider render={(data) => <List items={data} />} />;Error boundaries are React components that catch JavaScript errors in child components during rendering. They prevent entire app crashes by displaying fallback UIs.
Errors can be caught using getDerivedStateFromError and componentDidCatch lifecycle methods. These handle render-time errors gracefully.
Reconciliation is React’s process of comparing Virtual DOM trees to decide which parts of the UI need to update. Only changed elements are re-rendered, improving performance.
React re-renders components when their state or props change. It uses a diffing algorithm to update only the affected parts of the DOM.
Pure Components and memoized functions skip re-renders when inputs don’t change. React.memo prevents re-rendering of functional components, useMemo caches computed values, and useCallback caches functions.
const MemoComp = React.memo(MyComponent); const memoValue = useMemo(() => computeExpensive(value), [value]); const memoFn = useCallback(() => handleClick(id), [id]);
React Context allows data to be shared globally across components without passing props manually at every level. It is useful for themes, authentication, and global state.
const ThemeContext = React.createContext('light');
<ThemeContext.Provider value='dark'><App/></ThemeContext.Provider>;An error boundary is implemented using class components that define static getDerivedStateFromError() and componentDidCatch(). These catch and handle render errors.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
componentDidCatch(error, info) { console.log(error, info); }
render() { return this.state.hasError ? <h3>Error!</h3> : this.props.children; }
}