React Quiz
1. Which method is used to update the state of a React component?
Step-by-Step Explanation
setState() is the only correct method to update the state of a React component, triggering a re-render.
Answer: a) setState() ✅
2. What is the primary purpose of React's virtual DOM?
Step-by-Step Explanation
The virtual DOM allows React to efficiently update the actual DOM by batching changes and minimizing direct manipulations.
Answer: c) To improve performance by minimizing direct DOM manipulations. ✅
3. Which hook is used to perform side effects in functional components?
Step-by-Step Explanation
useEffect() is used to perform side effects like data fetching, subscriptions, or manually changing the DOM.
Answer: b) useEffect() ✅
4. What is the purpose of props in React?
Step-by-Step Explanation
Props are used to pass data from a parent component to a child component, making components reusable.
Answer: d) To pass data from parent to child components. ✅
5. Which tool is commonly used for bundling React applications?
Step-by-Step Explanation
Webpack is a popular module bundler used to bundle JavaScript, CSS, and other assets for React applications.
Answer: a) Webpack ✅
6. What is the purpose of key prop in React lists?
Step-by-Step Explanation
The key prop helps React identify which items have changed, added, or removed, improving performance in lists.
Answer: b) To uniquely identify list items, helping React efficiently update the DOM. ✅
7. Which hook is used to manage local state in functional components?
Step-by-Step Explanation
useState() is used to declare and manage state variables in functional components.
Answer: d) useState() ✅
8. What is JSX in React?
Step-by-Step Explanation
JSX is a syntax extension that allows you to write HTML-like code within JavaScript, making it easier to create React components.
Answer: c) A syntax extension that allows writing HTML-like code in JavaScript. ✅
9. Which lifecycle method is called after a component is inserted into the DOM?
Step-by-Step Explanation
componentDidMount() is called immediately after a component is mounted (inserted into the DOM).
Answer: a) componentDidMount() ✅
10. What is the purpose of React Router?
Step-by-Step Explanation
React Router is used to handle routing and navigation in single-page applications built with React.
Answer: d) To handle navigation in single-page applications. ✅
11. Which hook is used to memoize the result of a function?
Step-by-Step Explanation
useMemo() memoizes the result of a function, preventing unnecessary recalculations.
Answer: b) useMemo() ✅
12. What is the purpose of refs in React?
Step-by-Step Explanation
Refs provide a way to access DOM elements directly or React elements created in the render method.
Answer: c) To access DOM elements directly. ✅
13. Which lifecycle method is called before a component is removed from the DOM?
Step-by-Step Explanation
componentWillUnmount() is called immediately before a component is unmounted and destroyed.
Answer: a) componentWillUnmount() ✅
14. What is the purpose of React Context API?
Step-by-Step Explanation
The Context API provides a way to share values like state between components without having to pass props through every level of the component tree.
Answer: d) To share state between components without explicitly passing props through every level. ✅
15. Which hook is used to persist values between renders without causing re-renders when changed?
Step-by-Step Explanation
useRef() is used to persist values that don't trigger re-renders when changed, such as DOM element references.
Answer: b) useRef() ✅
16. What is the purpose of PureComponent in React?
Step-by-Step Explanation
PureComponent implements a shallow comparison of props and state in shouldComponentUpdate(), reducing unnecessary re-renders.
Answer: a) To implement shallow comparison of props and state, optimizing re-renders. ✅
17. Which tool is used for testing React components?
Step-by-Step Explanation
Jest is a popular JavaScript testing framework commonly used for testing React components.
Answer: c) Jest ✅
18. What is the purpose of Fragments in React?
Step-by-Step Explanation
Fragments allow you to group a list of children without adding extra nodes to the DOM.
Answer: b) To group multiple elements without adding an extra DOM node. ✅
19. Which hook is used to create a custom hook?
Step-by-Step Explanation
Any combination of React hooks can be used to create custom hooks.
Answer: a) Any hook can be used to create custom hooks. ✅
20. What is the purpose of error boundaries in React?
Step-by-Step Explanation
Error boundaries catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.
Answer: b) To catch JavaScript errors anywhere in their child component tree. ✅