1. What is React?
React is a JavaScript library for building user interfaces, especially single-page
applications. It allows developers to create reusable UI components.
2. What is JSX?
JSX (JavaScript XML) is a syntax extension that allows writing HTML in React. It
makes writing UI easier by combining HTML and JavaScript.
3. What are components in React?
Components are the building blocks of a React application. There are two types:
functional and class components.
4. What is the difference between functional and class components?
Functional components are simpler and use hooks.
Class components use this and lifecycle methods.
5. What are props in React?
Props are read-only attributes passed from a parent to a child component to
customize behavior or content.
6. Can props be changed inside a component?
No, props are immutable. You should never modify them inside a component.
7. What is defaultProps in React?
It sets default values for props in case they’re not provided.
8. How do you create a React app?
Use npx create-react-app my-app.
9. What is the purpose of keys in React?
Keys help React identify which items in a list have changed, are added, or removed.
10. Why should we not use array index as a key?
Because it can lead to unexpected behavior when items are reordered.
11. What is state in React?
State is a built-in object that stores property values that belong to a component
and can change over time.
12. How do you update the state in React?
Using setState() in class components or useState() in functional components.
13. Is state synchronous or asynchronous?
State updates are asynchronous.
14. What is lifting state up in React?
Moving state to the closest common ancestor to share data between components.
15. What is the difference between state and props?
Props are passed from parent to child (read-only).
State is managed within the component.
16. What is a controlled component?
A component that gets its input value from state and updates via onChange.
17. What is an uncontrolled component?
A component that manages its own state internally using refs.
18. What is the constructor used for in React?
To initialize state and bind event handlers in class components.
19. What are lifecycle methods in React?
Special methods invoked during different phases of a component's life.
20. Name common lifecycle methods.
componentDidMount()
componentDidUpdate()
componentWillUnmount()
21. What are hooks in React?
Hooks are functions that let you use state and lifecycle features in functional
components.
22. What is useState()?
A hook to declare and update state in a functional component.
23. What is useEffect()?
A hook for performing side effects like data fetching or DOM updates.
24. What is the difference between useEffect() and lifecycle methods?
useEffect() combines componentDidMount, componentDidUpdate, and
componentWillUnmount.
25. Can you use multiple useEffect() hooks in one component?
Yes, each useEffect() can handle a specific concern.
26. What is useRef() used for?
To access DOM elements or store mutable values that don’t trigger re-renders.
27. What is useContext()?
It allows you to use React context inside functional components.
28. What is useCallback()?
Returns a memoized version of the callback that only changes if dependencies
change.
29. What is useMemo()?
Memoizes expensive calculations so they’re only recalculated when needed.
30. What is useReducer()?
An alternative to useState() for managing complex state logic.
31. What is React Router?
A library for handling routing in React apps.
32. How do you perform navigation in React Router v6?
Using the useNavigate() hook.
33. What is Link in React Router?
Used instead of anchor tags for client-side navigation.
34. What are synthetic events in React?
Synthetic events are React's wrapper around browser events for cross-browser
compatibility.
35. How do you handle forms in React?
By controlling inputs via state and using onChange.
36. How do you prevent form default behavior?
Use event.preventDefault().
37. What is controlled vs uncontrolled input in forms?
Controlled uses state, uncontrolled uses refs.
38. How do you pass data from child to parent?
By passing a function from parent as a prop and calling it in the child.
39. How do you handle conditional rendering in React?
Using if, ternary, or && in JSX.
40. How to loop over elements in JSX?
Using .map().
41. What is the virtual DOM?
A lightweight copy of the real DOM used for efficient UI updates.
42. How does React update the DOM?
Using a diffing algorithm to compare virtual DOM and apply minimal changes.
43. What is reconciliation in React?
The process of comparing old and new virtual DOMs to update the UI efficiently.
44. What is context API?
Allows passing data through the component tree without props drilling.
45. What is prop drilling?
Passing props through many levels just to reach a deeply nested component.
46. What is error boundary?
A class component that catches errors in its child component tree.
47. What is code splitting in React?
Splitting code into smaller bundles for lazy loading using React.lazy() and
Suspense.
48. What is lazy loading?
Loading components only when they’re needed to improve performance.
49. How do you optimize performance in React?
Use React.memo,
useMemo,
useCallback,
Avoid unnecessary re-renders.
50. What is React.StrictMode?
A tool to highlight potential problems in an application during development.
