Most Common React.js Interview Questions for 2 YOE
If you have around two years of experience (2 YOE) in React.js, you occupy a unique position in the Indian job market. You are no longer a fresher who only needs to know the difference between state and props. However, you are not yet a senior architect expected to design system-level micro-frontends from scratch.
Interviewers targeting the 2 YOE mark in Indian IT companies (both product and service-based) are looking for practical, battle-tested knowledge. They want to know if you can write clean code, handle complex state, optimize rendering performance, and debug real-world issues.
In this guide, we break down the most frequently asked React.js interview questions for candidates with 2 years of experience, complete with conceptual explanations and code examples.
Section 1: Core React Concepts & Hooks
At 2 YOE, your knowledge of modern React (functional components and Hooks) must be rock solid.
1. Explain the React Component Lifecycle in the era of Hooks.
What the interviewer wants to know: Do you understand how useEffect maps to older class lifecycle methods?
Answer:
In functional components, the lifecycle is managed primarily through the useEffect hook, which combines the capabilities of componentDidMount, componentDidUpdate, and componentWillUnmount.
- Mounting: Achieved by passing an empty dependency array
[]touseEffect. It runs exactly once after the initial render. - Updating: Achieved by passing specific variables in the dependency array
[propA, stateB]. The effect runs whenever these dependencies change. - Unmounting: Achieved by returning a cleanup function from within the
useEffect. This cleanup function runs before the component is removed from the UI.
2. What is the difference between `useMemo` and `useCallback`? When would you use them?
What the interviewer wants to know: Do you know how to prevent unnecessary re-renders and computations?
Answer: Both hooks are used for performance optimization, but they memoize different things.
useMemomemoizes a calculated value. It executes a function and stores the result, only recalculating it if dependencies change. Used for expensive calculations (e.g., filtering a massive array).useCallbackmemoizes a function definition. It returns a memoized callback function. This is critical when passing functions as props to optimized child components (like those wrapped inReact.memo), to prevent the child from re-rendering just because the parent created a new function reference.
3. How does React Batching work? What changed in React 18?
What the interviewer wants to know: Are you up-to-date with recent React features?
Answer:
Batching is when React groups multiple state updates into a single re-render for better performance.
Before React 18, React only batched updates inside React event handlers (like onClick). Updates inside Promises, setTimeout, or native event handlers were not batched, causing multiple re-renders.
With React 18's Automatic Batching, all state updates—regardless of where they originate (promises, timeouts, etc.)—are batched automatically, leading to significant performance improvements.
Section 2: State Management
Handling state in complex applications is a daily task for a 2 YOE developer.
4. When would you choose Context API over Redux (or vice versa)?
What the interviewer wants to know: Can you make architectural decisions based on project requirements?
Answer:
- Context API is best for low-frequency updates and simple prop-drilling avoidance. Examples include theme switching (light/dark mode), user authentication state, or localization. It is built into React and requires zero extra dependencies.
- Redux (specifically Redux Toolkit) is best for high-frequency state updates, complex global state logic, and large-scale applications where state predictability and debugging (via Redux DevTools) are paramount. Redux is better suited when multiple unrelated components need to mutate and subscribe to a complex shared state.
5. What are common pitfalls of using the Context API?
Answer:
The biggest pitfall is unnecessary re-renders. When the value provided by a Context Provider changes, every component consuming that context will re-render, even if they only need a tiny slice of that data.
To mitigate this, you must logically split your contexts (e.g., ThemeContext and AuthContext instead of one massive AppContext) or use memoization techniques.
Section 3: Performance Optimization
Expect heavy questioning in this area. A 2 YOE developer should know how to make a React app fast.
6. What is `React.memo` and how does it work?
Answer:
React.memo is a Higher Order Component (HOC) used to wrap functional components. It prevents a component from re-rendering if its props have not changed. It does a shallow comparison of the previous and new props.
Follow-up caution: You shouldn't wrap every component in React.memo. The comparison itself has a performance cost. It is best used on heavy, complex components that receive the exact same props frequently.
7. How do you handle Code Splitting in React?
What the interviewer wants to know: Can you reduce the initial bundle size of the application?
Answer:
Code splitting allows you to split your bundle into smaller chunks which are loaded on demand. In React, this is done using React.lazy and Suspense.
For example, instead of loading all routes at the initial load, you can lazy-load them:
import React, { Suspense, lazy } from 'react';
const Dashboard = lazy(() => import('./Dashboard'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<Dashboard />
</Suspense>
);
}
Section 4: Advanced React Patterns
8. What is a Custom Hook? Can you give an example of one you've written?
What the interviewer wants to know: Do you know how to extract and reuse stateful logic?
Answer:
A custom hook is a JavaScript function whose name starts with "use" and that may call other Hooks. It allows you to extract component logic into reusable functions.
Example: A useFetch hook.
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => {
setData(data);
setLoading(false);
});
}, [url]);
return { data, loading };
}
9. How do you manage form state and validation in React?
Answer:
While you can manage form state manually using useState and writing custom validation logic, in enterprise applications, it is standard to use libraries like Formik or React Hook Form.
React Hook Form is particularly popular because it uses uncontrolled components and refs to minimize re-renders, resulting in better performance for complex forms. Validation is typically paired with a schema validator like Yup or Zod.
Section 5: Debugging and Testing
10. How do you identify memory leaks in a React application?
Answer: Memory leaks in React often occur when a component unmounts, but an asynchronous task (like a fetch request, setInterval, or event listener) is still running and tries to update the state of the unmounted component. How to fix:
- Always return a cleanup function in
useEffectto clear timeouts, intervals, or remove event listeners. - Use
AbortControllerto cancel pending API requests if the component unmounts before the request completes.
11. What tools do you use for testing React applications?
Answer: A standard testing stack includes:
- Jest: The test runner and assertion library.
- React Testing Library (RTL): For rendering components and simulating user interactions. RTL encourages testing the application from the user's perspective (e.g., finding elements by their label or text) rather than testing implementation details (like component state).
Tips for the Machine Coding Round
For a 2 YOE profile, Indian product companies (like Swiggy, Razorpay, or Flipkart) will almost certainly have a machine coding round. Common tasks include:
- Building a UI component: Like an accordion, a carousel, or a star-rating component.
- Building a mini-app: Like a Todo list with filtering, a search bar with debouncing and auto-suggest, or a paginated data table.
Key strategies for machine coding:
- Focus on making the app functional first. Do not waste the first 30 minutes on CSS.
- Keep your components modular. Don't write everything in
App.js. - If asked to implement search, always implement debouncing to limit API calls. It's a massive green flag for interviewers.
Conclusion
At 2 years of experience, interviewers are testing your transition from a beginner to an independent contributor. They want to see that you understand the "why" behind React's features, not just the "how." By mastering Hooks deeply, understanding the React rendering cycle, and knowing how to optimize performance, you will be well-prepared to ace your next React.js interview in the Indian tech industry.
