Q1. What is React?
React is a JavaScript library for building user interfaces. It is component-based, declarative,
and uses a Virtual DOM to update only necessary parts of the UI.
Q2. What is JSX in React?
JSX stands for JavaScript XML. It allows us to write HTML-like syntax inside JavaScript. JSX is
transpiled into React.createElement calls.
Q3. What are props in React?
Props (short for properties) are inputs to components. They are read-only and passed from
parent to child components.
Q4. What is state in React?
State is local data managed inside a component. It is mutable and can be updated with
setState (class) or useState (functional).
Q5. What is the difference between props and state?
Props are external and immutable within a component, while state is internal and can be
updated within the component.
Q6. What is the Virtual DOM?
The Virtual DOM is an in-memory representation of the real DOM. React updates the Virtual
DOM first, then efficiently updates only changed elements in the real DOM.
Q7. What are functional components?
Functional components are JavaScript functions that return JSX. They can use Hooks to
manage state and side effects.
Q8. What are class components?
Class components are ES6 classes that extend React.Component and include lifecycle
methods like componentDidMount.
Q9. What is a React Fragment?
A React Fragment lets you group multiple elements without adding an extra DOM node.
Written as <> or .
Q10. What are React Hooks?
Hooks are functions that let you use React features like state and lifecycle methods in
functional components.
Q11. Explain useState hook.
useState allows functional components to manage state. Example: const [count, setCount] =
useState(0).
Q12. Explain useEffect hook.
useEffect lets you perform side effects like fetching data or subscribing to events in functional
components.
Q13. What is the dependency array in useEffect?
The dependency array determines when the effect runs. [] runs once, [var] runs when var
changes, omitting runs on every render.
Q14. What is useContext hook?
useContext allows functional components to access values from React Context without prop
drilling.
Q15. What is React Router?
React Router is a library for handling navigation in React applications without reloading the
page.
Q16. How do you define routes in React Router?
Using , , and components. Example: } />.
Q17. How do you pass URL parameters in React Router?
Define dynamic routes with :param and access them using the useParams hook.
Q18. What is conditional rendering in React?
Conditional rendering means rendering UI elements based on conditions using ternary
operators or logical &&.
Q19. How do you handle forms in React?
Use controlled components where form values are stored in state and updated via onChange
handlers.
Q20. What are controlled vs uncontrolled components?
Controlled components store values in state, while uncontrolled components rely on DOM
values accessed with refs.
Q21. How do you render lists in React?
Use the map() function to iterate over arrays and return JSX elements.
Q22. Why are keys important in lists?
Keys help React identify which items changed, added, or removed. They must be unique and
stable.
Q23. What are lifecycle methods in class components?
They are special methods like componentDidMount, componentDidUpdate, and
componentWillUnmount that manage component behavior at different stages.
Q24. What is componentDidMount used for?
Runs after a component is mounted. Commonly used for API calls or setting up subscriptions.
Q25. What is componentWillUnmount used for?
Runs just before a component is removed. Used to clean up resources like subscriptions or
timers.
Q26. What are Higher-Order Components (HOC)?
A higher-order component is a function that takes a component and returns a new enhanced
component.
Q27. What are controlled side effects in React?
Side effects like API calls or subscriptions are controlled using useEffect to ensure proper
cleanup.
Q28. What is prop drilling?
Prop drilling is passing data through many nested components. It can be avoided using
Context API.
Q29. What is Context API?
Context API allows you to share data across components without passing props manually at
every level.
Q30. What is Redux in React?
Redux is a state management library used with React for managing global state in large
applications.
Q31. What is lazy loading in React?
Lazy loading means loading components only when they are required using React.lazy and
Suspense.
Q32. What is memoization in React?
Memoization optimizes performance by caching results. React.memo is used to prevent
unnecessary re-renders.
Q33. What is the difference between useMemo and useCallback?
useMemo memoizes computed values, while useCallback memoizes functions to avoid
re-creation on re-renders.
Q34. What are synthetic events in React?
Synthetic events are React’s cross-browser wrapper around native events, providing a
consistent API.
Q35. What is reconciliation in React?
Reconciliation is React’s process of comparing Virtual DOM and real DOM to update only
changed parts.
Q36. What is the difference between controlled and uncontrolled inputs?
Controlled inputs use state to store values, uncontrolled inputs use refs to access values
directly.
Q37. What is server-side rendering (SSR) in React?
SSR renders React components on the server before sending them to the client, improving
performance and SEO.
Q38. What are React keys and why avoid using index?
Keys identify elements in lists. Index should be avoided as keys because order changes can
break UI updates.
Q39. What is an error boundary in React?
Error boundaries are React components that catch JavaScript errors in child components and
display fallback UI.
Q40. What are portals in React?
Portals allow rendering children into a DOM node outside the parent component hierarchy.
