1. What is React?

React is a JavaScript library for building user interfaces. It uses a component-based architecture
and updates the DOM efficiently using a virtual DOM. It’s maintained by Meta.

2. What is JSX?

JSX (JavaScript XML) lets you write HTML-like syntax inside JavaScript code. It improves
readability and is compiled into standard JavaScript by tools like Babel.

3. What is the Virtual DOM?

The Virtual DOM is a lightweight copy of the real DOM. React uses it to identify and update only
the parts of the DOM that have changed, improving performance.

4. Functional vs Class Components

Functional components are simpler and use Hooks for state and lifecycle. Class components
use methods like render and componentDidMount. Functional components are now
preferred.

5. What are Hooks?

Hooks are functions like useState, useEffect, and useRef that allow functional components
to manage state and lifecycle events without using classes.

6. Explain useState and useEffect

useState is used to manage local component state. useEffect runs side effects like API
calls or subscriptions after rendering, replacing lifecycle methods.

7. Controlled vs Uncontrolled Components

Controlled components use React state to manage input values. Uncontrolled components use
the DOM directly, often through ref. Controlled is more predictable.

8. Why are keys important in lists?

Keys help React track which items have changed, added, or removed in lists. They improve
rendering performance and should be unique and stable.

9. What is prop drilling & how to avoid it?

Prop drilling is passing props through multiple nested components. It can be avoided using the
Context API or global state managers like Redux.

10. What is Context API?

The Context API allows global data like theme or user info to be shared across components
without manually passing props at every level.

11. Explain reconciliation

Reconciliation is React’s process of comparing the previous and new Virtual DOM and updating
only the changed parts in the actual DOM.

12. What is React Fiber?

Fiber is React’s rendering engine that allows incremental rendering. It improves responsiveness
by breaking rendering work into small units.

13. How to handle side effects?

Use useEffect for side effects like API calls, timers, and subscriptions. Clean up effects using
a return function to prevent memory leaks.
14. What are error boundaries?

Error boundaries catch runtime errors in child components and display a fallback UI. They are
implemented using class components with componentDidCatch.

15. What are Fragments?

Fragments let you group multiple elements without adding extra nodes to the DOM. Use <></>
or <React.Fragment> to use them.

16. What are Higher-Order Components (HOCs)?

HOCs are functions that take a component and return a new component with added
functionality, like authentication checks or loading spinners.

17. What is code splitting?

Code splitting loads parts of the app only when needed, improving initial load time. It's done
using React.lazy and Suspense.

18. What is PropTypes or type checking?

PropTypes let you check the type of props passed to components at runtime. TypeScript
provides compile-time type checking for more robustness.

19. What are Portals?

Portals allow rendering children into a DOM node outside the parent hierarchy. They are useful
for modals, tooltips, and overlays.

20. How to optimize React performance?

Use React.memo, useMemo, and useCallback to prevent unnecessary re-renders. Use lazy
loading and avoid deep prop passing where possible.

21. What is Redux?

Redux is a state management tool for storing and managing global state. It uses actions and
reducers to update the state in a predictable way.

22. What are actions in Redux?

Actions are plain objects with a type field. They describe what happened and may include
additional data in a payload.

23. What are reducers in Redux?

Reducers are pure functions that take current state and an action, then return a new state
based on the action’s type.

24. What is a Redux store?

The store is the central place that holds the entire application state. It allows dispatching actions
and subscribing to state updates.

25. What is middleware in Redux?

Middleware intercepts actions before they reach reducers. It’s commonly used for async
operations using libraries like redux-thunk or redux-saga.

26. Redux vs Context API?

Redux is more powerful and suited for large apps. Context API is simpler and ideal for light
global state like theme or user preferences.
27. What is useReducer?

useReducer is a React hook used to manage complex state logic. It works similarly to Redux
reducers and is useful for multi-step updates.

28. What is memoization in React?

Memoization caches expensive function calls so that they're not recalculated on every render. It
helps improve performance.

29. What is useMemo?

useMemo returns a cached value. It recalculates only when dependencies change, useful for
performance optimization in heavy computations.

30. What is useCallback?

useCallback returns a memoized function. It helps prevent unnecessary re-renders in child

components receiving callback props.

31. What is lazy loading in React?

Lazy loading defers loading components until they're needed. It reduces initial bundle size and
is implemented using React.lazy.

32. What is Suspense in React?

Suspense lets you show a fallback UI (e.g., loader) while waiting for a lazy-loaded component to
load.

33. What is SSR (Server-Side Rendering)?

SSR renders React components on the server and sends HTML to the browser. It helps with
SEO and faster initial load.

34. What is hydration?

Hydration is attaching event listeners to server-rendered HTML to make it interactive. It's used
with SSR in frameworks like Next.js.

35. CSR vs SSR?

CSR renders content in the browser after JavaScript loads. SSR sends ready HTML from the
server, improving first load and SEO.

36. What is Next.js?

Next.js is a React framework that supports SSR, static site generation, routing, and performance
optimizations out of the box.

37. What are custom hooks?

Custom hooks are user-defined functions that use React’s hooks to share logic across
components in a reusable way.

38. What is useRef?

useRef holds a mutable value across renders. It's used to access DOM elements or store
non-state variables.

39. What is forwardRef?

forwardRef allows a parent to access a child component’s DOM node or ref. Useful for
components that wrap native elements.
40. useRef vs createRef?

useRef is used in functional components and persists across renders. createRef is used in
class components and creates a new ref on each render.

41. What is component lifecycle?

The lifecycle includes mounting, updating, and unmounting stages. React provides lifecycle
methods/hooks to manage behavior during each stage.

42. What is shouldComponentUpdate?

It’s a lifecycle method used to prevent unnecessary re-renders in class components by

comparing props and state manually.

43. What is PureComponent?

PureComponent is a class component that automatically implements

shouldComponentUpdate with shallow comparison for props and state.

44. What is StrictMode?

StrictMode is a wrapper that helps identify potential issues in a React app. It activates extra
checks during development only.

45. What are controlled components?

Controlled components are form inputs managed by React state. Their values are controlled
through the value prop and onChange handler.

46. What is debouncing?

Debouncing delays a function until a period of inactivity passes. It’s often used in search fields
to limit API calls.

47. What is throttling?

Throttling limits the execution of a function to once per specified time. It’s useful for scroll or
resize events.

48. What are React DevTools?

React DevTools is a browser extension for inspecting React components, viewing props and
state, and debugging re-renders.

49. What are synthetic events?

Synthetic events are React’s cross-browser wrappers around native DOM events, ensuring
consistent behavior across platforms.

50. What is a key in React and why is it important?

Keys help React identify which list items have changed. They improve performance and should
be unique and consistent.