📘 React Basics (1–20)

1. What is React?
A) A database
B) A backend framework
C) A JavaScript library for building UIs
D) A CSS preprocessor
Answer: C
Note: React is a library developed by Facebook for building user interfaces.

2. Who developed React?

A) Google
B) Microsoft
C) Facebook
D) Twitter
Answer: C
Note: React was developed and is maintained by Facebook.

3. What is JSX?
A) A templating engine
B) An XML parser
C) JavaScript syntax extension
D) A CSS framework
Answer: C
Note: JSX allows writing HTML-like syntax inside JavaScript.

4. Which command creates a new React app?

A) npm install react
B) create-react-app myApp
C) react init
D) npx create-react-app myApp
Answer: D
Note: npx create-react-app myApp is the official way to bootstrap a React app.

5. What does a React component return?

A) JSX
B) HTML
C) CSS
D) DOM
Answer: A
Note: Components return JSX which is later compiled to JavaScript and rendered.
6. Which of the following is a functional component?
A) function Welcome() { return <h1>Hello</h1>; }
B) class Welcome extends React.Component {}
C) React.createComponent()
D) new React.Component()
Answer: A
Note: Functional components are simple functions that return JSX.

7. What is the purpose of useState hook?

A) To define routes
B) To send API requests
C) To manage state in functional components
D) To handle lifecycle events
Answer: C
Note: useState is a hook that enables state in functional components.

8. Which hook is used for side effects in React?

A) useEffect
B) useSideEffect
C) useLayoutEffect
D) useEvent
Answer: A
Note: useEffect runs after every render and is used for side effects like API calls.

9. What is the default port for running React app?

A) 8000
B) 3000
C) 5000
D) 8080
Answer: B
Note: React apps created using CRA run on port 3000 by default.

10. How do you pass data from parent to child in React?

A) State
B) Events
C) Props
D) Context
Answer: C
Note: Props are used to pass data from parent to child components.
11. What is the virtual DOM?
A) A copy of the real DOM
B) A minimized DOM
C) A virtual machine
D) A browser API
Answer: A
Note: Virtual DOM is a lightweight JavaScript object representing the real DOM.

12. Which attribute is used in React instead of class?

A) css
B) className
C) styleClass
D) class-style
Answer: B
Note: Since class is a reserved word in JS, React uses className.

13. What is a key prop used for in lists?

A) For accessibility
B) For performance optimization
C) To define styles
D) To make HTTP requests
Answer: B
Note: Keys help React identify which items changed, added, or removed.

14. Which method is used to render a React element?

A) React.mount()
B) ReactDOM.render()
C) render()
D) React.attach()
Answer: B
Note: ReactDOM.render() is used to render elements into the DOM.

15. What does CRA stand for?

A) Create React Application
B) Create React App
C) Custom React App
D) Component React App
Answer: B
Note: CRA stands for Create React App.
16. What does useEffect(() => {}, []) do?
A) Runs on every render
B) Runs only on mount
C) Runs on unmount only
D) Causes error
Answer: B
Note: An empty dependency array means the effect runs only once after the component
mounts.

17. React is primarily used for building:

A) Mobile apps
B) Server applications
C) User interfaces
D) Databases
Answer: C
Note: React is a UI library for building front-end interfaces.

18. Which company maintains React?

A) Google
B) Amazon
C) Facebook
D) Microsoft
Answer: C
Note: Facebook (now Meta) maintains React.

19. React uses a ____ to increase performance.

A) Real DOM
B) Shadow DOM
C) Virtual DOM
D) Local Storage
Answer: C
Note: Virtual DOM helps optimize rendering and performance.

20. Which lifecycle method is called after a component is rendered?

A) componentWillMount()
B) componentDidMount()
C) render()
D) shouldComponentUpdate()
Answer: B
Note: componentDidMount() runs once after the component is added to the DOM.
🔄 Props & State (21–40)

21. What are props in React?

A) Internal component variables
B) Methods in React
C) Properties passed to components
D) Lifecycle methods
Answer: C
Note: Props are inputs to components, passed from parent to child.

22. Can props be changed inside a child component?

A) Yes
B) No
C) Only in class components
D) Only with useState
Answer: B
Note: Props are read-only. They cannot be modified inside child components.

23. What does useState return?

A) A variable and a function
B) Only a value
C) Only a function
D) An object
Answer: A
Note: useState returns a pair – the state variable and a function to update it.

24. Where should state be stored in React?

A) In props
B) In the parent component
C) Inside the component that owns it
D) In the DOM
Answer: C
Note: State should be stored in the component that needs to manage it.

25. What is state in React?

A) External configuration
B) Global variables
C) Data maintained by the component
D) Component method
 Answer: C
Note: State is an object that holds dynamic data affecting rendering.

26. How can you lift state up in React?

A) Use Redux
B) Use useContext
C) Move state to the closest common ancestor
D) Use props
Answer: C
Note: Lifting state means moving it to a common parent component to share it between
children.

27. How do you initialize state in a functional component?

A) this.state = {}
B) useState({})
C) setState({})
D) React.useEffect()
Answer: B
Note: Functional components use useState to create and initialize state.

28. Props are:

A) Immutable
B) Mutable
C) Functions
D) Undefined
Answer: A
Note: Props cannot be changed once passed to a component.

29. How do you pass multiple values using props?

A) Using a JSON file
B) Using a single string
C) By passing an object
D) You can't
Answer: C
Note: You can group multiple values inside an object and pass it as a single prop.

30. Which hook is best for managing form field values?

A) useRef
B) useReducer
C) useMemo
D) useState
 Answer: D
Note: useState is commonly used to track form input values.

31. How can you update state in a class component?

A) Directly change it
B) this.setState()
C) useState()
D) React.setState()
Answer: B
Note: Class components update state using this.setState().

32. In which component type can we use hooks like useState?

A) Class
B) Both
C) Functional
D) Stateless
Answer: C
Note: Hooks are used only in functional components.

33. What happens when state changes?

A) Nothing
B) Component is destroyed
C) Component re-renders
D) Component is cached
Answer: C
Note: State changes cause re-rendering of the component to reflect new data.

34. What’s the correct way to pass a prop named title to a component?
A) <Component :title="text" />
B) <Component {title} />
C) <Component title="text" />
D) <Component title:text />
Answer: C
Note: Props are passed as HTML attributes in JSX.

35. Which is used to update a specific key in state?

A) this.updateState()
B) Object.assign()
C) Spread operator with setState()
D) state.update()
Answer: C
 Note: The spread operator (...) is used to immutably update specific keys in the state
object.

36. How do you use default props in a component?

A) defaultProps
B) default keyword
C) setDefault()
D) static defaultProps()
Answer: A
Note: Default props are set using the defaultProps property.

37. What happens if you forget to set a key prop in a list?

A) React will crash
B) React will use indexes
C) Nothing
D) List won't render
Answer: B
Note: React will fallback to using array indexes, which is not recommended for
performance.

38. Which of the following can hold both state and props?
A) Functional components
B) Only class components
C) JSX
D) Hooks
Answer: A
Note: With hooks, functional components can hold both state and props.

39. Can you pass functions as props?

A) No
B) Yes
C) Only in class components
D) Only globally
Answer: B
Note: Functions can be passed as props and invoked in child components.

40. Props drilling refers to:

A) Using multiple props
B) Passing props from parent to deeply nested child
C) Converting props to state
D) Avoiding props
 Answer: B
Note: Prop drilling happens when you pass data through multiple layers unnecessarily.

🧠 Hooks Deep Dive (41–60)

41. Which hook allows you to perform side effects in a component?

A) useRef
B) useState
C) useEffect
D) useMemo
Answer: C
Note: useEffect is used to perform side effects like fetching data, subscriptions, etc.

42. When is useEffect called with no dependency array?

A) Only on mount
B) On unmount
C) On every render
D) Never
Answer: C
Note: Without dependencies, useEffect runs after every render.

43. What does useRef return?

A) DOM node
B) Object with a .current property
C) Mutable string
D) State setter
Answer: B
Note: useRef() returns a mutable object with a .current property.

44. Which hook should be used to memoize a value?

A) useCallback
B) useEffect
C) useMemo
D) useRef
Answer: C
Note: useMemo caches a computed value between renders.

45. Which hook memoizes a callback function?

A) useCallback
B) useEffect
C) useMemo
 D) useRef
Answer: A
Note: useCallback returns a memoized version of the callback function.

46. What does the second parameter of useEffect do?

A) Determines the cleanup function
B) Specifies how long effect should last
C) Defines when the effect should re-run
D) Initializes state
Answer: C
Note: The dependency array controls when the effect should re-run.

47. Which hook allows you to track previous props or state values?
A) useEffect
B) useMemo
C) useCallback
D) useRef
Answer: D
Note: useRef can store the previous value across renders.

48. What is the return value of useState()?

A) State object
B) Array of [state, setState]
C) Single function
D) JSX
Answer: B
Note: useState returns an array with the state and a function to update it.

49. Can multiple hooks be used in a single component?

A) Yes
B) No
C) Only two
D) Only one per component
Answer: A
Note: You can use multiple hooks in one component.

50. Which hook is used to initialize a component's internal state?

A) useEffect
B) useMemo
C) useState
D) useRef
 Answer: C
Note: useState initializes and manages local component state.

51. Which hook is used to update values without causing re-renders?

A) useEffect
B) useState
C) useRef
D) useReducer
Answer: C
Note: useRef can store values without triggering a re-render.

52. What is the purpose of the useReducer hook?

A) To manage styling
B) To fetch API data
C) To handle complex state logic
D) To create props
Answer: C
Note: useReducer is used for more advanced state management than useState.

53. Which hook would you use to focus an input element?

A) useEffect
B) useRef
C) useMemo
D) useState
Answer: B
Note: useRef can be used to reference a DOM node like an input field.

54. How do you prevent an effect from re-running?

A) Use return false
B) Add [] as second argument in useEffect
C) Set useEffect(false)
D) Use useMemo
Answer: B
Note: An empty dependency array causes the effect to run only once (on mount).

55. What’s the best hook for form field value management?
A) useEffect
B) useRef
C) useState
D) useContext
 Answer: C
Note: useState is best for tracking and updating form values.

56. What happens if a dependency is missing in useEffect?

A) Nothing
B) Effect runs only once
C) It may cause stale data or bugs
D) It throws an error
Answer: C
Note: Omitting dependencies can lead to bugs due to stale values.

57. What’s the correct order to call hooks in a component?

A) Inside conditions
B) Inside loops
C) At the top level
D) After render
Answer: C
Note: Hooks must be called in the same order every time, at the top level.

58. Which hook is used for shared state across multiple components?
A) useState
B) useRef
C) useEffect
D) useContext
Answer: D
Note: useContext allows you to access context values in child components.

59. Which hook is good for performance optimization of heavy computations?

A) useRef
B) useMemo
C) useEffect
D) useState
Answer: B
Note: useMemo memorizes expensive functions to prevent recalculating unnecessarily.

60. Which hook helps to avoid re-creating functions between renders?

A) useEffect
B) useCallback
C) useMemo
D) useState
Answer: B
 Note: useCallback returns a memoized function that only changes if dependencies
change.

📝 Events & Forms (61–80)

61. How are events handled in React?

A) Inline JavaScript
B) Using jQuery
C) CamelCase syntax
D) With data attributes
Answer: C
Note: React uses camelCase syntax for events (e.g., onClick instead of onclick).

62. Which event handler is used to detect input changes in React?

A) onInputChange
B) onChange
C) onTyping
D) onEdit
Answer: B
Note: onChange is used to handle input field changes.

63. What does event.preventDefault() do in a form submission?

A) Stops API calls
B) Clears the form
C) Prevents the page from reloading
D) Submits the form
Answer: C
Note: It prevents the default behavior of a form (e.g., page reload).

64. How do you access the value of an input in a controlled component?

A) event.value
B) e.target.value
C) form.value
D) input.getValue()
Answer: B
Note: You access it using event.target.value.

65. What is a controlled component?

A) Component that handles its own styles
B) Component whose state is controlled by Redux
C) Component where form data is handled by the component’s state
 D) Component with a lot of logic
Answer: C
Note: Controlled components keep form input values in state.

66. How do you make an input field uncontrolled?

A) Use useState
B) Use defaultValue and ref
C) Use value attribute
D) Bind onChange
Answer: B
Note: Uncontrolled components rely on ref and defaultValue.

67. What hook is commonly used to handle form input in React?

A) useEffect
B) useState
C) useContext
D) useReducer
Answer: B
Note: useState tracks and updates form input values.

68. How do you submit a form without a submit button?

A) Press ESC
B) Click any field
C) Press Enter key in a field
D) Use event.stop()
Answer: C
Note: Hitting Enter in an input field inside a <form> triggers form submission.

69. How can you group multiple inputs under one state?
A) Use useEffect
B) Use useReducer or an object in useState
C) Use multiple useState
D) It’s not possible
Answer: B
Note: Group fields in an object or manage them with useReducer.

70. What’s a good reason to use useReducer in forms?

A) Fewer lines of code
B) To auto-generate fields
C) For complex form logic or grouped state
D) For animations
 Answer: C
Note: useReducer is useful when form logic becomes complex.

71. Which form input field triggers the onChange event?

A) Checkbox
B) Text input
C) Radio button
D) All of the above
Answer: D
Note: All form elements can trigger the onChange event.

72. How do you disable a button conditionally in React?

A) button.disabled = true
B) disable={true}
C) disabled={condition}
D) onDisable={true}
Answer: C
Note: Use the disabled attribute and pass a conditional expression.

73. Which is true about uncontrolled components?

A) They use refs
B) They don’t need state
C) They are simpler for basic forms
D) All of the above
Answer: D
Note: Uncontrolled components use refs, don’t depend on state, and are simpler in
basic scenarios.

74. Where should form validation logic go?

A) In CSS
B) In JSX
C) In the onSubmit or onChange handlers
D) In useEffect
Answer: C
Note: You handle validation in event handlers.

75. Which attribute prevents a form from being submitted automatically?

A) no-submit
B) autoComplete
C) prevent
D) event.preventDefault()
 Answer: D
Note: You must call preventDefault() inside the submit handler.

76. How can you track focus events in an input field?

A) onHover
B) onEnter
C) onFocus
D) onClick
Answer: C
Note: onFocus detects when an input receives focus.

77. How do you handle form submission in React?

A) Use <form method="GET">
B) Use onSubmit and prevent default behavior
C) Call submit() directly
D) Bind onClick to all fields
Answer: B
Note: Use onSubmit on the <form> and prevent default to handle submission in React.

78. How do you reference an input DOM node directly?

A) useEffect
B) useMemo
C) useRef
D) useCallback
Answer: C
Note: useRef is used to reference DOM elements.

79. How do you create a checkbox in React with two-way binding?

A) checked={value} onChange={handler}
B) value={true}
C) bindValue={true}
D) useCheckbox()
Answer: A
Note: Two-way binding in checkboxes uses checked and onChange.

80. What is the default behavior of a form submit button?

A) Clears the form
B) Logs form data
C) Submits form and reloads page
D) Shows alert
 Answer: C
Note: Without handling, forms submit and refresh the page by default.

🚦 React Router (81–100)

81. Which library is used for routing in React applications?

A) react-router-dom
B) react-route
C) react-navigator
D) react-path
Answer: A
Note: react-router-dom is the official library for client-side routing in React.

82. Which component wraps the entire application for enabling routing?
A) <Switch>
B) <Route>
C) <BrowserRouter>
D) <RouterPath>
Answer: C
Note: <BrowserRouter> is the top-level component that enables routing.

83. Which component is used to define a route?

A) <Path>
B) <Link>
C) <Route>
D) <Navigate>
Answer: C
Note: <Route> specifies the component to render for a given path.

84. How do you navigate to a different route programmatically?

A) navigate('/path')
B) redirect('/path')
C) window.route()
D) useNavigate().go('/path')
Answer: A
Note: useNavigate returns a navigate() function for programmatic navigation.

85. Which hook is used to get the current route parameters?

A) useRoute
B) useParams
C) useMatch
 D) useLocation
Answer: B
Note: useParams lets you read URL parameters inside a component.

86. Which hook gives you access to the current location object?
A) usePath
B) useRoute
C) useLocation
D) useParams
Answer: C
Note: useLocation returns information about the current URL.

87. What component is used for redirecting in React Router v6?

A) <Redirect>
B) <Navigate>
C) <Push>
D) <HistoryGo>
Answer: B
Note: In React Router v6, <Navigate> replaces <Redirect>.

88. Which component renders the first matching route among children?
A) <BrowserRouter>
B) <Navigate>
C) <Switch>
D) <Routes>
Answer: D
Note: In v6, <Routes> replaces <Switch> and only renders the first match.

89. How are dynamic route parameters defined in a path?

A) /user[id]
B) /user:id
C) /user/:id
D) /user{id}
Answer: C
Note: Parameters are defined using :paramName syntax.

90. What does the useNavigate hook return?

A) A JSX element
B) A function to update route
C) A history object
D) A route object
 Answer: B
Note: It returns a navigate() function to change routes programmatically.

91. Which prop of <Route> specifies which component to render?

A) component
B) page
C) render
D) element
Answer: D
Note: In v6, use element={<Component />} to render a component.

92. What does useRoutes() hook do?

A) Creates a new route
B) Returns JSX from a route configuration
C) Redirects to a route
D) Navigates to a URL
Answer: B
Note: useRoutes() allows you to define routes as JavaScript objects.

93. How do you create links between pages?

A) <a href="/about">About</a>
B) <Link to="/about">About</Link>
C) window.location.href = "/about"
D) navigate("/about")
Answer: B
Note: Use <Link> instead of <a> to prevent full page reloads.

94. What does the replace prop in <Navigate> do?

A) Replaces the entire app
B) Replaces current route in history stack
C) Prevents route change
D) Skips animation
Answer: B
Note: It avoids adding a new entry in history and replaces the current one.

95. How can you handle a 404 page in React Router?

A) <Route path="*">
B) <Route path="/404">
C) <Redirect to="404" />
D) <NotFound />
 Answer: A
Note: A route with path="*" catches all unmatched routes.

96. What does useMatch("/about") return?

A) Boolean
B) Route path
C) Match object if the path matches
D) Route config
Answer: C
Note: useMatch returns null or a match object if the path matches.

97. In React Router v6, what replaced exact prop?

A) It's removed; all paths are exact by default
B) strict
C) pathMatch
D) strictPath
Answer: A
Note: In v6, routes match exactly by default.

98. Which hook gives you access to navigation history?

A) useHistory
B) useRouteHistory
C) useNavigate
D) useBrowserHistory
Answer: C
Note: useNavigate is used instead of useHistory in v6.

99. What happens if two <Route> paths match the same path?
A) Both render
B) Only the first renders
C) None render
D) It throws an error
Answer: B (in <Routes>)
Note: <Routes> renders only the first matching route.

100. Which component renders children when a route matches?

A) <Switch>
B) <Route>
C) <Outlet>
D) <Link>
 Answer: C
Note: <Outlet> is used for nested routing to render child elements.

🧠 Redux & State Management (101–140)

101. What is the main purpose of Redux?

A) Routing
B) Styling
C) State Management
D) Animation
Answer: C
Note: Redux is a predictable state container for JavaScript apps.

102. Which function is used to create a Redux store?

A) makeStore()
B) initStore()
C) createStore()
D) new Store()
Answer: C
Note: createStore() creates the Redux store (deprecated in newer Redux Toolkit setups).

103. What is a reducer in Redux?

A) Middleware
B) A function that returns JSX
C) A function that returns new state
D) A routing function
Answer: C
Note: Reducers determine how state changes in response to actions.

104. What does dispatch() do in Redux?

A) Creates a new reducer
B) Sends an action to the store
C) Defines state
D) Initializes routing
Answer: B
Note: dispatch() sends an action to the store to update the state.

105. What hook is used to access Redux state in React?

A) useState()
B) useContext()
C) useSelector()
 D) useStore()
Answer: C
Note: useSelector() is used to read state from the Redux store.

106. Which Redux hook is used to dispatch actions?

A) useDispatch()
B) useAction()
C) useReducer()
D) useFire()
Answer: A
Note: useDispatch() provides access to the dispatch function.

107. Redux stores the application state in:

A) Components
B) LocalStorage
C) A single JavaScript object
D) Multiple files
Answer: C
Note: Redux maintains a single source of truth—a JavaScript object.

108. Which library helps simplify Redux logic?

A) Redux Lite
B) React Redux
C) Redux Toolkit
D) Redux Simple
Answer: C
Note: Redux Toolkit (RTK) simplifies Redux setup and usage.

109. What does combineReducers() do?

A) Combines multiple actions
B) Combines multiple stores
C) Combines multiple reducers
D) Combines multiple dispatches
Answer: C
Note: It combines multiple reducer functions into one.

110. What is the purpose of an action in Redux?

A) To update UI
B) To fetch API
C) To describe a state change
D) To delete a reducer
 Answer: C
Note: Actions are plain objects that describe what happened.

111. Redux actions must have a property named:

A) id
B) payload
C) state
D) type
Answer: D
Note: The type property describes the type of action.

112. Which middleware is commonly used for async operations in Redux?

A) ReduxFetch
B) ReduxSync
C) Redux Thunk
D) Redux Promises
Answer: C
Note: Redux Thunk allows you to write async logic in actions.

113. What is the role of middleware in Redux?

A) UI rendering
B) Logging or async handling
C) Styling
D) Component loading
Answer: B
Note: Middleware can intercept and act on dispatched actions.

114. Which Redux concept helps in avoiding prop drilling?

A) Reducers
B) Store
C) Dispatch
D) Provider
Answer: D
Note: <Provider> passes the store down the component tree via context.

115. In Redux, the payload is used to:

A) Describe action type
B) Store a reducer
C) Carry data to update the state
D) Connect components
 Answer: C
Note: payload is optional and carries the actual data.

116. What does the Redux Toolkit function createSlice() do?

A) Makes a pie chart
B) Creates actions and reducers
C) Sends async data
D) Removes boilerplate code only
Answer: B
Note: createSlice() auto-generates actions and reducers.

117. Redux Toolkit encourages using which hook instead of createStore()?

A) useRedux()
B) createReducer()
C) configureStore()
D) createState()
Answer: C
Note: configureStore() simplifies Redux store setup.

118. Which of these is NOT part of Redux core concepts?

A) Store
B) Reducer
C) Action
D) Context
Answer: D
Note: Context is from React, not Redux core.

119. Reducers must be:

A) Pure functions
B) Asynchronous
C) Random functions
D) API calls
Answer: A
Note: Reducers should be pure, with no side effects.

120. What should you avoid doing in a reducer?

A) Returning new state
B) Returning old state
C) Mutating the state
D) Using switch statements
 Answer: C
Note: Never mutate state directly in reducers.

121. Redux Toolkit’s createAsyncThunk is used for:

A) Sync reducers
B) Writing complex reducers
C) Creating async action creators
D) Accessing state
Answer: C
Note: createAsyncThunk simplifies async logic.

122. Which hook gives you direct access to the Redux store?
A) useStore()
B) useRedux()
C) useSelector()
D) useReducer()
Answer: A
Note: useStore() returns the Redux store instance.

123. What is the recommended structure for Redux Toolkit slice files?
A) One for each reducer
B) All actions in one file
C) Slices that group actions + reducers
D) Separate folders per action
Answer: C
Note: RTK encourages the slice-based modular structure.

124. Can Redux state be persisted across reloads?

A) No
B) Only with sessionStorage
C) Only with middleware
D) Yes, with packages like redux-persist
Answer: D
Note: Use redux-persist to save state in localStorage.

125. Redux DevTools allows you to:

A) Deploy Redux apps
B) Log component errors
C) Inspect and time travel Redux state
D) Monitor HTTP requests
 Answer: C
Note: Redux DevTools provide powerful debugging and time-travel features.

126. What kind of architecture does Redux follow?

A) MVC
B) MVT
C) Flux
D) SPA
Answer: C
Note: Redux follows Flux architecture (unidirectional data flow).

127. How is Redux different from React Context API?

A) Redux is for styling
B) Context can't store state
C) Redux is more scalable for large apps
D) Redux doesn’t support async
Answer: C
Note: Redux handles complex state logic better in large applications.

128. Which React component makes the Redux store available to all components?
A) <Router>
B) <App>
C) <Provider>
D) <Connect>
Answer: C
Note: The <Provider> component wraps the app to pass down the Redux store.

129. What is the default export of a createSlice() in Redux Toolkit?

A) A reducer
B) A store
C) An action
D) A hook
Answer: A
Note: createSlice() returns a reducer that gets exported.

130. What is immutability in Redux?

A) Ability to modify state
B) Preventing re-renders
C) Avoiding direct state changes
D) Mutating state inside reducers
 Answer: C
Note: Immutability ensures pure state updates.

131. What is the result of calling store.getState()?

A) Current state
B) Current action
C) New reducer
D) Action type
Answer: A
Note: getState() returns the current Redux state.

132. What does mapStateToProps() do in older Redux usage?

A) Maps actions to state
B) Connects Redux state to component props
C) Creates a store
D) Adds new reducers
Answer: B
Note: It connects the Redux state to component props using connect().

133. What is the purpose of mapDispatchToProps()?

A) Create new store
B) Register a reducer
C) Map actions to component props
D) Bind reducer to state
Answer: C
Note: It maps dispatch functions to props.

134. Redux stores are typically initialized in:

A) App.css
B) index.js or main.jsx
C) package.json
D) reducer.js
Answer: B
Note: Store setup is done in the entry point file.

135. How does Redux enforce one-way data flow?

A) State → Action → Reducer → State
B) State → Component → Reducer
C) Component → Action → Component
D) View → Model → Controller
 Answer: A
Note: Redux follows unidirectional data flow.

136. What is the alternative to Redux for simpler apps?

A) MobX
B) Context API + useReducer()
C) jQuery
D) Socket.IO
Answer: B
Note: Context + useReducer() is lightweight and suitable for small apps.

137. Which hook is often used in Redux-like state management with Context API?
A) useMemo()
B) useEffect()
C) useReducer()
D) useSelector()
Answer: C
Note: useReducer() mimics Redux logic in functional components.

138. Redux is most useful in apps with:

A) No state
B) Simple one-page views
C) Complex shared state
D) Only static content
Answer: C
Note: Redux shines in apps with complex state and multiple components needing it.

139. What is the main advantage of Redux Toolkit over vanilla Redux?
A) It works with Vue
B) It makes Redux async
C) Reduces boilerplate code
D) Removes reducer logic
Answer: C
Note: RTK simplifies Redux with built-in helpers and best practices.

140. What type of values should Redux store contain?

A) Functions
B) Promises
C) Plain objects and arrays
D) JSX Elements
 Answer: C
Note: Redux state should be serializable and kept as plain JS values.

🚀 Advanced Concepts in React (141–180)

141. What does useMemo() hook do in React?

A) Stores the DOM
B) Memoizes a function’s result
C) Handles events
D) Manages refs
Answer: B
Note: useMemo() optimizes performance by memoizing expensive calculations.

142. Which hook should you use to reference a DOM node?

A) useMemo()
B) useRef()
C) useCallback()
D) useEffect()
Answer: B
Note: useRef() can be used to persist values and reference DOM elements.

143. What is the primary purpose of useCallback()?

A) Update state
B) Re-render component
C) Memoize a function
D) Handle events
Answer: C
Note: It prevents unnecessary re-creations of functions on re-render.

144. What are React Portals used for?

A) Adding routes
B) Creating new hooks
C) Rendering children into a DOM node outside the parent
D) Handling state
Answer: C
Note: Portals allow rendering elements outside the current DOM hierarchy.

145. Which lifecycle method does useEffect() replicate?

A) componentWillMount
B) componentDidMount
C) shouldComponentUpdate
 D) getDerivedStateFromProps
Answer: B
Note: useEffect() with an empty dependency array mimics componentDidMount.

146. What does Context API solve?

A) Styling
B) State updates
C) Prop drilling
D) Re-rendering
Answer: C
Note: It avoids passing props through multiple components manually.

147. Which two hooks are primarily used for custom context logic?
A) useState & useEffect
B) useReducer & useContext
C) useRef & useMemo
D) useLayoutEffect & useDebugValue
Answer: B
Note: useContext for consuming and useReducer for managing logic.

148. What does an Error Boundary catch?

A) Async fetch errors
B) Errors during rendering/lifecycle
C) Styling bugs
D) Prop mismatches
Answer: B
Note: Error boundaries catch rendering and lifecycle errors in class components.

149. Can hooks be used in class components?

A) Yes
B) Only with useClass
C) No
D) With Babel plugin
Answer: C
Note: Hooks are only for function components.

150. Which method is required in a class to make it an error boundary?

A) render()
B) getSnapshotBeforeError()
C) componentDidCatch()
D) shouldComponentUpdate()
 Answer: C
Note: componentDidCatch() handles caught errors in error boundaries.

151. Which hook is used to customize how a hook is displayed in React DevTools?
A) useMemo()
B) useRef()
C) useDebugValue()
D) useLayoutEffect()
Answer: C
Note: useDebugValue() lets you show custom labels in DevTools.

152. What is the purpose of useLayoutEffect()?

A) To avoid side effects
B) For synchronous DOM mutations
C) For handling props
D) For rendering state
Answer: B
Note: useLayoutEffect() runs synchronously after DOM mutations.

153. Can hooks be called conditionally?

A) Yes
B) Only with useState
C) No
D) Only in class components
Answer: C
Note: Hooks must always be called in the same order.

154. Which hook should be used for form inputs?

A) useRef()
B) useLayoutEffect()
C) useState()
D) useMemo()
Answer: C
Note: useState() tracks form input values.

155. How do you define a custom hook?

A) function starts with “use”
B) function starts with “get”
C) component starts with “use”
D) use a class
 Answer: A
Note: Custom hooks start with use and follow hook rules.

156. Can React hooks be nested inside functions?

A) Yes
B) No
C) Only if memoized
D) Inside context only
Answer: B
Note: Hooks should be at the top level of functional components.

157. What does the dependency array in useEffect() control?

A) JSX rendering
B) State changes
C) Hook execution timing
D) When the effect re-runs
Answer: D
Note: It determines when useEffect() runs.

158. Which is true about the second argument in useEffect()?

A) Ignored always
B) Must be a boolean
C) Can be a function
D) Must be an array
Answer: D
Note: It should be an array of dependencies.

159. When is useLayoutEffect() preferred over useEffect()?

A) When fetching data
B) When DOM measurements must be accurate
C) For timers
D) For lazy loading
Answer: B
Note: Use useLayoutEffect when changes must happen before the screen is painted.

160. What’s the main use of React.memo()?

A) Memoize JSX
B) Avoid unnecessary re-renders of functional components
C) Prevent side effects
D) Optimize props
 Answer: B
Note: React.memo() caches a component’s render result unless props change.

161. What does the key prop do in React lists?

A) Provide unique ID for styling
B) Help React identify which items changed
C) Add event handling
D) Avoid API errors
Answer: B
Note: key improves rendering performance by tracking elements.

162. What is lazy loading in React?

A) Slowing down rendering
B) Postponing non-critical UI
C) Loading components dynamically
D) Ignoring render
Answer: C
Note: Lazy loading helps reduce bundle size and load components as needed.

163. How do you implement lazy loading in React?

A) React.lazy() + Suspense
B) React.defer()
C) React.useLazy()
D) setTimeout()
Answer: A
Note: React.lazy() + <Suspense> = code splitting in React.

164. Which hook can cause infinite loops if used incorrectly?

A) useMemo()
B) useState()
C) useEffect()
D) useRef()
Answer: C
Note: Incorrect dependencies in useEffect() may cause infinite re-renders.

165. What is a fallback in Suspense used for?

A) Handling events
B) Displaying UI while lazy component loads
C) Preventing side effects
D) Ignoring props
 Answer: B
Note: Fallback is a loading state for dynamic imports.

166. What is the output of useRef(initialValue)?

A) A string
B) A component
C) A mutable ref object
D) A hook function
Answer: C
Note: It returns { current: initialValue }.

167. Can refs trigger re-renders?

A) Always
B) Never
C) Only when mutated
D) Only if state is used
Answer: B
Note: Mutating ref.current does not cause re-renders.

168. Which React method is used to avoid prop drilling manually?

A) useState()
B) useContext()
C) useEffect()
D) useCallback()
Answer: B
Note: useContext() provides access to context values without prop chaining.

169. How can you prevent unnecessary effect executions in useEffect()?

A) Avoid using hooks
B) Pass [] as dependency
C) Call manually
D) Use useReducer()
Answer: B
Note: [] runs the effect only once after the component mounts.

170. How do you optimize expensive calculations in functional components?

A) useState()
B) useReducer()
C) useMemo()
D) useEffect()
 Answer: C
Note: useMemo() memorizes the return value of a function.

171. Which React hook is most suitable for authentication state logic?
A) useState()
B) useContext()
C) useRef()
D) useEffect()
Answer: B
Note: Context API helps manage global state like user auth.

172. Which hook should be used for subscriptions (e.g., websockets)?

A) useState()
B) useEffect()
C) useMemo()
D) useReducer()
Answer: B
Note: useEffect() is used for managing side effects like subscriptions.

173. Why is React.StrictMode used?

A) Enforce CSS rules
B) Detect potential issues
C) Prevent rendering
D) Debug Webpack
Answer: B
Note: Strict mode highlights unsafe lifecycle methods and warnings.

174. How can performance of large list rendering be improved?

A) Virtualization
B) React.lazy
C) Context API
D) useMemo
Answer: A
Note: Libraries like react-window or react-virtualized help with list performance.

175. What happens when setState() is called in React?

A) Component unmounts
B) Component updates asynchronously
C) Global state resets
D) Props change
 Answer: B
Note: State updates are batched and async.

176. What is reconciliation in React?

A) CSS rule parsing
B) Comparing new and old virtual DOM
C) Merging class components
D) State injection
Answer: B
Note: React reconciles to determine minimal changes needed in DOM.

177. What is the role of keys in React reconciliation?

A) To authenticate users
B) To optimize state
C) To identify changed items in lists
D) To merge props
Answer: C
Note: Keys help React identify which list items changed, added, or removed.

178. Which hook should be used to debounce a function?

A) useRef()
B) useMemo()
C) Custom useDebounce()
D) useEffect()
Answer: C
Note: You can create a custom hook like useDebounce() for debouncing.

179. What is tree shaking in React builds?

A) DOM refresh
B) CSS fallback
C) Removing unused code
D) Adding more hooks
Answer: C
Note: Tree shaking removes dead/unreferenced code from final bundle.

180. Can you memoize a component with React.memo() and still use hooks?
A) No
B) Only with classes
C) Yes
D) Only with useEffect
 Answer: C
Note: Functional components with hooks can be memoized.

🧪 React Performance & Testing (181–200)

181. Which React function is used to profile performance of components?

A) React.Profiler
B) React.ProfileComponent
C) React.Performance
D) React.Track
Answer: A
Note: <React.Profiler> measures render timings of its children.

182. What tool is commonly used for unit testing React components?
A) Webpack
B) Mocha
C) Jest
D) Babel
Answer: C
Note: Jest is the most popular test runner for React apps.

183. Which testing utility is built by the React team?

A) Cypress
B) React Testing Library
C) Mocha
D) Enzyme
Answer: B
Note: React Testing Library encourages testing behavior over implementation.

184. What is the purpose of snapshot testing in React?

A) Speed up builds
B) Visual testing
C) Save and compare component output
D) Track CSS changes
Answer: C
Note: Snapshot testing compares previous and current render outputs.

185. Which lifecycle method is ideal for logging errors in class components?
A) componentDidMount()
B) getDerivedStateFromProps()
C) componentDidCatch()
 D) render()
Answer: C
Note: Used in Error Boundaries to catch runtime errors.

186. What is act() used for in testing?

A) Write styles
B) Simulate events and updates
C) Profile state
D) Update hooks
Answer: B
Note: Ensures all updates related to a test are applied before assertions.

187. Which hook improves performance by caching callback functions?

A) useMemo()
B) useEffect()
C) useCallback()
D) useContext()
Answer: C
Note: Prevents unnecessary re-creation of functions between renders.

188. Which is better for rendering large lists?

A) Flexbox
B) Inline styles
C) React Virtualization
D) Class components
Answer: C
Note: Virtualized lists improve performance by rendering only visible items.

189. What does the lazy() function return?

A) A hook
B) A DOM node
C) A promise
D) A component
Answer: D
Note: React.lazy() returns a React component for dynamic imports.

190. Which of the following helps split code into chunks?

A) React.memo()
B) Webpack
C) React.lazy()
D) Babel
 Answer: C
Note: With Suspense, it enables code splitting in React.

191. Can useReducer be used to manage global state?

A) No
B) Only in Redux
C) Yes, with Context
D) Yes, in class components
Answer: C
Note: Combine useReducer and Context API for global state.

192. How do you pass props to a child component in React?

A) With useState()
B) As a second argument
C) Via JSX attributes
D) Using this.props
Answer: C
Note: JSX attributes are used to pass props to components.

193. Which testing strategy simulates user interactions in the browser?

A) Unit testing
B) Integration testing
C) Snapshot testing
D) End-to-End testing
Answer: D
Note: Tools like Cypress or Playwright are used for E2E testing.

194. What’s the best way to test React hooks?

A) Using Jest alone
B) With Enzyme
C) By wrapping them in components
D) Hooks can't be tested
Answer: C
Note: Hooks must be tested inside components or with utilities like
@testing-library/react-hooks.

195. Which tool bundles React apps?

A) Babel
B) Jest
C) Webpack
D) Node.js
 Answer: C
Note: Webpack handles bundling and asset optimization.

196. Which package helps create optimized production builds of React?

A) Babel
B) ReactDOM
C) create-react-app
D) React-scripts
Answer: D
Note: react-scripts build creates optimized production bundles.

197. What command starts a React app created by CRA (Create React App)?
A) npm run dev
B) npm start
C) npm react
D) npm serve
Answer: B
Note: npm start runs the app in development mode.

198. What’s the role of Babel in React development?

A) Compile SCSS
B) Transpile JSX and modern JavaScript
C) Optimize images
D) Debug async functions
Answer: B
Note: Babel converts JSX into browser-compatible JavaScript.

199. Which of the following is true about React performance optimization?

A) Hooks slow down apps
B) All re-renders are bad
C) Memoization can help avoid unnecessary renders
D) React handles optimization automatically
Answer: C
Note: Using React.memo(), useMemo(), and useCallback() improves performance.

200. What’s the recommended way to test if a component renders correctly?

A) Manually inspect the DOM
B) Use console logs
C) Use assertions in test suites
D) Check server logs
Answer: C
Note: Use Jest/RTL to assert rendered output in a test environment.