🟦 Top 15 React Interview Questions for 1–2 Years Experience
Preparing for a React interview with 1–2 years of experience? Here's a carefully curated list of 15 important React questions with clear, real-world answers. These are frequently asked in interviews at companies like TCS, Infosys, Cognizant, Capgemini, and product-based firms.
Q1. What is the Virtual DOM in React, and how does it improve performance?
Answer: The Virtual DOM is a lightweight, in-memory copy of the real DOM. When state/props change, React creates a new Virtual DOM tree, compares it with the old one (diffing), and only updates the parts of the real DOM that changed. This makes rendering much faster and improves performance in large applications.
Q2. What is JSX in React?
Answer: JSX stands for JavaScript XML. It allows us to write HTML elements in JavaScript and place them in the DOM without using createElement(). JSX improves code readability and is transpiled to React.createElement() calls.
Q3. What are components in React?
Answer: Components are reusable, independent building blocks of UI in React. They can be function-based (functional components) or class-based. They accept input (props) and return React elements that describe the UI.
Q4. What is the difference between state and props?
Props: Read-only data passed from parent to child.
State: Data maintained inside a component. Can be updated using useState or this.setState().
Q5. What is the useEffect hook?
Answer: useEffect is a React hook that lets you perform side effects like data fetching, subscriptions, or manual DOM manipulations. It runs after render and can be configured to run on specific state/prop changes.
Q6. What is the difference between controlled and uncontrolled components?
Controlled: React controls the form input via state.
Uncontrolled: DOM manages the input internally using refs.
Q7. What is lifting state up in React?
Answer: When two or more components need to share data, we move the shared state to their closest common ancestor. This approach is called "lifting state up" and ensures one source of truth.
Q8. What is React Fragment?
Answer: <React.Fragment> or <> lets you group multiple elements without adding extra nodes to the DOM.
Q9. What are keys in React?
Answer: Keys help React identify which items have changed, are added, or removed. They should be unique and stable identifiers (like IDs).
Q10. What is prop drilling?
Answer: Prop drilling is passing props through intermediate components to reach a deeply nested component. It can be avoided using Context API or state management libraries.
Q11. What is React Context API?
Answer: Context API is a way to share values like theme, user, language across components without passing props manually at every level.
Q12. What is useRef in React?
Answer: useRef creates a mutable ref object that can hold a value that doesn't trigger re-renders. Often used to access DOM elements or keep values between renders.
Q13. What is memoization in React?
Answer: Memoization is the optimization technique of caching expensive function results. React provides React.memo and useMemo to avoid unnecessary re-renders and improve performance.
Q14. What is reconciliation in React?
Answer: Reconciliation is the process of comparing the current Virtual DOM with the previous one and applying only the necessary changes to the real DOM.
Q15. What is the difference between React and React Native?
Answer: React is used for building web applications. React Native is used to build mobile applications using the same React concepts but with native components (like View, Text instead of div, span).
✅ Final Tips:
- Revise hooks and lifecycle patterns
- Focus on real-world component structure and data flow
- Be ready to write small component logic during interviews
📅 Last Updated: 15 May 2025
📎 #ReactInterview #ReactHooks #ReactQnA #1YearExperience
Comments
Post a Comment