1. What is React primarily used for?
- a) Building user interfaces
- b) Server-side rendering
- c) Database management
- d) Mobile app development only
Answer: A - React is a JavaScript library for building interactive UIs.
2. What is JSX?
- a) Syntax extension for JavaScript
- b) A templating language
- c) A state management tool
- d) A CSS preprocessor
Answer: A - JSX allows HTML-like syntax in JavaScript code.
3. Which hook replaces componentDidMount?
- a) useEffect with empty dependency array
- b) useState
- c) useContext
- d) useMemo
Answer: A -
useEffect(() => {}, []) runs once after mount.
4. What is the correct way to update state?
- a) setState(newState) (class) / setter function (hooks)
- b) this.state = newState
- c) state = newState
- d) updateState(newState)
Answer: A - Always use the designated state-update methods.
5. What does Virtual DOM do?
- a) Optimizes rendering performance
- b) Replaces the actual DOM
- c) Handles server requests
- d) Manages component styles
Answer: A - Virtual DOM minimizes direct DOM manipulation.
6. Which is used to pass data to child components?
- a) Props
- b) State
- c) Refs
- d) Context
Answer: A - Props are read-only data passed from parent to child.
7. What is the purpose of keys in React lists?
- a) Identify elements uniquely
- b) Apply styles
- c) Trigger events
- d) Define routes
Answer: A - Keys help React track list items during updates.
8. How do you handle events in React?
- a) onClick={handleClick}
- b) onclick="handleClick()"
- c) onClick="handleClick"
- d) (click)="handleClick"
Answer: A - React uses camelCase synthetic events.
9. What is the output of {"{true && 'Hello'}"}?
- a) "Hello"
- b) true
- c) Nothing
- d) Error
Answer: A - Logical AND renders the right operand if the left is truthy.
10. Which toolchain is recommended for new React projects?
- a) Create React App
- b) Webpack manually
- c) Babel standalone
- d) Parcel
Answer: A - CRA provides a pre-configured setup.
11. What is the purpose of useCallback?
- a) Memoize functions
- b) Manage state
- c) Handle side effects
- d) Create refs
Answer: A - useCallback prevents unnecessary function recreations.
12. What does useRef return?
- a) Mutable object with current property
- b) Immutable value
- c) State updater
- d) DOM element directly
Answer: A - useRef returns
{ current: value }.
13. How to conditionally render in JSX?
- a) {condition && <Component />}
- b) @if(condition)
- c) v-if="condition"
- d) *ngIf="condition"
Answer: A - Logical AND is a common conditional rendering pattern.
14. What is the correct PropTypes for a function?
- a) PropTypes.func
- b) PropTypes.function
- c) PropTypes.method
- d) PropTypes.callback
Answer: A - PropTypes.func validates function props.
15. Which lifecycle method is unsafe in React 16.3+?
- a) componentWillMount
- b) componentDidMount
- c) shouldComponentUpdate
- d) render
Answer: A - Legacy lifecycle methods are now unsafe.
16. What is React Router used for?
- a) Client-side routing
- b) State management
- c) API calls
- d) Form validation
Answer: A - React Router handles navigation in single-page apps.
17. What is the purpose of React.Fragment?
- a) Group elements without extra DOM nodes
- b) Improve performance
- c) Create portals
- d) Handle errors
Answer: A - Fragments avoid unnecessary div wrappers.
18. What is the output of {"{null || 'Default'}"}?
- a) "Default"
- b) null
- c) Error
- d) true
Answer: A - Logical OR returns the first truthy value.
19. What is the purpose of React.memo?
- a) Memoize functional components
- b) Manage global state
- c) Replace Redux
- d) Handle side effects
Answer: A - React.memo prevents unnecessary re-renders.
20. Which hook replaces componentDidUpdate?
- a) useEffect with dependencies
- b) useState
- c) useLayoutEffect
- d) useReducer
Answer: A -
useEffect(() => {}, [dep]) runs when dependencies change.