MCQs Of Day 11: React Hooks Overview
Part 1: General Concepts
1. What are React Hooks?
a) A new feature in JavaScript
b) A way to use state and lifecycle methods in functional components
c) A replacement for class components
d) None of the above
Answer: b
2. Which React Hook is used to manage state in a functional component?
a) useEffect
b) useContext
c) useState
d) useReducer
Answer: c
3. What is the syntax of useState?
a) const [state, setState] = useState(initialValue)
b) const [state] = useState(initialValue)
c) useState(initialValue)
d) state, setState = useState(initialValue)
Answer: a
4. Which of the following React Hooks is used for side effects?
a) useState
b) useEffect
c) useReducer
d) useContext
Answer: b
5. What does useContext hook do?
a) It manages state for multiple components
b) It provides access to context values in a functional component
c) It handles side effects
d) None of the above
Answer: b
Part 2: useState
6. Can useState accept a function as an initial value?
a) Yes
b) No
Answer: a
7. What type of value can be passed to useState?
a) Only strings
b) Only numbers
c) Any type of value
d) Only objects
Answer: c
8. What happens when you call the setState function in useState?
a) The component does not re-render
b) The component re-renders with the updated state
c) The state value is logged in the console
d) The state remains unchanged
Answer: b
9. Which of the following is correct for updating state in useState?
a) state = newValue
b) setState(newValue)
c) state.set(newValue)
d) useState.set(newValue)
Answer: b
10. What does the setState function return?
a) The updated state
b) The previous state
c) Nothing (it updates the state directly)
d) None of the above
Answer: c
Part 3: useEffect
11. When is the useEffect Hook called?
a) Only after the first render
b) After every render
c) Only before unmounting
d) None of the above
Answer: b
12. How can you run useEffect only once?
a) By passing an empty array as the dependency
b) By not passing any dependency
c) By passing null as the dependency
d) It cannot run only once
Answer: a
13. What is a dependency array in useEffect?
a) It determines what data should trigger the effect
b) It is used to pass props
c) It contains the initial state value
d) None of the above
Answer: a
14. How do you clean up a side effect in useEffect?
a) By returning a function from the effect
b) By calling useEffect.cleanup()
c) By using setState
d) None of the above
Answer: a
15. Which of the following is a valid example of useEffect?
jsx
Copy code
useEffect(() => {
document.title = "React App";
});
a) Updates the state
b) Changes the title of the document
c) Logs the state to the console
d) None of the above
Answer: b
Part 4: useContext
16. Which React API creates a context?
a) React.createContext()
b) useContext.create()
c) React.useContext()
d) useEffect.create()
Answer: a
17. What does the useContext hook require as an argument?
a) A function
b) A context object
c) An array
d) None of the above
Answer: b
18. What is the purpose of the Provider in context?
a) To manage side effects
b) To update the state
c) To supply the context value to its children
d) None of the above
Answer: c
19. Can multiple contexts be used in a single component?
a) Yes
b) No
Answer: a
20. What will useContext return if no provider is defined?
a) The default value of the context
b) An error
c) null
d) Undefined
Answer: a
Part 5: Advanced Concepts
21. Can useState accept a function for lazy initialization?
a) Yes
b) No
Answer: a
22. What happens when useEffect depends on an empty array?
a) Runs after every render
b) Runs only after the first render
c) Never runs
d) Runs continuously
Answer: b
23. Which of the following statements about useContext is true?
a) It replaces Redux
b) It cannot be used in functional components
c) It provides access to context values
d) It is only used for state management
Answer: c
24. What type of data does useContext work best with?
a) Only strings
b) Complex nested data
c) Immutable data
d) Any type of data
Answer: d
25. What is the return type of useState?
a) Only an object
b) Only an array
c) An array with state and updater function
d) None of the above
Answer: c
Would you like me to continue generating more or refine the difficulty?
4o
You said:
more
ChatGPT said:
ChatGPT
Part 6: Advanced Usage and Edge Cases
26. Can multiple useState calls be used in the same component?
a) Yes, but they must have unique initial values
b) No, only one useState is allowed per component
c) Yes, there is no restriction on the number of useState calls
d) No, they conflict with each other
Answer: c
27. What happens if the dependency array in useEffect is omitted?
a) The effect will never run
b) The effect will only run once
c) The effect will run after every render
d) The effect will throw an error
Answer: c
28. What is the best practice when using useEffect for data fetching?
a) Fetch data inside the main component body
b) Use useEffect with an empty dependency array
c) Use useEffect without a dependency array
d) Avoid using useEffect for data fetching
Answer: b
29. What is the output of the following code snippet?
jsx
Copy code
const [count, setCount] = useState(0);
setCount(count + 1);
setCount(count + 1);
console.log(count);
a) 0
b) 1
c) 2
d) 3
Answer: a
30. How can useState be updated based on the previous state?
a) By directly assigning the new state value
b) By using a callback function in setState
c) By passing an array as a second argument
d) None of the above
Answer: b
Part 7: Combining Hooks
31. Can useEffect be used inside a condition?
a) Yes
b) No
c) Yes, but only in class components
d) Yes, but only with dependencies
Answer: b
32. What is the correct way to combine useState and useEffect for a counter?
a) Initialize useState and call setState inside useEffect
b) Use useEffect only
c) Initialize useEffect before useState
d) Both must not be combined
Answer: a
33. Which of the following can lead to infinite re-rendering when using useEffect?
a) Not providing a dependency array
b) Adding setState inside useEffect without a dependency array
c) Adding incorrect dependencies in the array
d) All of the above
Answer: d
34. What happens when a useEffect dependency changes?
a) The effect is skipped
b) The effect re-runs
c) An error is thrown
d) The effect runs only once
Answer: b
35. How can you share state between components using useContext?
a) By using props
b) By creating a shared context and using Provider
c) By declaring a global variable
d) By using useReducer
Answer: b
Part 8: Real-World Applications
36. Which of the following is the most common use case for useEffect?
a) Event handling
b) Data fetching
c) Styling components
d) Declaring constants
Answer: b
37. How does React handle context updates?
a) Updates only the component where the context value is used
b) Updates all components wrapped with the context Provider
c) Updates all components in the tree
d) Does not update automatically
Answer: b
38. What is the purpose of React.memo when combined with context?
a) Prevents unnecessary renders
b) Adds new values to the context
c) Forces a component to re-render
d) None of the above
Answer: a
39. How can you access the current state inside useEffect?
a) Use a useRef hook
b) Pass the state as a dependency in the array
c) Access it directly from useState
d) Use useMemo
Answer: b
40. Which of the following is a valid usage of useContext?
jsx
Copy code
const value = useContext(SomeContext);
a) Accessing the default value
b) Using the value provided by SomeContext.Provider
c) Passing a new value to the context
d) None of the above
Answer: b
Part 9: Best Practices and Pitfalls
41. What is a common mistake when using useEffect?
a) Using it with a dependency array
b) Adding dependencies that do not change
c) Omitting necessary dependencies
d) Using it for side effects
Answer: c
42. Which statement about useState is correct?
a) useState can only hold numbers
b) useState updates are synchronous
c) useState updates are batched by React
d) useState always triggers a re-render
Answer: c
43. What should be avoided when using useEffect?
a) Updating state directly
b) Making network requests
c) Using functions as dependencies
d) Returning a cleanup function
Answer: a
44. What is a potential issue with using useContext for global state?
a) It is slow
b) It causes unnecessary re-renders
c) It cannot handle asynchronous updates
d) It replaces useState
Answer: b
45. What happens when you pass null as a dependency to useEffect?
a) It throws an error
b) The effect runs once
c) The effect runs continuously
d) The effect does not run
Answer: a
Should I continue with more advanced or project-based MCQs? Let me know!
4o
You said:
no from same concept
ChatGPT said:
ChatGPT
Here’s the continuation of MCQs on React Hooks concepts:
Part 10: Detailed useEffect Exploration
46. What is the cleanup function in useEffect used for?
a) Resetting state values
b) Cleaning up resources such as subscriptions or timers
c) Logging the effect execution
d) None of the above
Answer: b
47. How can you ensure that useEffect runs only once when a component mounts?
a) Pass no arguments to useEffect
b) Pass an empty array as the dependency
c) Pass null as the dependency
d) Call it outside the component
Answer: b
48. What will happen if the dependency array in useEffect contains variables that don't change?
a) The effect will run on every render
b) The effect will run once
c) The effect will never run
d) The effect will not run again after the initial render
Answer: d
49. Which of the following is NOT a valid dependency in useEffect?
a) State variables
b) Props
c) Functions defined outside the component
d) Static strings or numbers
Answer: c
50. What is a potential issue when forgetting to include a dependency in useEffect?
a) It runs too many times
b) It does not run when the dependency changes
c) It throws a runtime error
d) The component unmounts unexpectedly
Answer: b
Part 11: useContext in Depth
51. Which statement about useContext is true?
a) It can be used outside a context provider
b) It allows components to consume values without passing props
c) It can create a new context
d) It works only with functional components
Answer: b
52. How do you provide a value to useContext consumers?
a) Use a state hook inside the consumer
b) Wrap components with a Context.Provider and set its value prop
c) Pass the value directly into the useContext call
d) It’s done automatically
Answer: b
53. What is a common use case for useContext?
a) Managing state updates
b) Sharing global state like themes or authentication
c) Handling side effects
d) Manipulating the DOM
Answer: b
54. What happens when a useContext value updates?
a) All components using the context re-render
b) Only the updated context provider re-renders
c) No components re-render
d) Only consumers of the updated value re-render
Answer: a
55. What is the difference between useContext and Context.Consumer?
a) useContext is used in class components, while Context.Consumer is not
b) useContext provides a simpler syntax for consuming context
c) useContext is used for side effects, while Context.Consumer is not
d) There is no difference
Answer: b
Part 12: Advanced useState Usage
56. What is the best way to initialize state with a computationally expensive value?
a) Pass the computed value directly
b) Use a function in the useState call
c) Use useEffect to compute the value
d) Use a global variable
Answer: b
57. What will be the result of this code?
jsx
Copy code
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
increment();
increment();
console.log(count);
a) 0
b) 1
c) 2
d) 3
Answer: a
58. How can you prevent unnecessary re-renders when using useState?
a) By memoizing state values
b) By avoiding complex state structures
c) By using functional updates in setState
d) All of the above
Answer: d
59. What is the correct syntax for updating a state object using useState?
a) setState(newObject)
b) setState({...oldState, updatedValue})
c) setState(oldState => oldState.updatedValue = newValue)
d) state.update(newValue)
Answer: b
60. Which of the following is NOT a valid use case for useState?
a) Managing a counter
b) Storing API response data
c) Declaring constants
d) Managing form input values
Answer: c
Should I continue with additional questions or focus on a specific hook?
4o
You said:
give rest 40
ChatGPT said:
ChatGPT
Part 13: Combination of Hooks
61. Which of the following hooks would you use together to manage state and side effects?
a) useState and useEffect
b) useEffect and useContext
c) useState and useContext
d) useReducer and useEffect
Answer: a
62. How can you optimize performance when using multiple hooks?
a) Avoid using dependencies
b) Memoize values with useMemo or useCallback
c) Use hooks outside the component
d) Combine hooks into one custom hook
Answer: b
63. What is the benefit of custom hooks?
a) Share logic across multiple components
b) Use class-based lifecycle methods
c) Avoid using useState
d) Access private React APIs
Answer: a
64. How can you avoid re-rendering when using hooks?
a) Use memoization techniques like React.memo or useMemo
b) Call hooks conditionally
c) Avoid passing dependencies to useEffect
d) Use global variables
Answer: a
65. What is a potential problem when using useState inside useEffect?
a) Infinite re-renders
b) State values are not accessible
c) State values reset on each render
d) Hooks will not work
Answer: a
Part 14: Dealing with useEffect Dependencies
66. What happens if you forget to include a state variable in the dependency array of useEffect?
a) The effect may not behave as expected
b) The effect will not run at all
c) It will throw an error
d) The app will crash
Answer: a
67. Which of the following can cause an infinite loop with useEffect?
a) Omitting the dependency array
b) Including a function reference in the dependency array
c) Forgetting to clean up side effects
d) Using static dependencies
Answer: a
68. How can you avoid including a function in useEffect's dependency array?
a) Use useCallback to memoize the function
b) Remove the function from the dependencies manually
c) Wrap it in a useMemo
d) Functions are automatically excluded
Answer: a
69. What is the purpose of adding a dependency array to useEffect?
a) To control when the effect is triggered
b) To prevent the effect from running
c) To manually rerun effects
d) To clean up effects automatically
Answer: a
70. How does React handle multiple useEffect calls in a single component?
a) It ignores all but the first useEffect
b) It runs them in the order they appear
c) It merges them into one effect
d) It only executes the last one
Answer: b
Part 15: Complex State Management with Hooks
71. What is the difference between useState and useReducer?
a) useState is for global state, useReducer is for local state
b) useReducer is better for complex state logic
c) useReducer requires Redux
d) useState is asynchronous, useReducer is synchronous
Answer: b
72. Which function does useReducer return?
a) Reducer function and state value
b) Reducer function and dispatch function
c) State value and dispatch function
d) Only a state value
Answer: c
73. What is a common use case for useReducer?
a) Managing simple boolean states
b) Handling complex state logic with multiple sub-values
c) Sharing state between components
d) Fetching API data
Answer: b
74. What arguments does the useReducer hook take?
a) Reducer function and initial state
b) Reducer function and dependency array
c) Initial state and dispatch function
d) Reducer function only
Answer: a
75. Which of these is an example of an action in useReducer?
a) { type: "INCREMENT" }
b) dispatch("INCREMENT")
c) state => state + 1
d) { state: "INCREMENT" }
Answer: a
Part 16: Debugging Hooks
76. What is the React Developer Tool used for with hooks?
a) Inspecting dependencies
b) Viewing state and props of components
c) Debugging side effects
d) All of the above
Answer: d
77. Why is it important to follow the rules of hooks?
a) To avoid runtime errors
b) To maintain predictable component behavior
c) To enable React's optimization mechanisms
d) All of the above
Answer: d
78. Which tool can help you check for improper use of hooks?
a) ESLint with the React Hooks plugin
b) Redux DevTools
c) Chrome DevTools
d) Babel
Answer: a
79. What will happen if a hook is called conditionally?
a) It will work as expected
b) It might cause bugs because hooks rely on a consistent order
c) It will throw a syntax error
d) The hook will be ignored
Answer: b
80. What is a common mistake when using hooks?
a) Using them with class components
b) Declaring them after a return statement
c) Calling them outside a function component
d) All of the above
Answer: d
Part 17: Miscellaneous
81. Can hooks replace all lifecycle methods in class components?
a) Yes
b) No
c) Only for certain methods
d) It depends on the application
Answer: a
82. What happens when you call useState multiple times in a component?
a) Each call creates a separate state variable
b) It overwrites previous state variables
c) It creates a single shared state
d) It throws an error
Answer: a
83. Which hook would you use to store a reference to a DOM element?
a) useState
b) useEffect
c) useRef
d) useMemo
Answer: c
84. What is useRef primarily used for?
a) Storing mutable values that persist across renders
b) Tracking dependencies in useEffect
c) Creating memoized callbacks
d) Managing state
Answer: a
85. Which hook is suitable for creating memoized functions?
a) useMemo
b) useCallback
c) useRef
d) useState
Answer: b
Would you like more detailed questions or explanations on any particular hook?
4o
You said:
rest 15
ChatGPT said:
ChatGPT
Part 18: Advanced Hook Concepts
86. What happens when you use useEffect without a dependency array?
a) It runs once on mount
b) It runs on every render
c) It runs on unmount only
d) It throws an error
Answer: b
87. Which of these hooks can cause a memory leak if not cleaned up properly?
a) useState
b) useReducer
c) useEffect
d) useRef
Answer: c
88. How do you prevent unnecessary re-renders in child components using hooks?
a) Use React.memo
b) Pass static props
c) Use useCallback for functions and useMemo for values
d) All of the above
Answer: d
89. What is the default behavior of useEffect cleanup?
a) It runs on unmount only
b) It runs before the next render
c) It runs after the next render
d) It runs immediately after the effect
Answer: b
90. What kind of values can useRef store?
a) Only DOM elements
b) Only strings
c) Mutable values that persist across renders
d) Only numbers
Answer: c
Part 19: Handling Context with Hooks
91. Which hook allows you to use context in a functional component?
a) useContext
b) useState
c) useReducer
d) useEffect
Answer: a
92. How does useContext improve code readability?
a) By removing the need to pass props down multiple levels
b) By automatically updating state
c) By reducing the number of components
d) By preventing unnecessary re-renders
Answer: a
93. What does the useContext hook return?
a) A value provided by the nearest Context.Provider
b) A context object
c) A state value and a dispatch function
d) A reference to a DOM node
Answer: a
94. What is the correct way to use useContext?
a) const value = useContext(Context);
b) const [value] = useContext(Context);
c) const { value } = useContext(Context);
d) useContext(Context, value);
Answer: a
95. When should you use useContext?
a) To avoid prop drilling
b) To manage local state
c) To replace all state management libraries
d) To handle asynchronous data
Answer: a
Part 20: Error Boundaries and Hooks
96. Can hooks like useState or useEffect be used inside error boundaries?
a) Yes
b) No
c) Only in React 18 or later
d) Only with custom hooks
Answer: b
97. What is the main purpose of error boundaries in React?
a) To manage state during errors
b) To catch JavaScript errors in components
c) To manage side effects
d) To optimize rendering
Answer: b
98. Why can’t hooks be used in class-based components?
a) They are designed only for functional components
b) They are deprecated for classes
c) They are automatically polyfilled
d) They conflict with lifecycle methods
Answer: a
99. What would happen if you call useState outside of a functional component?
a) It will throw an error
b) It will work normally
c) It will cause a warning
d) It will be ignored
Answer: a
100. What is the main reason to switch from class components to functional components with hooks?
a) Simpler and cleaner code
b) Hooks are faster than classes
c) Classes are deprecated in React
d) Functional components support lifecycle methods
Answer: a