Top 30 React Developer Interview Questions & Answers – 1 Year Experience (2025)

If you have around 1 year of experience in React development, interviewers expect you to have hands-on knowledge of React basics, JSX, component lifecycle, hooks, props, and state management. Here's a curated list of 30 important questions and ideal answers to help you ace your interview.

Core React Concepts

• 1. What is React?
  React is a JavaScript library used to build user interfaces, particularly for single-page applications. It enables fast rendering using a virtual DOM.
• 2. What are the main features of React?
  - Virtual DOM
  - JSX
  - Components
  - One-way data binding
  - Hooks
• 3. What is JSX?
  JSX is a syntax extension that allows mixing HTML with JavaScript. It gets transpiled to React.createElement calls.
• 4. What is the difference between a functional and class component?
  Functional components are stateless (but can use hooks), simpler, and preferred in modern React. Class components use lifecycle methods and `this`.
• 5. What are props in React?
  Props are read-only attributes used to pass data from a parent to a child component.

State & Lifecycle

• 6. What is state in React?
  State is an object that represents the dynamic parts of a component. It can change over time, triggering re-renders.
• 7. How do you manage state in a functional component?
  Using the useState() hook.
• 8. How do lifecycle methods work in class components?
  Common lifecycle methods include componentDidMount(), componentDidUpdate(), and componentWillUnmount().
• 9. What is the useEffect hook?
  useEffect lets you perform side effects (like data fetching or DOM updates) in functional components.
• 10. How do you update state based on previous state?
  setCount(prev => prev + 1)

Event Handling & Forms

• 11. How do you handle events in React?
  With camelCase syntax, e.g., onClick={() => doSomething()}
• 12. How do you prevent default behavior in events?
  Use event.preventDefault() in the handler function.
• 13. How do you handle form inputs?
  By setting value and onChange for controlled components using state.
• 14. What's the difference between controlled and uncontrolled components?
  Controlled components use state to manage form input, while uncontrolled components use refs.
• 15. How do you reset a form in React?
  By resetting state values to their initial state or using form reset methods.

Hooks

• 16. What are hooks in React?
  Hooks are functions that let you "hook into" React state and lifecycle features in functional components.
• 17. List some common React hooks.
  - useState
  - useEffect
  - useContext
  - useRef
  - useReducer
• 18. What does useRef do?
  It provides a way to access and persist DOM elements or values between renders.
• 19. What is useContext used for?
  It lets you consume values from a context without passing props through every component.
• 20. When would you use useReducer instead of useState?
  When managing more complex state transitions or multiple state variables.

Rendering & Performance

• 21. What is conditional rendering?
  Using if-else or ternary expressions to render different UI based on conditions.
• 22. What is the key prop in lists?
  Key is a unique identifier for each list item to help React identify changes.
• 23. How do you optimize performance in React?
  - Memoization with React.memo
  - useCallback/useMemo
  - Lazy loading components
• 24. What is React.Fragment?
  A wrapper component to return multiple elements without an extra DOM node.
• 25. How do you lazy load a component in React?
  Using React.lazy() with Suspense.

Miscellaneous & Conceptual

• 26. What is the Virtual DOM?
  A lightweight copy of the actual DOM used to improve performance by minimizing direct DOM manipulation.
• 27. What is lifting state up?
  Moving state to the nearest common ancestor to share data between sibling components.
• 28. What are higher-order components (HOC)?
  Functions that take a component and return a new component with additional props or behavior.
• 29. How do you pass data from child to parent?
  By passing a function from parent as a prop and calling it in the child.
• 30. How do you debug React apps?
  Using React Developer Tools, console logs, breakpoints, and useEffect logging.